如何使用pm2部署前端项目

前端部署有很多种方式,场景的有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
在这里插入图片描述
代码仓库地址:连接

相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页