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

柔情只为你懂 2022-05-26 07:37 181阅读 0赞

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

[Nuxt]: https://zh.nuxtjs.org/guide/installation

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关 Docker部署Nginx&&发布前端dist包

1下载镜像选择了稳定版的1.22.0 docker pull nginx:1.22.0 docker images 看一下下

冷不防/ 2024年04月01日 18:47/ 0 赞/ 24 阅读

相关前后端分离项目发布至云服务器--云服务器购买、Vue前端搭建至Nginx、SpringBoot后台部署

文章目录云服务购买、Vue项目部署、SpringBoot项目部署 1. 云服务器购买 1-1. 本次测试使用的是 \\腾讯云\\

朴灿烈づ我的快乐病毒、/ 2024年03月31日 16:22/ 0 赞/ 41 阅读

相关 win10 nginx部署前端项目（静态资源服务器和HTML）

win10 nginx部署前端项目（静态资源服务器和HTML） niginx的安装和启停操作参照博客：[https://blog.csdn.net/qq\_2666694

朱雀/ 2023年01月03日 04:13/ 0 赞/ 190 阅读

相关 vue项目如何部署到nginx服务器

1.[windows下安装nginx请看:Windows下安装Nginx][windows_nginx_Windows_Nginx] 2.[配置完成后，如何设置，nginx开

朱雀/ 2022年12月20日 11:24/ 0 赞/ 235 阅读

相关前端发展史-服务器渲染时代和客户端渲染时代

服务器渲染时代 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

朴灿烈づ我的快乐病毒、/ 2022年12月14日 08:50/ 0 赞/ 180 阅读

相关使用Nginx部署多个前端Vue项目

Nginx部署多个Vue项目前言：第一步：vue项目中的配置第二步：修改Nginx上的配置文件最后：暂停ng

快来打我*/ 2022年10月18日 13:59/ 0 赞/ 319 阅读

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

不知道大家在接触React或者Vue的时候，有没有思考过，这个框架到底是在哪里渲染的？其实现在流行的Ng、React和Vue等前端技术，都是属于浏览器渲染，最初设计的理念是

柔情只为你懂/ 2022年05月26日 07:37/ 0 赞/ 182 阅读

相关 Nginx 部署Vue前端项目

1.Vue前端构建 ➜ npm run build 构建成功后基本会在配置的dist文件下生成静态html文件。 2.生成的静态代码上传到服务器把生成

迈不过友情╰/ 2022年05月21日 06:53/ 0 赞/ 294 阅读

相关 Nginx反向代理&&Node服务器部署发布流程

目录一、生产环境所需要素二、域名三、远程登录服务器 1、windows用户可以下载putty、xshell等工具 2、使用zsh配置登录别名 3、添加用户，不

我不是女神ヾ/ 2022年02月15日 06:27/ 0 赞/ 690 阅读

相关服务器Nginx部署

服务器环境为centos7.5，接下来是详细步骤：安装必要依赖插件 yum install pcre-devel pcre gcc gcc-c++ zlib

Bertha 。/ 2021年09月24日 07:34/ 0 赞/ 405 阅读