nuxt项目部署

nuxt项目部署

一、前言

• 本篇教程涉及以下几个部分
  • cnpm
    • 下载nuxt的依赖，使用npm的话，如果package.json过大，有时候会出现超时失败的情况
  • nuxt
    • Vue项目的ssr框架
  • pm2
    • 后台运行的工具。类似nohup。

二、下载

• 下载依赖

  • npm

  npm install cnpm -g
  // 创建软连接
  ln -s (npm的绝对路径)  /usr/local/bin/
  (示例：ln -s /usr/local/nodejs/bin/npm /usr/local/bin/)
  

  • pm2

  npm install pm2 -g
  // 创建软连接
  ln -s (npm的绝对路径)  /usr/local/bin/
  (示例：ln -s /usr/local/nodejs/bin/pm2 /usr/local/bin/)
  

三、服务器部署

• 对nuxt项目运行npm run build
• 如下，复制红色箭头的几个文件到一个新的文件夹中。

• 在新文件夹中创建ecosystem.config.js

module.exports = {
  apps: [
    {
      name: 'xxxxxxxxxxx', // 这个name就是pm2启动时需要的name
      exec_mode: 'cluster',
      instances: '1', // Or a number of instances
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start'
    }
  ]
}

• 这时候文件夹中有以下文件

  • .nuxt
  • static
  • nuxt.config.js
  • package.json
  • ecosystem.config.js

• 上传到服务器，执行cnpm installl，文件夹中会生成node_modules

• 运行pm2 start

• 服务运行成功，以后台的方式跑在对应的端口上，后续使用nginx转发端口即可

• # nginx 转发
  location /{
  	proxy_pass  http://localhost:3000/
  }