：应部署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{listen80;server_name*.sosout.com;if($host~*"^(.*?)\.sosout\.com$"){设置$domain$1;}location/{if($domain~*"next"){root/mnt/html/next;}if($domain~*"nuxt"){root/mnt/html/nuxt;}proxy_set_header主机$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;proxy_set_headerX-Forwarded-Proto$scheme;}access_log/mnt/logs/nginx/access.logmain;}#tcp_nopush上；include/etc/nginx/conf.d/*.conf;}Nginx反向代理由于服务器渲染的各个应用的端口号不一样，这时候我们就需要一个反向代理。配置如下：#通过upstreamnodejsNodejs节点可以配置多个设备，做负载均衡#keepalive设置存活时间如果不设置，可能会产生很多timewait#proxy_pass反向代理转发http://nodejsupstreamnodenext{server127.0.0.1:3001;#下一个项目监听端口keepalive64;}server{listen80;server_namenext.sosout.com;位置/{proxy_http_version1.1;proxy_set_header升级$http_upgrade;proxy_set_header连接“升级”；proxy_set_header主机$host;proxy_set_headerX-Nginx-Proxytrue;proxy_cache_bypass$http_upgrade;服务器127.0.0.1:3002；#nuxt项目监听端口keepalive64;}server{listen80;server_namenuxt.sosout.com;位置/{proxy_http_version1.1;proxy_set_header升级$http_upgrade;proxy_set_header连接“升级”；proxy_set_header主机$host;proxy_set_headerX-Nginx-Proxytrue;proxy_cache_bypass$http_upgrade;proxy_passhttp://nodenuxt;#ReverseProxy}}服务端的准备工作已经完成，接下来我们来看下。js和Nuxt.js服务端渲染应用如何部署？Next.js服务端渲染应用部署部署Next.js服务端渲染应用不能直接使用next命令，需要先编译构建，然后启动Next服务。官方使用如下两条命令完成：nextbuildnextstart官方推荐package.json配置如下：{"name":"my-app","dependencies":{"next":"latest"},"scripts":{"dev":"next","build":"nextbuild","start":"nextstart"}}还有我推荐如下配置，后面你会发现这样更方便配合pm2使用，自动部署也方便：{"name":"my-app","dependencies":{"next":"latest"},"scripts":{"dev":"next","start":"nextstart-p$PORT","build":"nextbuild&&PORT=3001npmstart"}}next.js服务端渲染应用部署就这样完成了，官方执行npmrunbuild和npmstart依次完成部署，我这里只需要执行npmrunbuild，其实我只是把两者合二为一，设置端口来区分其他应用，避免端口被占用！接下来简单说一下接下来的命令：next：启动一个热加载的web服务器（开发模式）nextbuild：使用webpack编译应用，压缩JS和CSS资源（发布）。下一次启动：以构建模式启动一个网络服务器（下一次构建将首先执行）。Nuxt.js服务端渲染应用部署其实部署Nuxt.js服务端渲染应用和Next.js非常相似！这里我只是贴代码，复制粘贴，重写重写。...Nuxt.js服务端渲染应用不能直接使用nuxt命令，需要先编译构建，再启动Nuxt服务。官方通过以下两条命令完成：nuxtbuildnuxtstart官方推荐的package.json配置如下：{"name":"my-app","dependencies":{"nuxt":"latest"},"scripts":{"dev":"nuxt","build":"nuxtbuild","start":"nuxtstart"}}还有我推荐如下配置，后面你会发现用起来更方便配合pm2，自动部署也方便：{"name":"my-app","dependencies":{"nuxt":"latest"},"scripts":{"dev":"nuxt","start":"PORT=3002nuxtstart","build":"nuxtbuild&&npmstart"}}nuxt.js服务端渲染应用这样部署就完成了，官方执行npmrunbuild和npm依次启动完成部署。我这边只需要执行npmrunbuild，其实我只是把两者合二为一，设置端口来区分其他应用，避免端口被占用！接下来简单说一下nuxt命令：nuxt：启动一个热加载的web服务器（开发模式）nuxtbuild：使用webpack编译应用，压缩JS和CSS资源（用于发布）。nuxtstart：以构建模式启动Web服务器（nuxt构建将首先执行）。pm2守护进程Next.js使用pm2，进入对应应用目录，执行如下命令：pm2startnpm--name"my-next"--runbuildNuxt.js使用pm2，进入对应应用目录，执行以下命令：pm2startnpm--name"my-nuxt"--runbuild使用pm2时，将两个部署命令合并为一个更方便！执行完pm2启动命令后，我们使用pm2list查看进程列表。我把我个人服务器的pm2列表截图一下：以后维护可以用pm2。比如我们下一个应用的代码就改了，因为在创建的时候下一个应用的进程名是my-next，所以我们可以直接使用pm2reloadmy-next来重新加载。接下来简单介绍一下pm2。如果有必要，我可以再写一篇关于pm2的文章！pm2简介pm2是nodejs的一个具有负载均衡功能的应用进程管理器模块，类似于Supervisor和forever，用于进程管理。1.安装：npminstallpm2-g2.启动：pm2startapp.jspm2startapp.js--namemy-api#my-api为pm2进程名pm2startapp.js-i0#根据CPU核数进程数pm2startapp.js--watch#实时监控app.js启动，当app.js文件变化时，pm2会自动重新加载3.查看进程：pm2listpm2show0or#pm2info0#查看详细进程信息，0为PM2进程id4.监控：pm2monit5.停止：pm2stopall#停止PM2列表中的所有进程pm2stop0#停止PM2中进程为0的进程list6.reload:pm2reloadall#重新加载pm2列表中的所有进程pm2reload0#重新加载pm2列表中进程为0的进程七、restart:pm2restartall#重启pm2列表中的所有进程pm2restart0#restartpm2列表中的进程为08.删除pm2进程：pm2delete0#删除pm2列表中进程为0的进程pm2deleteall#删除pm2列表中的所有进程9.日志操作：pm2logs[--raw]#在streaming中显示所有进程日志pm2flush#清空所有日志文件pm2reloadLogs#重新加载所有日志十、升级pm2：npminstallpm2@lastest-g#安装最新的pm2版本pm2updatePM2#升级pm211.更多命令参数参考帮助：pm2--help12.pm2目录结构：1.默认目录为：currentlyusedhome目录下的.pm2目录（此目录可自定义，请参考：十三、自定义启动文件），具体如下：$HOME/.pm2#将包含所有pm2相关文件$HOME/.pm2/logs#将包含所有应用程序日志$HOME/.pm2/pids#将包含所有应用程序pids$HOME/.pm2/pm2.log#PM2日志$HOME/.pm2/pm2.pid#PM2pid$HOME/.pm2/rpc.sock#远程命令的Socket文件$HOME/.pm2/pub.sock#可发布事件的Socket文件$HOME/.pm2/conf.js#PM2配置十三、自定义启动文件：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.日志”，“pid_file":"./test.pid""watch":false}}2.参数说明：apps：json结构，apps是一个数组，每个数组成员对应一个运行在pm2中的应用程序name：应用程序名称cwd:应用所在目录script:应用的脚本路径exec_interpreter:应用的脚本类型，这里使用的shell，默认是nodejs会认为程序异常退出，此时，它会被触发重启isforkerror_file:自定义应用的错误日志文件out_file:自定义应用的日志文件pid_file:自定义应用的pid文件watch:是否开启监控模式，设置为默认为false是的，当应用发生变化时，pm2会自动重新加载。这里也可以设置你要监控的文件。由于工作原因，我没有光顾segmentfault，收到很多关于部署的私信和评论。特此补充如下内容：部署（以nuxt为例）基础模板的部署什么是基础模板？它是使用vueinitnuxt-community/starter-template
