<blockquote>前端渲染：<a href="https://segmentfault.com/a/1190000012675012">vue、react等单页面项目应该这样子部署到服务器</a> </blockquote> <p>貌似从前几年，前后端分离逐渐就开始流行起来，把一些渲染计算的工作抛向前端以便减轻服务端的压力，但为啥现在又开始流行在服务端渲染了呢？如vue全家桶或者react全家桶，都推荐通过服务端渲染来实现路由。搞得我们慌得不行，不禁让我想起一句话：<code>从来没有任何一门语言的技术栈像Javascript一样，学习者拼尽全力也不让精通。</code>没办法，流行，咱们就得学！</p> <p>前断时间写了一篇<a href="https://segmentfault.com/a/1190000012675012">vue、react等单页面项目应该这样子部署到服务器</a>，结果反响不错！最近好多朋友私信或邀请问很多关于next.js和nuxt.js的问题，比如<code>关于nextjs 和 nuxtjs如何部署？</code>，<code>pm2如何配合？</code>...在这里我们就一起讨论下在服务器上使用PM2守护next.js、nuxt.js等服务端渲染框架构建的项目！该篇我们只讨论<code>服务端渲染应用部署</code>，<code>静态应用部署</code>就是我前段时间写的<a href="https://segmentfault.com/a/1190000012675012">vue、react等单页面项目应该这样子部署到服务器</a>。</p> <h4>Nginx配置</h4> <p>既然是应用，我们就应该有域名，在这里我们以<code> nginx配置 </code>为例，简单配置如下：<br><strong>Next域名：</strong><a href="http://next.sosout.com/" rel="nofollow noreferrer">http://next.sosout.com/</a> <br><strong>Nuxt域名：</strong><a href="http://nuxt.sosout.com/" rel="nofollow noreferrer">http://nuxt.sosout.com/</a></p>
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;
}
<h4>Nginx反向代理</h4> <p>由于服务端渲染的各个应用端口号各不相同，因此这个时候我们就需要反向代理了，配置如下：</p>
#通过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; #反向代理
}
}
<p><code>服务器的准备工作已完成，接下来我们就分别看看Next.js和Nuxt.js服务端渲染应用如何部署？</code></p> <h4>Next.js服务端渲染应用部署</h4> <p>部署 Next.js 服务端渲染的应用不能直接使用<code> next </code>命令，而应该先进行编译构建，然后再启动 Next 服务，官方通过以下两个命令来完成：</p>
next build
next start
<p>官方推荐的 package.json 配置如下：</p>
{
"name": "my-app",
"dependencies": {
"next": "latest"
},
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
<p>而我更推荐如下配置，稍后你会发现这样和<code> pm2 </code>一起使用更方便，自动化部署也方便:</p>
{
"name": "my-app",
"dependencies": {
"next": "latest"
},
"scripts": {
"dev": "next",
"start": "next start -p $PORT",
"build": "next build && PORT=3001 npm start"
}
}
<p>next.js服务端渲染应用部署这样就完成了，官方先后执行<code> npm run build 、npm start </code>即可完成部署。而我这边只要执行<code> npm run build </code>，其实我只是把两个合并成一个，并设置了端口以便区别其他应用，避免端口占用！</p> <p><strong>接下来简单的说一下next这几个命令：</strong><br><code>next: </code>启动一个热加载的Web服务器（开发模式）<br><code>next build: </code>利用webpack编译应用，压缩JS和CSS资源（发布用）。<br><code>next start: </code>以生成模式启动一个Web服务器 (<code>next build</code> 会先被执行)。</p> <h4>Nuxt.js服务端渲染应用部署</h4> <p><strong>其实部署 Nuxt.js 服务端渲染的应用和<code> Next.js </code>极其相似！在这里我就把代码粘粘贴贴，复复制制，改改写写。。。。</strong><br>Nuxt.js 服务端渲染的应用不能直接使用<code> nuxt </code>命令，而应该先进行编译构建，然后再启动 Nuxt 服务，官方通过以下两个命令来完成：</p>
nuxt build
nuxt start
<p>官方推荐的 package.json 配置如下：</p>
{
"name": "my-app",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}
<p>而我更推荐如下配置，稍后你会发现这样和<code> pm2 </code>一起使用更方便，自动化部署也方便:</p>
{
"name": "my-app",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"start": "PORT=3002 nuxt start",
"build": "nuxt build && npm start"
}
}
<p>nuxt.js服务端渲染应用部署这样就完成了，官方先后执行<code> npm run build 、npm start </code>即可完成部署。而我这边只要执行<code> npm run build </code>，其实我只是把两个合并成一个，并设置了端口以便区别其他应用，避免端口占用！</p> <p><strong>接下来简单的说一下nuxt这几个命令：</strong><br><code>nuxt: </code>启动一个热加载的Web服务器（开发模式）<br><code>nuxt build: </code>利用webpack编译应用，压缩JS和CSS资源（发布用）。<br><code>nuxt start: </code>以生成模式启动一个Web服务器 (<code>nuxt build</code> 会先被执行)。</p> <h4>PM2守护程序</h4> <p><strong>Next.js使用pm2，进入对应的应用目录，执行以下命令：</strong></p>
pm2 start npm --name "my-next" -- run build
<p><strong>Nuxt.js使用pm2，进入对应的应用目录，执行以下命令：</strong></p>
pm2 start npm --name "my-nuxt" -- run build
<p><code>使用pm2时，把两个部署命令合成一个更方便！</code>执行完pm2的启动命令后，我们用<code> pm2 list </code>查看一下进程列表，我截一下我个人服务器的pm2列表：</p>
<p>以后您就可以用pm2进行维护了，比如我们的next应用更改了代码，因为当时创建时给next应用命名的进程名称为<code> my-next </code>，因此我们可以直接使用<code> pm2 reload my-next </code>进行重载。接下来我就简单介绍一下pm2，如果有需要，我可以另写一篇关于pm2的文章！</p> <h4>pm2 简单介绍</h4> <p>pm2是nodejs的一个带有负载均衡功能的应用进程管理器的模块，类似有Supervisor，forever，用来进行进程管理。</p> <h5>一、安装：</h5>
npm install pm2 -g
<h5>二、启动：</h5>
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
<h5>三、查看进程：</h5>
pm2 list
pm2 show 0 或者 # pm2 info 0 #查看进程详细信息，0为PM2进程id
<h5>四、监控：</h5>
pm2 monit
<h5>五、停止：</h5>
pm2 stop all #停止PM2列表中所有的进程
pm2 stop 0 #停止PM2列表中进程为0的进程
<h5>六、重载：</h5>
pm2 reload all #重载PM2列表中所有的进程
pm2 reload 0 #重载PM2列表中进程为0的进程
<h5>七、重启：</h5>
pm2 restart all #重启PM2列表中所有的进程
pm2 restart 0 #重启PM2列表中进程为0的进程
<h5>八、删除PM2进程：</h5>
pm2 delete 0 #删除PM2列表中进程为0的进程
pm2 delete all #删除PM2列表中所有的进程
<h5>九、日志操作：</h5>
pm2 logs [--raw] #Display all processes logs in streaming
pm2 flush #Empty all log file
pm2 reloadLogs #Reload all logs
<h5>十、升级PM2：</h5>
npm install pm2@lastest -g #安装最新的PM2版本
pm2 updatePM2 #升级pm2
<h5>十一、更多命令参数请查看帮助：</h5>
pm2 --help
<h5>十二、PM2目录结构：</h5> <ul><li>1、默认的目录是：当前用于的家目录下的.pm2目录（此目录可以自定义，请参考：十三、自定义启动文件），详细信息如下：</li></ul>
$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
<h5>十三、自定义启动文件：</h5> <ul><li>1、创建一个test.json的示例文件，格式如下：</li></ul>
{
"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
}
}
<ul><li>2、参数说明：</li></ul>
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会自动重载。这里也可以设置你要监控的文件。
<p><code>由于工作原因，一直没光顾segmentfault，收到很多关于部署的私信和评论，特此补充以下内容：</code></p> <h2>部署（以nuxt为例）</h2> <h3>基础模板的部署方式</h3> <p>何为基础模板？使用了<code> vue init nuxt-community/starter-template <project-name> </code>进行搭建的！</p> <h4><strong>第一步，打包</strong></h4> <p>在执行<code> npm run build </code>的时候，<code> nuxt </code>会自动打包。</p> <h4><strong>第二步，选择要部署的文件（社友最关心的步骤）：</strong></h4> <ul> <li> <code> .nuxt/ </code>文件夹</li> <li> <code> package.json </code>文件</li> <li> <code> nuxt.config.js </code>文件(如果你配置proxy等，则需要上传这个文件，建议把它传上去)</li> </ul> <h4><strong>第三步，启动你的nuxt：</strong></h4> <p>使用pm2启动你的nuxt.js：</p> <pre class="brush:shell">$ npm install // or yarn install 如果未安装依赖或依赖有更改 $ pm2 start npm --name "my-nuxt" -- run start ```
原文地址：https://segmentfault.com/a/1190000012774650
来源：oschina
链接：https://my.oschina.net/u/4255371/blog/3750678