85
前端渲染:vue、react等单页面项目应该这样子部署到服务器

貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如vue全家桶或者react全家桶,都推荐通过服务端渲染来实现路由。搞得我们慌得不行,不禁让我想起一句话:从来没有任何一门语言的技术栈像Javascript一样,学习者拼尽全力也不让精通。没办法,流行,咱们就得学!

前断时间写了一篇vue、react等单页面项目应该这样子部署到服务器,结果反响不错!最近好多朋友私信或邀请问很多关于next.js和nuxt.js的问题,比如关于nextjs 和 nuxtjs如何部署?pm2如何配合?...在这里我们就一起讨论下在服务器上使用PM2守护next.js、nuxt.js等服务端渲染框架构建的项目!该篇我们只讨论服务端渲染应用部署静态应用部署就是我前段时间写的vue、react等单页面项目应该这样子部署到服务器

Nginx配置

既然是应用,我们就应该有域名,在这里我们以 nginx配置 为例,简单配置如下:
Next域名:http://next.sosout.com/
Nuxt域名:http://nuxt.sosout.com/

http {
    ....  # 省略其他配置
   
    server {
        listen 80;
        server_name  *.sosout.com;
        
        if ($host ~* "^(.*?)\.sosout\.com$") {
            set $domain $1;
        }

        location / {
            if ($domain ~* "next") {
                root /mnt/html/next;
            }
            if ($domain ~* "nuxt") {
                root /mnt/html/nuxt;
            }
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Proto  $scheme;
        }
        access_log  /mnt/logs/nginx/access.log  main;
    }

    #tcp_nopush     on;

    include /etc/nginx/conf.d/*.conf;
}

Nginx反向代理

由于服务端渲染的各个应用端口号各不相同,因此这个时候我们就需要反向代理了,配置如下:

#通过upstream nodejs 可以配置多台nodejs节点,做负载均衡
#keepalive 设置存活时间。如果不设置可能会产生大量的timewait
#proxy_pass 反向代理转发 http://nodejs

upstream nodenext {
    server 127.0.0.1:3001; #next项目 监听端口
    keepalive 64;
}

server {
    listen 80;
    server_name next.sosout.com;
    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;  
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_cache_bypass $http_upgrade;
        proxy_pass http://nodenext; #反向代理
    }
}

upstream nodenuxt {
    server 127.0.0.1:3002; #nuxt项目 监听端口
    keepalive 64;
}

server {
    listen 80;
    server_name nuxt.sosout.com;
    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;  
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_cache_bypass $http_upgrade;
        proxy_pass http://nodenuxt; #反向代理
    }
}

服务器的准备工作已完成,接下来我们就分别看看Next.js和Nuxt.js服务端渲染应用如何部署?

Next.js服务端渲染应用部署

部署 Next.js 服务端渲染的应用不能直接使用 next 命令,而应该先进行编译构建,然后再启动 Next 服务,官方通过以下两个命令来完成:

next build
next start

官方推荐的 package.json 配置如下:

{
  "name": "my-app",
  "dependencies": {
    "next": "latest"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

而我更推荐如下配置,稍后你会发现这样和 pm2 一起使用更方便,自动化部署也方便:

{
  "name": "my-app",
  "dependencies": {
    "next": "latest"
  },
  "scripts": {
    "dev": "next",
    "start": "next start -p $PORT",
    "build": "next build && PORT=3001 npm start"
  }
}

next.js服务端渲染应用部署这样就完成了,官方先后执行 npm run build 、npm start 即可完成部署。而我这边只要执行 npm run build ,其实我只是把两个合并成一个,并设置了端口以便区别其他应用,避免端口占用!

接下来简单的说一下next这几个命令:
next: 启动一个热加载的Web服务器(开发模式)
next build: 利用webpack编译应用,压缩JS和CSS资源(发布用)。
next start: 以生成模式启动一个Web服务器 (next build 会先被执行)。

Nuxt.js服务端渲染应用部署

其实部署 Nuxt.js 服务端渲染的应用和 Next.js 极其相似!在这里我就把代码粘粘贴贴,复复制制,改改写写。。。。
Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务,官方通过以下两个命令来完成:

nuxt build
nuxt start

官方推荐的 package.json 配置如下:

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

而我更推荐如下配置,稍后你会发现这样和 pm2 一起使用更方便,自动化部署也方便:

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "start": "PORT=3002 nuxt start",
    "build": "nuxt build && npm start"
  }
}

nuxt.js服务端渲染应用部署这样就完成了,官方先后执行 npm run build 、npm start 即可完成部署。而我这边只要执行 npm run build ,其实我只是把两个合并成一个,并设置了端口以便区别其他应用,避免端口占用!

接下来简单的说一下nuxt这几个命令:
nuxt: 启动一个热加载的Web服务器(开发模式)
nuxt build: 利用webpack编译应用,压缩JS和CSS资源(发布用)。
nuxt start: 以生成模式启动一个Web服务器 (nuxt build 会先被执行)。

PM2守护程序

Next.js使用pm2,进入对应的应用目录,执行以下命令:

pm2 start npm --name "my-next" -- run build

Nuxt.js使用pm2,进入对应的应用目录,执行以下命令:

pm2 start npm --name "my-nuxt" -- run build

使用pm2时,把两个部署命令合成一个更方便!执行完pm2的启动命令后,我们用 pm2 list 查看一下进程列表,我截一下我个人服务器的pm2列表:

clipboard.png

以后您就可以用pm2进行维护了,比如我们的next应用更改了代码,因为当时创建时给next应用命名的进程名称为 my-next ,因此我们可以直接使用 pm2 reload my-next 进行重载。接下来我就简单介绍一下pm2,如果有需要,我可以另写一篇关于pm2的文章!

pm2 简单介绍

pm2是nodejs的一个带有负载均衡功能的应用进程管理器的模块,类似有Supervisor,forever,用来进行进程管理。

一、安装:
npm install pm2 -g
二、启动:
pm2 start app.js
pm2 start app.js --name my-api       #my-api为PM2进程名称
pm2 start app.js -i 0                #根据CPU核数启动进程个数
pm2 start app.js --watch             #实时监控app.js的方式启动,当app.js文件有变动时,pm2会自动reload
三、查看进程:
pm2 list
pm2 show 0 或者 # pm2 info 0         #查看进程详细信息,0为PM2进程id 
四、监控:
pm2 monit
五、停止:
pm2 stop all                         #停止PM2列表中所有的进程
pm2 stop 0                           #停止PM2列表中进程为0的进程
六、重载:
pm2 reload all                       #重载PM2列表中所有的进程
pm2 reload 0                         #重载PM2列表中进程为0的进程
七、重启:
pm2 restart all                      #重启PM2列表中所有的进程
pm2 restart 0                        #重启PM2列表中进程为0的进程
八、删除PM2进程:
pm2 delete 0                         #删除PM2列表中进程为0的进程
pm2 delete all                       #删除PM2列表中所有的进程
九、日志操作:
pm2 logs [--raw]                     #Display all processes logs in streaming
pm2 flush                            #Empty all log file
pm2 reloadLogs                       #Reload all logs
十、升级PM2:
npm install pm2@lastest -g           #安装最新的PM2版本
pm2 updatePM2                        #升级pm2
十一、更多命令参数请查看帮助:
pm2 --help
十二、PM2目录结构:
  • 1、默认的目录是:当前用于的家目录下的.pm2目录(此目录可以自定义,请参考:十三、自定义启动文件),详细信息如下:
$HOME/.pm2                   #will contain all PM2 related files
$HOME/.pm2/logs              #will contain all applications logs
$HOME/.pm2/pids              #will contain all applications pids
$HOME/.pm2/pm2.log           #PM2 logs
$HOME/.pm2/pm2.pid           #PM2 pid
$HOME/.pm2/rpc.sock          #Socket file for remote commands
$HOME/.pm2/pub.sock          #Socket file for publishable events
$HOME/.pm2/conf.js           #PM2 Configuration
十三、自定义启动文件:
  • 1、创建一个test.json的示例文件,格式如下:
{
  "apps":
    {
      "name": "test",
      "cwd": "/data/wwwroot/nodejs",
      "script": "./test.sh",
      "exec_interpreter": "bash",
      "min_uptime": "60s",
      "max_restarts": 30,
      "exec_mode" : "cluster_mode",
      "error_file" : "./test-err.log",
      "out_file": "./test-out.log",
      "pid_file": "./test.pid"
      "watch": false
    }
}
  • 2、参数说明:
apps:json结构,apps是一个数组,每一个数组成员就是对应一个pm2中运行的应用
name:应用程序的名称
cwd:应用程序所在的目录
script:应用程序的脚本路径
exec_interpreter:应用程序的脚本类型,这里使用的shell,默认是nodejs
min_uptime:最小运行时间,这里设置的是60s即如果应用程序在60s内退出,pm2会认为程序异常退出,此时触发重启max_restarts设置数量
max_restarts:设置应用程序异常退出重启的次数,默认15次(从0开始计数)
exec_mode:应用程序启动模式,这里设置的是cluster_mode(集群),默认是fork
error_file:自定义应用程序的错误日志文件
out_file:自定义应用程序日志文件
pid_file:自定义应用程序的pid文件
watch:是否启用监控模式,默认是false。如果设置成true,当应用程序变动时,pm2会自动重载。这里也可以设置你要监控的文件。

由于工作原因,一直没光顾segmentfault,收到很多关于部署的私信和评论,特此补充以下内容:

部署(以nuxt为例)

基础模板的部署方式

何为基础模板?使用了 vue init nuxt-community/starter-template <project-name> 进行搭建的!

第一步,打包

在执行 npm run build 的时候, nuxt 会自动打包。

第二步,选择要部署的文件(社友最关心的步骤):

  • .nuxt/ 文件夹
  • package.json 文件
  • nuxt.config.js 文件(如果你配置proxy等,则需要上传这个文件,建议把它传上去)

第三步,启动你的nuxt:

使用pm2启动你的nuxt.js:

$ npm install // or yarn install 如果未安装依赖或依赖有更改
$ pm2 start npm --name "my-nuxt" -- run start

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

39 条评论
熊二 · 1月10日

很棒,赞一个!

回复

梦婷 · 1月10日

写的很棒,赞一个?

回复

conanskyforce · 3月12日

有没发现 子路由刷新就404了

回复

0

npm run generate 子路由刷新就404了,遇到同样的问题,怎么解决的啊??

EasonShen1989 · 4月17日
abbenyyyyyy · 3月29日

好像并没有说明白为什么要反向代理,#反向代理http://nodenext是后端域名

回复

0
一探 作者 · 4月18日
EasonShen1989 · 4月17日

npm run generate 子路由刷新就404了,遇到同样的问题,怎么解决的啊???

回复

0

反向代理

一探 作者 · 4月17日
0

cdn没办法反向代理啊

EasonShen1989 · 4月17日
0

CDN是现在一种网络加速的解决方案,反向代理是将用户的请求转发给后端服务器,CDN用到了反向代理的技术,不是相同的概念。

一探 作者 · 4月18日
也非 · 4月17日

您好,我现在想在本地build好之后,打包发布到服务器上面(因为服务器不能连外网),但是现在build start 执行完之后,不知道要copy哪些文件发布到服务器,请指点下,谢谢。

回复

0

我的目的不是想把node_modules那个100多M的目录一起发布到生产环境,这么大一个包会被java端的同事笑话的。

也非 · 4月18日
0

静态部署只需部署build好的文件,服务端部署最好将传递上去,通过相关命令生成,或者写一个shell脚本也可以

一探 作者 · 4月18日
0

@FullBook 是需要ssr部署,如果是在服务器端用命令生成(况且服务器还不能连外网),就不是部署的本意了。

也非 · 4月18日
KIGENASI · 4月24日

pm2 start npm --name "my-nuxt" -- run build 状态已经是online 但是浏览器输入url访问不了

回复

0

看看是不是nginx或服务器缓存导致的?

一探 作者 · 4月24日
0

pm2 start npm --name “xxxxxx” -- run start

不下100不改名 · 9月11日
0

我这也不可以,会显示online,但是执行pm2 list之后状态变为error的状态

刀洒温柔 · 11月8日
NsZbf · 5月29日

6666太6了

回复

彼岸花开 · 6月7日

这个需要将哪些文件上传到服务器啊 ?

回复

0

难道还需要将node_module也上传上去吗 ?

彼岸花开 · 6月7日
曾威 · 6月9日

楼主还是没解释清楚打包要扔啥到服务器,难道node_module也扔?那还不如在服务器上做开发呢

回复

0

一般是服务器上执行一个npm/yarn install

YuanWing · 6月22日
0

我把.nuxt文件夹 + static文件夹 + package.json + nuxt.config.js 传上去,然后在服务器上npm install --production下载服务端的依赖.. .nuxt文件夹里有编译过后的项目文件,static里有不需要编译的项目文件,试了下可以用,但是依赖在129M左右,不知道大家有没有更好的方法

Joean · 8月7日
Bohnens · 6月26日

使用 npm run generate,静态化之后,部署到cdn怎么操作?步骤是什么?

回复

AoleiC · 7月20日

这个不像SPA那样可以直接copy dist目录下的文件的去部署。试了很多方式读了一下源码还是看不懂,哈哈
放弃了。这个倒可以参考参考,Node服务一键离线部署: https://www.cnblogs.com/chyin...

回复

Janly · 7月25日

run dev 没有错 但是build 后 start 就各种报错,我都快疯了

回复

师宁丶 · 8月9日

谢谢大佬相助~稳了~

回复

五百块 · 8月11日

这样打包发布页面刷新以后会404,得增加服务端server.js模块

回复

Sando · 8月24日

我在服务器上pm2部署了一个PC端一个移动端的项目,但是只能访问第一个部署的,不知道这个什么原因怎么解决?

回复

0

是不是端口被占用了!

一探 作者 · 8月24日
yuartian · 9月3日

为啥npm run build 报错 Error: Couldn't find a pages directory in /data/nuxt. Please create one under the project root啊..........

回复

yuartian · 9月4日

请问是不是还要把其他的文件夹一起传上去啊???

回复

人生多磨难呐 · 9月5日

请问一下,我按照题主得文档最后一步用pm2 启动得时候 进程启动不了,status一直是stopped

回复

0

我的也是这样的,你那解决了吗?

刀洒温柔 · 11月8日
WusonWeb · 10月26日

你好,nuxt.js服务器渲染部署不是前后端分离的吗? 还是说前后端分离,我只需要在本地编译后将.nuxt/ 文件夹
package.json 文件,nuxt.config.js ,部署到nginx指定的文件夹就可以了

回复

载入中...