不知道大家在接触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的代码上传到服务器。再重启发布。最后搞定。