這篇博客主要用來記錄寶塔部署前端后端項目的過程。因為寶塔部署有點麻煩，至少在我看來挺麻煩的。我還是喜歡原始的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 在這里起到了統一入口、請求轉發和資源管理的作用。不這樣做，前端代碼里就要寫死各種端口了，這樣做肯定不行的！
