寫在前面
博客爲工作小記。
現在前後端分離的項目，關於前端的部署，主要有兩種方法：
- 打包後直接放在Spring boot的static文件夾下
- 打包後用Nginx進行部署與接口轉發
廢話警告
爲什麼要採用第二種方式呢？個人看法：前後端分離的最簡單、直接目的就是——前後端分別開發。1所述的方式雖然也是分別開發的，但是部署的時候還是把編譯後的文件放到了後端代碼裏，然後後端再打包，使得後端有些“臃腫”。雖然這種方式比較簡單，但我個人覺得，其實是違反了前後端分離的本意。並且使用Nginx來部署可以帶來Nginx自身的一些負載均衡等優勢，是企業級開發的標準選擇。
安裝Nginx
隨便寫點，安裝過程不是很重要。
官網下載一個穩定版本。官網鏈接.
下載後隨便解壓放在一個地方即可，比如桌面。
然後幾條常用命令，先cd到nginx的更目錄。
1.啓動nginx
start nginx
2.關閉nginx
nginx -s quit
3.重載配置（已經啓動的情況下，修改了配置，執行命令。當然，你可以關了重開）
nginx -s reload
打包VUE項目
在webstorm的terminal內運行
npm run build
完成後會生成一個編譯好的dist文件夾，裏面包含了img、css、html等文件。
配置nginx
目的：
- 部署打包後的靜態資源。
- 反向代理，將前端的請求轉發到後端。
一個demo:
server {
# 需要被監聽的端口號，前提是此端口號沒有被佔用，否則在重啓 Nginx 時會報錯
listen 8888;
# 服務名稱，無所謂
server_name localhost;
# 打包好的VUE項目
root C:\Users\lenovo\Desktop\dist;
# 項目根目錄中指向項目首頁
index index.html;
client_max_body_size 20m;
client_body_buffer_size 128k;
# 根請求會指向的頁面
location / {
# 此處的 @router 實際上是引用下面的轉發，否則在 Vue 路由刷新時可能會拋出 404
try_files $uri $uri/ @router;
# 請求指向的首頁
index index.html;
}
# 由於路由的資源不一定是真實的路徑，無法找到具體文件
# 所以需要將請求重寫到 index.html 中，然後交給真正的 Vue 路由處理請求資源
location @router {
rewrite ^.*$ /index.html last;
}
#配置請求轉發
#注意地址裏的幾個"/"，"http://localhost:8888/api/"轉發到"http://localhost:8023/"
location /api/ {
# 後端的真實接口
proxy_pass http://localhost:8023/;
proxy_redirect off;
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 Cookie $http_cookie;
}
}
記錄一個錯誤
中途調試的時候，發生了這樣一個問題：在開發環境中毫無問題，但是打包在nginx上部署後，有部分接口在訪問時爆出：We’re sorry but mobile doesn’t work properly without JavaScript enabled. Please enable it to continue
在網上查了查，也仔細比對了一下代碼，發現問題如下啊：
//修改前
getRequst('aop_logout').then(resp=>{
console.log(resp);//打印返回消息，內容即爲上述的報錯
getRequst('logout');
});
//修改後，加了"/"
getRequst('/aop_logout').then(resp=>{
console.log(resp);
getRequst('/logout');
});
// 這是配置的axios方法，可以很明顯的看出少了"/"會出現字符串拼接錯誤，但爲什麼開發環境下正常運行就不知道了
export const getRequst=(url,params)=>{
return axios({
method:'get',
url:'/api'+url,
data:params,
})
};
所以請求其實根本沒到達後端，所以後端的響應代碼也沒有執行。