從部署上作到先後端分離

前言

記得在讓Nodejs支持H5 History模式（connect-history-api-fallback源碼分析）一文中提到了HTML5的History Mode。然而在最近的使用過程當中發現connect-history-api-fallback這個包效果並非那麼理想，用一段時間就會報錯。並且自己個人博客項目先後端並未徹底分離，雖然開發時是獨立的工程，可是前端工程打包後仍是放在了express的靜態資源文件夾下進行部署。考慮到這兩個痛點，我決定在nginx配置中對先後端進行部署分離。

前端獨立部署

前端工程npm run build打包後，再也不copy到後端工程public目錄下。而是獨立部署在nginx的靜態資源目錄下，我放置的目錄是/usr/nginx/share/html/blog

相關nginx配置以下：

#博客轉發 blog.wbjiang.cn
server {
    listen       80;
    server_name  blog.wbjiang.cn;
    root /usr/share/nginx/html/blog;
    access_log logs/blog.log;
    error_log logs/blog.error;

    #博客靜態文件
    location / {
    	try_files $uri /index.html;
    }
}
複製代碼

**小建議：**能夠在開發新功能完畢後，就將打包完畢的代碼提交到倉庫的release分支，而後直接在linux服務器上對應目錄下的Git倉庫中git pull，也算是半自動化部署了（後面也準備研究下全自動化部署）。

後端接口轉發

blog.wbjiang.cn/api前綴的視爲接口請求，統一轉發到express後臺服務。配置以下：

#api轉發
location /api {
    proxy_pass http://blog_pool;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    rewrite ^/api/(.*)$ /$1 break;
}
複製代碼

負載均衡池配置（雖然只有一個服務，手動「狗頭」）

upstream blog_pool{
	server 127.0.0.1:8002;
}
複製代碼

重啓服務

pm2重啓

pm2 restart blog
複製代碼

nginx重啓

nginx -s reload
複製代碼

首發連接