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

版权声明:本文为原创文章,未经博主允许不得转载,欢迎各种交流,共同进步。 https://blog.csdn.net/sinat_15951543/article/details/80109521

不知道大家在接触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部署过程。

猜你喜欢

转载自blog.csdn.net/sinat_15951543/article/details/80109521