前端部署有很多种方式，场景的有Jenkins，pm2，docker等技术，今天主要介绍使用pm2部署，因为公司一直在使用，也一直想彻底的理解部署的流程。

pm2是什么？

PM2 是一个守护进程管理器，将帮助您管理和保持应用程序24在线，好强大呀，牛B！！！

官方文档地址：连接

开始上手

使用要从安装开始yarn global add pm2，现在在项目中有这样一个文件夹app.js代码如下

//https://xxx.com/user/1.html
//https://xxx.com/user/2.html
const express = require('express')
const app = express()
const routerUser = express.Router()
app.use("/user", routerUser)
routerUser.get("/1.html", function (req, res) {
  res.send("1")
})
routerUser.get("/2.html", function (req, res) {
  res.send("2")
})
app.listen(4000)

使用pm2 start app.js启动

页面会显示出应用的信息，说明启动成功，如果不想要了，使用命令进行删除。删除的时候通过名字，在表格中可以查到的。

pm2 delete app

通过上面的命令启动的应用并不会创建集群，并没有进程守护。

通常我们会写个配置文件ecosystem.config.js进行配置。通过命令生成配置文件，文件的名字是固定的，不得更改。

pm2 ecosystem

module.exports = {
  apps : [{
    name: 'API',
    script: 'app.js',

    // Options reference: https://pm2.io/doc/en/runtime/reference/ecosystem-file/
    args: 'one two',
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: '1G',
    env: {
      NODE_ENV: 'development'
    },
    env_production: {
      NODE_ENV: 'production'
    }
  }],

  deploy : {
    production : {
      user : 'node',
      host : '212.83.163.1',
      ref  : 'origin/master',
      repo : 'git@github.com:repo.git',
      path : '/var/www/production',
      'post-deploy' : 'npm install && pm2 reload ecosystem.config.js --env production'
    }
  }
};

pm2 start ecosystem.config.js

部署到服务器上

之前我们都是在本地尝试启动我们的项目，但是开发完成，我们需要部署到测试环境怎么办，那就部署项目了，如果我们的项目是Vue和React写的静态页面，通常在服务器端会启动Nginx作为静态资源访问，把资源放到指定的目录。

如果你没有服务器，建议购买一台服务器，阿里云连接

我们用vue create hello-world创建一个Vue应用，然后是在项目里面使用pm2 ecosystem生成配置文件，我们使用pm2配置文件可以登录到远程服务器，然后执行命令，拉代码和构建等操作，来实现部署。

module.exports = {
  deploy : {
    production : {
      user : 'node', // 以什么身份登录远程服务器，这里是node用户登录，建议使用root用户，权限更大
      host : '192.168.4.142', // 远程服务器地址，需要配ssh登录
      ref  : 'origin/master', // 需要部署的分支
      repo : 'git@github.com:repo.git', // 代码git地址，需要配ssh登录
      path : '/var/www/production', // 文件存放的地址
      'post-deploy' : 'npm install && npm run build' // 拉完代码需要执行的构建命令
    }
  }
};

首先本地的电脑要能通过ssh登录服务器，服务器要能通过ssh登录到Git服务器，这两部操作都完成了，把代码推送到Git服务器，本地代码执行

首次部署执行的命令（只执行一次）
    $ pm2 deploy ecosystem.config.js production setup

之后部署执行的命令
    $ pm2 deploy ecosystem.config.js production

如图片提示的内容表示部署成功了，登录到你的服务器，可以看到我们的文件已经传到服务器了

nginx配置是这样的，路径地址要保持一致，/var/www/production默认的源文件在current或者source里面，打包的目录是dist，所有目录目录要加上/var/www/production/current/dist

代码仓库地址：连接