大前端服务器渲染 发布和部署 Vue + Nuxt（SSR） + Nginx

不知道大家在接触React或者Vue的时候，有没有思考过，这个框架到底是在哪里渲染的？

其实现在流行的Ng、React和Vue等前端技术，都是属于浏览器渲染，最初设计的理念是为了减轻服务器压力，但是这个也是有弊端的，最主要的，比如首页加载过慢（因为第一次加载需要加载JS等资源，然后浏览器会根据JS绘画渲染页面，这个过程需要一定的时间）和不利于SEO的优化（百度等国内的网络蜘蛛不会爬异步加载的网站）。所以，有了这两大弊端，必须把一些官网或者主网站弄成SSR，提高渲染效率和SEO优化。

React有个SSR叫做Next.js，Vue也有一个SSR，就是Nuxt.js。下面先介绍Nuxt.js在Linux上的发布和部署。

1，首先，在服务器上装好Node.js / NPM。这里就不教安装了，自己搜索。

2，利用 NPM 安装 Vue 和 Nuxt。自己前往官网安装，可用脚手架，也可自己新建项目。Nuxt官网

3，然后就是把项目在服务器上跑起来，先编译（npm run build），之后就发布（npm run start），默认开启的路径是localhost:3000。

4，这里如果你是用npm run start发布的话，服务进程会随着你的Shell关闭而关闭，也就是说，要把服务进程转成守护进程开启才是。也就是说，上面的发布命令要换成 nohup npm run start & 才行。后面的&不能漏哦。

5，发布之后，接下来就是测试你这个服务有没有发布成功，可以用以下两步，第一个，首先输入命令 ps -ef | grep nuxt ，如果返回的是两个进程，那就恭喜您，你已经发布成功。第二个， 接着输入 curl http://localhost:3000 （为什么这里是要localhost:3000呢？我不能直接用IP吗？其实你试一下curl IP你就知道了，IP的请求不通的）

6，使用Nginx进行负载均衡和反向代理，这里用的反向代理的原因就是，把请求往localhost:3000代理过去。

7，访问服务器IP，Nuxt的字眼大大地印刷在屏幕上，然后在本地把Nuxt的代码上传到服务器。再重启发布。最后搞定。

 

最后，如果评论有要求，我在把各类代码附出来。还有什么技术栈更好的欢迎交流。下期有机会再更新React的Next.js部署过程。