Nuxt.js项目部署——nuxt+node+pm2+nginx

1、安装nuxt.js

npm安装或npx（npx 在 NPM 版本 5.2.0 默认安装了，npm安装node.js默认安装了）

$ npn create-nuxt-app <项目名>

 或者用 yarn ：

$ yarn create nuxt-app <项目名>

细节可以参考官方文档 Nuxt.js 中文网 

2、部署（重点）

nuxt.js部署方式根据官方有分服务端渲染部署、静态部署、单页面部署；

本次主要讲的是服务端渲染部署（静态部署没搞明白，单页面部署跟vue一样） 

 （1）服务器环境配置

a、安装node.js(根据服务器环境选择安装包) 下载 | Node.js 中文网

b、安装nginx（这个可以自行百度安装方式）nginx: download （Stable version 是稳定版，一般选择这个下载，mac下载可以直接用brew安装）

c、全局安装pm2

npm install -g pm2 或 yarn install -g pm2

（2）项目打包

npm run build

打包完成后将 .nuxt static nuxt.config.js package.json 放到服务器中（放哪里自己定，方便自己访问就行了） 

（3）在服务器中进入到项目

cd 项目文件夹

初始化项目安装依赖包（个人觉得使用yarn会比npm快）

npm install 或 yarn install 

运行项目（查看是否正常运行，如果正常，就下一步开启pm2守护，如果不正常，查看错误原因并解决，我运行的时候是没有错的，所以暂时还不知道会出现什么错误）

npm start

 （4）开启pm2（这个是重点，因为正常npm start的话窗口是不能关的，开启pm2的话就可以关闭窗口在后台运行）

这里我踩了个很大的坑，我本地mac环境部署的话是可以直接用命令 pm2 start npm -- run start 来启动，但是到了服务器上就不行，查了很多资料，都没搞明白什么回事，后面了解到 pm2 satrt 是执行路径./node_modules/nuxt/bin/nuxt.js，所以就有如下启动方式

pm2 start ./node_modules/nuxt/bin/nuxt.js -- start

还有一种就是配置ecosystem.config.js启动配置（在项目根目录上新建 ecosystem.config.js，然后配置如下）

// ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      exec_mode: 'cluster',//零停机部署就是使用 PM2 的 cluster模式
      instances: 'max', // Or a number of instances
      script: './node_modules/nuxt/bin/nuxt.js',//nuxt start的执行路径
      args: 'start',
    },
  ],
}

配置好直接启动 ecosystem.config.js

pm2 start ecosystem.config.js

 查看进程看看当前进程是否正常

pm2 list

更新程序的时候用 pm2 reload [appName]或者直接使用watch监听（--watch：监听应用目录的变化，一旦发生变化，自动重启。如果要精确监听、不监听的目录，最好通过配置文件,具体配置文件还在研究当中）

pm2 start NuxtAPPName --watch

重启 停止

pm2 restart NuxtAPPName 

pm2 stop NuxtAPPName

（4）配置nginx反向代理

nginx安装好打开文件nginx.conf进行配置

upstream nodenuxt {
    server 127.0.0.1:3000; #nuxt项目 监听端口
    keepalive 64;
}
server {
    listen 80;
    server_name yoursite.com;    
     location / {
            root   html;
            index  index.html index.htm;
            proxy_pass  http://nodenuxt; 
    }
}

保存配置启动nginx这样子就可以用yoursite.com访问你的nuxt项目了

这样子整个nuxt.js项目就部署完成了。

附上nginx多端口反向代理

server {
    listen       80;
    server_name  yoursite.com;
    location /a {
        proxy_pass http://127.0.0.1:8001/;
    }
    location /b {
        proxy_pass http://127.0.0.1:8002/;
    }
    location /c {
        proxy_pass http://127.0.0.1:8003/;
    }
}

按上面的配置，输入 yoursite.com/a 的确看到成功代理了 ip:8001 的应用，/b就是8082
 

pm2常用命令

#启动单个应用
pm2 start app.js 或pm2 start ./node_modules/nuxt/bin/nuxt.js
#重启应用
pm2 reload appName
# 查看当前正在运行的进程
pm2 list
# 启动所有应用
pm2 start id|name|all
# 重启所有应用
pm2 restart id|name|all
# 停止所有的应用程序
pm2 stop id|name|all
# 关闭并删除所有应用
pm2 delete id|name|all
# 控制台显示所有日志
pm2 logs
# 控制台显示指定编号的日志
pm2 logs id
# 查看信息
pm2 show id|name
# 显示每个应用程序的CPU和内存占用情况
pm2 monit