从部署上作到先后端分离

前言

记得在让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
复制代码

首发连接