从部署上做到前后端分离
记得在让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 blognginx 重启
nginx -s reload本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-08-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读