很多同學(xué)做完 SpringBootVue 畢設(shè)后本地運(yùn)行沒(méi)問(wèn)題但一部署到服務(wù)器就不知道怎么訪問(wèn)前端和后端接口。本文記錄一套比較通用的 Nginx 反向代理部署方案適合計(jì)算機(jī)本科畢業(yè)設(shè)計(jì)項(xiàng)目上線演示。1. 部署結(jié)構(gòu)前后端分離項(xiàng)目通常有兩個(gè)獨(dú)立部分SpringBoot 后端運(yùn)行在服務(wù)器某個(gè)端口比如8080Vue 前端打包成靜態(tài)資源由 Nginx 訪問(wèn)Nginx接收用戶請(qǐng)求把前端頁(yè)面返回給瀏覽器把/api請(qǐng)求轉(zhuǎn)發(fā)給后端推薦結(jié)構(gòu)用戶訪問(wèn)域名 ↓ Nginx ├─ 前端頁(yè)面 → /root/dist/ └─ 后端接口 → http://127.0.0.1:80802. 前端打包Vue 項(xiàng)目部署前先打包生產(chǎn)環(huán)境代碼npm run build打包完成后會(huì)生成一個(gè)dist目錄。把這個(gè)目錄上傳到服務(wù)器比如放到/root/dist/注意如果前端請(qǐng)求地址寫死了localhost:8080部署后會(huì)訪問(wèn)失敗。建議把接口地址改成相對(duì)路徑例如baseURL: /api這樣前端請(qǐng)求會(huì)自動(dòng)訪問(wèn)當(dāng)前域名下的/api再由 Nginx 轉(zhuǎn)發(fā)給 SpringBoot。3. 后端打包運(yùn)行SpringBoot 項(xiàng)目使用 Maven 打包mvn clean package -DskipTests打包成功后在target目錄下找到j(luò)ar包上傳到服務(wù)器并運(yùn)行nohup java -jar demo.jar 運(yùn)行后檢查端口是否正常netstat -nltp | grep 8080如果能看到 8080 端口說(shuō)明后端已經(jīng)啟動(dòng)。4. Nginx 配置反向代理編輯 Nginx 配置文件vim /etc/nginx/nginx.conf加入以下內(nèi)容server { listen 80; server_name localhost; root /root/dist; index index.html; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }配置說(shuō)明/請(qǐng)求訪問(wèn) Vue 靜態(tài)頁(yè)面/api/請(qǐng)求轉(zhuǎn)發(fā)給本地 SpringBoot 后端try_files是為了支持 Vue 路由刷新頁(yè)面不 404重新加載 Nginxnginx -s reload5. 開放服務(wù)器端口服務(wù)器一定要開放80端口如果后端直接對(duì)外訪問(wèn)還需要開放8080。云服務(wù)器一般在安全組里配置開放TCP 80TCP 80806. 常見(jiàn)問(wèn)題問(wèn)題 1前端頁(yè)面訪問(wèn)不到檢查dist目錄路徑是否正確Nginx 是否有權(quán)限讀取該目錄。問(wèn)題 2后端接口 404檢查接口路徑是否以/api開頭SpringBoot 上下文路徑是否配置正確。問(wèn)題 3跨域報(bào)錯(cuò)前后端分離項(xiàng)目部署后如果還出現(xiàn)跨域優(yōu)先檢查前端baseURL和 Nginx 反向代理是否配置正確。問(wèn)題 4項(xiàng)目重啟后訪問(wèn)失敗確認(rèn) jar 包是否還在運(yùn)行服務(wù)器端口是否開放Nginx 是否重新加載成功?？偨Y(jié)SpringBootVue 畢設(shè)項(xiàng)目部署核心不是 “把項(xiàng)目放上去” 這么簡(jiǎn)單而是要理清前端、后端、Nginx 三者的請(qǐng)求關(guān)系。最穩(wěn)定的方式是Nginx 負(fù)責(zé)接收請(qǐng)求前端走 Nginx 訪問(wèn)后端接口走反向代理轉(zhuǎn)發(fā)。本文對(duì)應(yīng)的 Nginx 配置文件、SpringBoot 部署 jar 包、Vue 打包說(shuō)明我已經(jīng)整理成資源放在主頁(yè)需要做畢設(shè)上線的同學(xué)可以參考學(xué)習(xí)僅供學(xué)習(xí)研究。