这篇博客主要用来记录宝塔部署前端后端项目的过程。因为宝塔部署有点麻烦，至少在我看来挺麻烦的。我还是喜欢原始的ssh连接服务器进行操作。但是公司有项目用到了宝塔，没办法啊，只能摸索记录一下。
我们需要提前准备好后端项目的jar包和前端项目的dist文件哈！
文章目录
- 前端项目的部署
- 后端项目的部署
- nginx反向代理的配置
前端项目的部署
先去文件里创建好项目文件，然后进去直接上传dist文件
把前端项目上传上去，然后解压：
接下来去创建网站、站点：
可以看到网站创建好了：
记住，这里目录要放到dist：
后端项目的部署
再部署后端项目之前，需要准备好jar包
nginx反向代理的配置
反向代理配置在前端配置。
# 前端配置
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 ，比如：
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端口）
- 这就是为什么前端代码中可以直接使用：
axios.post('/api/image/analyze', {
base64Image: base64Image,
textContent: this.analysisPrompt
})
如果不使用 Nginx，你需要： 1. 前端直接访问后端 IP:端口（例如 http://47.120.52.207:37018/api/…) 2. 处理跨域问题 3. 单独部署静态资源 所以 Nginx 在这里起到了统一入口、请求转发和资源管理的作用。不这样做，前端代码里就要写死各种端口了，这样做肯定不行的！
