篇首語
大家好，我是“全棧”，是我的筆名。我是一個來自廣州的高中獨立開發者，喜好一切與電腦有關的東西，隨時寫些隨筆。
寫下這篇文章前，我已經累計在電腦前爲這個問題，解決了足足4個小時。當我敲下鍵盤時，不免心生感慨…特寫文一篇，以做後記，啓示世人
爲了讓這篇踩坑+教程文更直戳重點，我在這裏列出來這篇文章涉及到的：
- Vue.js 及 Vue Router
- SPA單頁應用
- Webpack打包（涉及到了Quasar框架）
- 啓用了Html5 History的Route模式
- 部署到Nginx
- 部署到子目錄，旨在於後端共存
- 踩坑了nginx反向代理及url匹配
- 簡要介紹一種較爲簡易的同域前後端分離的部署架構
- 可能是全網最詳細（囉嗦）的
說實話，在CSDN上那麼用心寫文章的，還被你看到，真是難得。何不點贊關注轉發三連再走？
部署方向
最近接了一個任務，我承擔前端開發。前端是一件很美好的事情，兩三天寫完了，但就在部署的時候，噩夢來了。
- 我們要求，同時因爲跨域問題，前後端必須部署在同一個域名下，我們稱之爲https://hole.com，以有利於RESTful API的請求
- 因此，我希望可以在https://hole.com/webapp下作爲SPA的訪問鏈接，而https://hole.com/api/…則就是後端的鏈接
- 同時，我的Vue Router啓用了h5 history模式，即https://hole.com/webapp/user/login這樣的鏈接，是SPA處理的（就像https://hole.com/api/user/login是後端處理的一樣）
- ok那開始吧
部署
這裏是我總結了四個小時探索經驗給出的方向，說真的全網說到nginx配置的都是複製黏貼，相信很多人都是看到能用就複製（包括我，最後發現解決問題還是要知其所以然，互勉）
Quasar 配置（使用Quasar可省略Router Webpack的配置）
子路徑是/webapp
build: {
vueRouterMode: 'history',
vueRouterBase: '/webapp',
publicPath: '/webapp'
}
Vue Router配置
const Router = new VueRouter({
mode: 'history',
base: '/webapp'
...
})
Webpack配置/Quasar配置
//如果你使用Webpack打包
export default {
output: {
publicPath: '/webapp',
}
Nginx的配置A-主服務器
這裏指的是監聽https://hole.com的服務器，其實也是接受後端請求的服務器（vhost）
server {
listen 443 ssl;
server_name hole.com;
server_tokens off;
error_log hole.log;
root /home/www/hole;
index index.php index.html index.htm;
if ($request_method !~ ^(GET|POST|HEAD)$ ) {
return 444;
}
#前端匹配部分
location /webapp/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_pass http://localhost:10250/;
#這個一定要/結尾,不結尾搞死人,等下說
}
#後端匹配部分
location / {
if (!-e $request_filename) {
rewrite ^/index.php(.*)$ /index.php?s=$1 last;
rewrite ^(.*)$ /index.php?s=$1 last;
break;
}
}
location ~ .*\.php$ {
fastcgi_pass unix:/run/php/php7.1-fpm.sock;
fastcgi_index index.php;
include /etc/nginx/fastcgi.conf;
}
}
我們是用反向代理來代理前端的請求，爲前端單獨設置一個vhost，任何發送到https://hole.com/webapp/的請求都會被代理到10250端口的vhost中單獨處理。
坑：一定注意proxy_pass http://localhost:10250/;這一行末尾的/，只有以/結尾，https://hole.com/webapp/hello發送代理服務器鏈接纔是/hello，而不是/webapp/hello。具體可看我寫的文章。
Nginx的配置B-前端
server {
listen 10250;
error_log webapp.log;
location / {
try_files $uri $uri/ /index.html;
root /home/www/hole/webapp;
index index.html;
}
}
在這裏我們單獨設置一個服務器監聽前端的請求，當做他是一個根路徑爲/的服務器。這也是爲什麼反代中，proxy_pass http://localhost:10250/;需要末尾加/，截去weapp路徑的原因。
後果和原理
如果我發起了https://hole.com/webapp/user，則會被A服務器（充當總入口）的/webapp location匹配到，進入B服務器中。並且進入的路徑是/user，符合h5history實現，會優雅被VueRouter處理到。
如果發起https://hole.com/api，則被A的/ locaiton匹配到，交由A配置的php後端處理。
至此解決了同域部署下，SPA與後端共存的方案
總結與補充
總結：解決問題，知其所以然真的很重要。之前解決nginx的配置問題總是靠複製黏貼，最後，遇到複雜場景的時候要自己撰寫的時候，你還是要還的。我還是個學生，做到的，只能是一點一滴。
補充：經過這四個小時，鄙人足足看了不下百篇nginx配置的相關知識，於是我會在接下來撰寫一些關於nginx配置的小技巧和感悟，歡迎關注。
更多文章
- Nginx中URL匹配小計及反向代理中路徑小坑
- Nginx try_files 非複製黏貼原創全解析
說實話，在CSDN上那麼用心寫文章的，還被你看到，真是難得。何不點個贊關注轉發下再走？
歡迎交流~~~
