前端路由应用部署的一些看法

客户端渲染的发展

随着Angularjs带入了MVVM思想，React和Vue的兴起，客户端渲染应用在前端开发中变得流行起来。所谓客户端渲染，指的是页面的dom结构都由前端js来生成，而服务端只是渲染了一个基础模板，这样大大的减少了服务端的压力。尤其是一些后台管控系统等对seo等不敏感的场景下，应用非常广泛。

路由

因为面向服务端的只是一个模板文件，所以前端应用的路由都是由前端自己来控制的。而通常前端路由的实现方式一种是hash方式，一种是history方式。我比较推荐history方式。

部署

关于客户端渲染应用的部署，我觉得有几点要注意：

1. 前后端分离部署，前端不需要依赖后端。前后端是平等的关系。
2. 机器资源宝贵，要做到合理利用。
3. 访问链路不能过长。

所以我有过几套发布部署的方案，也思考过一些方案的优缺点。

1. 前端部署到有nginx应用的服务器上，后端部署到node服务器上（以node应用为例）。nginx设置反向代理，将需要打给后端的请求配置好。外部请求过来时，先打到nginx服务器上，开始渲染前端页面，页面中的请求再打到nginx服务器上，这时候会被反向代理到node服务器上，node作出响应后，nginx拿到后再返回给客户端。
2. 前端部署到静态资源上，后端部署到node服务器上，nginx根据location来判断是否为前端静态文件，如果发现则直接请求静态资源，否则则打到node服务器上。

两种方案，其实我个人觉得差不多，其实差别也不大。其实无论选择哪种方案，适合自己的才是最好的。我在设想部署这个博客的时候，打算用docker包掉一切，但是最后发现机器带不动～。所以我现在的部署方式类似第二种，本地写了一个脚本，本地编译 + scp至云端dist目录。而后端部分，则是压缩 -> scp上传 -> 执行脚本(解压、npm install、npm start)。

附送上 hash 路由 nginx的配置：

nginx配置

location ~ /admin/ {

 root /Users/user/MySpace/nbook-admin;

 index index.html;

 include /Users/user/Myspace/nbook-admin/admin/.htaccess;

}

.htaccess

if (!-e $request\_filename){

 rewrite ^/(.\*)$ /admin/index.html?\_ca\_=$1 last;

}