宝塔面板部署前后端项目SpringBoot+Vue2

这篇博客主要用来记录宝塔部署前端后端项目的过程。因为宝塔部署有点麻烦，至少在我看来挺麻烦的。我还是喜欢原始的ssh连接服务器进行操作。但是公司有项目用到了宝塔，没办法啊，只能摸索记录一下。

我们需要提前准备好后端项目的jar包和前端项目的dist文件哈！

文章目录

前端项目的部署

先去文件里创建好项目文件，然后进去直接上传dist文件

把前端项目上传上去，然后解压：

接下来去创建网站、站点：

可以看到网站创建好了：

记住，这里目录要放到dist：

后端项目的部署

再部署后端项目之前，需要准备好jar包

nginx反向代理的配置

反向代理配置在前端配置。

xml 复制代码

     # 前端配置
    location / {
        root /www/wwwroot/demo.html.test.jiekee.com/dist;  # 前端打包文件存放路径
        index index.html;
        try_files $uri $uri/ /index.html;  # 支持 vue-router 的 history 模式
    }

    # 后端接口代理
    location /api/ {
        proxy_pass http://localhost:37018/api/;  # 后端服务地址
        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;
    }

注：

工作流程：

前端发送请求到 /api/image/analyze
Nginx 匹配到 location /api/
请求被转发到 http://127.0.0.1:37018/api/image/analyze
如果我们不加 /api ，比如：

nginx 复制代码

location /api/ {
    proxy_pass http://127.0.0.1:37018/;
}

那么请求会变成 http://127.0.0.1:37018/image/analyze ，这样就找不到后端的接口了，因为我们的后端 Controller 都是以 /api 开头的。

在这个项目中，Nginx 主要发挥了"中间层"的作用，具体表现在：

请求转发：
- 当前端发送 /api/image/analyze 请求时
- Nginx 接收到请求后，将其转发到后端服务（37018端口）
- 这就是为什么前端代码中可以直接使用：

javascript 复制代码

axios.post('/api/image/analyze', {
  base64Image: base64Image,
  textContent: this.analysisPrompt
})

如果不使用 Nginx，你需要： 1. 前端直接访问后端 IP:端口（例如 http://47.120.52.207:37018/api/...) 2. 处理跨域问题 3. 单独部署静态资源所以 Nginx 在这里起到了统一入口、请求转发和资源管理的作用。不这样做，前端代码里就要写死各种端口了，这样做肯定不行的！