宝塔面板部署前后端分离项目 前端vue 后端springboot 数据库MySql

1.前端项目打包 以我这个vue项目为例子 执行NPM脚本 点击build 进行项目打包 。目录中会出现dist 文件夹 

  

 2.后端项目打包 以springboot项目为例

打开maven面板  双击目录下的package 这是在项目目录中会出现target目录 下面的.jar 包就是我们打包好的 后端项目  打包之前记得修改文件上传 日志等等存储在本地路径的内容  

3.接下来打开宝塔控制面板 （记得将涉及到的前端端口 后端端口 放行）

 点击文件 创建项目存放目录 分别将前端打包好的dist文件夹 和jar包上传 同时将我们后端application.yml 配置文件上传进来

4.部署前端vue项目

①点击网站 选择php项目 点击添加站点（首页上方为服务器IP）

②在弹出的窗口中添加域名 如果没有域名 用自己服务器IP即可 默认端口号为80 如果想设置其他端口xxx.xxx.xxx.xxx:5xxx(此处设置你自己的前端口号)  

 ③选择前端项目根目录 就是我们打包好的 dist文件夹（一定要进入到该文件夹下）

 

④最后点击确定  接下来点击设置

 点击域名 不出意外的话 就可以正常访问到前端页面此时是没有数据的（ 如果出现页面404 可以尝试在配置文件中尝试添加）

location /
    {
      try_files $uri $uri/ /index.html;
    }

5.后端项目部署 

①点击数据库  添加数据库将自己的sql文件导入进来（注意可能会遇到导入失败 是因为你本地数据库版本和宝塔中的版本不匹配所导致的 可以查阅资料寻找解决办法）接下来打开我们上传的后端配置文件

 将自己的数据库信息 修改为刚刚创建的数据库 因为数据库为内网访问 localhost即可 添加自己的数据库端口（默认为3306） 和 自己的数据库名称 填写自己的用户名密码

下边的port端口为前端访问后端的端口

②点击PHP项目 右侧JAVA项目 点击添加Java项目

 项目路径点到我们上传的jar包即可 项目端口为上述后端端口 选择合适的jdk (如果涉及到阿里云对象存储 需要添加指定环境变量 阿里云密钥 ) 最后点击确定

6.接下来就可以正常访问我们的网页了 如果前端连接后端失败 可以尝试在前端项目配置文件中添加反向代理

location /api/ {
    proxy_pass http://xxx.xxx.xxx.xxx:xxxx/;  # 替换为实际后端地址和端口
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    }