教你一招轻松解决前端自动化部署

前言

在项目开发中前端的部署一般是后端同志部署或是运维同志搭建好jenkins平台。
今天来介绍一个小插件deploy-cli-service可以轻松实现前端自动化部署。

实现自动化部署

1. 安装

npm install deploy-cli-service --save-dev

查看版本 (本地安装的需要用npx)

npx deploy-cli-service -v

1657185523586.png

2. 配置文件
根目录下新建一个deploy.config.js文件，如下：

module.exports = {
  projectName: 'vue_samples', // 项目名称
  privateKey: '',
  passphrase: '',
  cluster: [], // 集群部署配置，要同时部署多台配置此属性如: ['dev', 'test', 'prod']
  test: {
    // 环境对象
    name: '测试环境', // 环境名称
    script: 'npm run build:test', // 打包命令
    host: '192.168.0.1', // 服务器地址
    port: 22, // 服务器端口号
    username: 'root', // 服务器登录用户名
    password: '123456', // 服务器登录密码
    distPath: 'dist', // 本地打包生成目录
    webDir: '/usr/local/nginx/html', // 服务器部署路径（不可为空或'/'）
    bakDir: '/usr/local/nginx/backup', // 备份路径 (打包前备份之前部署目录 最终备份路径为 /usr/local/nginx/backup/html.zip)
    isRemoveRemoteFile: true, // 是否删除远程文件（默认true）
    isRemoveLocalFile: true // 是否删除本地文件（默认true）
  },
  prod: {
    // 环境对象
    name: '生产环境', // 环境名称
    script: 'npm run build:prod', // 打包命令
    host: '192.168.0.1', // 服务器地址
    port: 22, // 服务器端口号
    username: 'root', // 服务器登录用户名
    password: '123456', // 服务器登录密码
    distPath: 'dist', // 本地打包生成目录
    webDir: '/usr/local/nginx/html', // 服务器部署路径（不可为空或'/'）
    bakDir: '/usr/local/nginx/backup', // 备份路径 (打包前备份之前部署目录 最终备份路径为 /usr/local/nginx/backup/html.zip)
    isRemoveRemoteFile: true, // 是否删除远程文件（默认true）
    isRemoveLocalFile: true // 是否删除本地文件（默认true）
  }
}

3. 配置部署命令

在package.json中配置启动部署的命令，如下

 "scripts": {
    "deploy:test": "deploy-cli-service deploy --mode test",
    "deploy:prod": "deploy-cli-service deploy --mode prod"
}

4. 开始部署

运行部署命令

npm run deploy:test

1657186051230.png

选择yes，开始部署，部署完成后，如下图

1657186115712.png

就是这么简单，赶快试试吧 ~~~