從部署上做到前后端分離

前言

記得在讓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

首發鏈接