從部署上做到前後端分離

前言

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

首發鏈接