博客迁移nuxt2（五）服务器部署Nuxt应用

Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署 和 静态应用部署。而我们用到的是服务端渲染应用部署，与部署Node服务相似，都将使用pm2来进行管理。

部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令，而应该先进行编译构建，然后再启动 Nuxt 服务，可通过以下两个命令来完成：

nuxt build
nuxt start

需要先执行build命令才能执行start命令。

因为线上需要pm2启动，所以我们编写一个ecosystem.config.js文件

module.exports = {
  apps: [
    {
      // 生产环境
      name: 'blog-nuxt2-prod',
      // 项目启动入口文件
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start',
      // 项目环境变量
      env: {
        NODE_ENV: 'production',
      },
    },
}

将package.json中的命令修改一下

 "scripts": {
    "dev": "cross-env NODE_ENV=dev nuxt",
    "build": "cross-env NODE_ENV=production nuxt build",
    "start": "nuxt start",
    "prd": "pm2 reload ecosystem.config.js",
  },

然后到服务器上在/www目录下把项目clone下来，然后运行命令

npm install
npm run build
npm start

然后可以看到nuxt成功运行，中断运行，运行命令

pm2 start ecosystem.config.js

因为pm2第一次启动进程需要手动，后续的话执行reload命令即可

然后配置nginx，与node服务一样

server {
    listen 80;
    server_name nuxt.xxx.cn; //域名
    access_log /www/log/blog-nuxt/access.log;//日志
    error_log /www/log/blog-nuxt/error.log;
  
    location / {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-Nginx-Proxy true;
      proxy_pass http://127.0.0.1:8888;//反向代理端口 与项目监听的端口一致
      proxy_redirect off;
   }
  }

然后配置Jenkins，也是与node服务一样，只是构建后的操作需要改一下

#!/bin/bash 
cd /var/lib/jenkins/workspace/blog-nuxt2
npm install
npm run build
rm -rf /www/blog-nuxt2
cp -r ./ /www/blog-nuxt2

npm run prd //自己加的命令，执行pm2 reload ecosystem.config.js 重启pm2进程

然后就大功告成啦