通过宝塔部署前后端分离项目(SpringBoot+Vue)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
-
放开项目中涉及的端口
安全->添加端口规则->指定哪些IP可以访问

-
配置项目数据库

我习惯通过navicate连接数据库,如果连接数据库出现Access denied for user ‘root’@ ‘...’ (using password: YES)等问题,可以参考https://www.jb51.net/article/264010.htm
3. 部署后端
- 将后端jar包上传到指定目录下

- 网站->添加java项目->选择项目类型->指定jar包所在位置->指定项目端口并放行允许外界访问->配置需要的jdk信息

- 添加成功后点击项目名称可以打开项目管理弹窗,通过项目日志可以查看项目启动情况

4.部署前端
- 上传前端文件夹到指定目录下

- 网站->PHP项目->添加站点->指定服务器IP和端口->选择前端文件所在目录

- 添加成功后点击网站名,在配置文件中修改nginx配置

如果项目有多个前端入口,比如我的项目有用户端和管理端入口,只需要重复上面的操作,只是在添加站点的时候,由于服务器的IP已经被其他站点使用,这个时候只需要随便指定一个IP和一个未被占用的端口,添加成功后,选择这个站点的设置按钮,添加服务器的IP,并将之前那个随便填的IP删除就可以了




前端配置文件
server
{
listen 8081;
server_name xxx.xxx.xxx.xxx;
index index.php index.html index.htm default.php default.htm default.html;
root /www/wwwroot/managerUI/dist;
try_files $uri $uri/ /index.html;
#SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
#error_page 404/404.html;
#SSL-END
#ERROR-PAGE-START 错误页配置,可以注释、删除或修改
#error_page 404 /404.html;
#error_page 502 /502.html;
#ERROR-PAGE-END
#PHP-INFO-START PHP引用配置,可以注释或修改
include enable-php-80.conf;
#PHP-INFO-END
#REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
include /www/server/panel/vhost/rewrite/xxx.xxx.xxx.xxx.conf;
#REWRITE-END
#禁止访问的文件或目录
location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md)
{
return 404;
}
location /prod-api/ {
# 去除 /prod-api 前缀
rewrite ^/prod-api/(.*)$ /$1 break;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE_HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:8080;
}
#一键申请SSL证书验证目录相关设置
location ~ \.well-known{
allow all;
}
#禁止在证书验证目录放入敏感文件
if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
return 403;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
error_log /dev/null;
access_log /dev/null;
}
# location ~ .*\.(js|css)?$
# {
# expires 12h;
# error_log /dev/null;
# access_log /dev/null;
# }
access_log /www/wwwlogs/xxx.xxx.xxx.xxx.log;
error_log /www/wwwlogs/xxx.xxx.xxx.xxx.error.log;
}
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)