前言

在項(xiàng)目開發(fā)中前端的部署一般是后端同志部署或是運(yùn)維同志搭建好jenkins平臺。
今天來介紹一個小插件deploy-cli-service可以輕松實(shí)現(xiàn)前端自動化部署。

實(shí)現(xiàn)自動化部署

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', // 項(xiàng)目名稱
  privateKey: '',
  passphrase: '',
  cluster: [], // 集群部署配置，要同時部署多臺配置此屬性如: ['dev', 'test', 'prod']
  test: {
    // 環(huán)境對象
    name: '測試環(huán)境', // 環(huán)境名稱
    script: 'npm run build:test', // 打包命令
    host: '192.168.0.1', // 服務(wù)器地址
    port: 22, // 服務(wù)器端口號
    username: 'root', // 服務(wù)器登錄用戶名
    password: '123456', // 服務(wù)器登錄密碼
    distPath: 'dist', // 本地打包生成目錄
    webDir: '/usr/local/nginx/html', // 服務(wù)器部署路徑（不可為空或'/'）
    bakDir: '/usr/local/nginx/backup', // 備份路徑 (打包前備份之前部署目錄 最終備份路徑為 /usr/local/nginx/backup/html.zip)
    isRemoveRemoteFile: true, // 是否刪除遠(yuǎn)程文件（默認(rèn)true）
    isRemoveLocalFile: true // 是否刪除本地文件（默認(rèn)true）
  },
  prod: {
    // 環(huán)境對象
    name: '生產(chǎn)環(huán)境', // 環(huán)境名稱
    script: 'npm run build:prod', // 打包命令
    host: '192.168.0.1', // 服務(wù)器地址
    port: 22, // 服務(wù)器端口號
    username: 'root', // 服務(wù)器登錄用戶名
    password: '123456', // 服務(wù)器登錄密碼
    distPath: 'dist', // 本地打包生成目錄
    webDir: '/usr/local/nginx/html', // 服務(wù)器部署路徑（不可為空或'/'）
    bakDir: '/usr/local/nginx/backup', // 備份路徑 (打包前備份之前部署目錄 最終備份路徑為 /usr/local/nginx/backup/html.zip)
    isRemoveRemoteFile: true, // 是否刪除遠(yuǎn)程文件（默認(rèn)true）
    isRemoveLocalFile: true // 是否刪除本地文件（默認(rèn)true）
  }
}

3. 配置部署命令

在package.json中配置啟動部署的命令，如下

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

4. 開始部署

運(yùn)行部署命令

npm run deploy:test

1657186051230.png

選擇yes，開始部署，部署完成后，如下圖

1657186115712.png

就是這么簡單，趕快試試吧 ~~~