前言
在項目開發(fā)中前端的部署一般是后端同志部署或是運維同志搭建好jenkins平臺舌菜。
今天來介紹一個小插件deploy-cli-service可以輕松實現(xiàn)前端自動化部署船侧。
實現(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', // 項目名稱
privateKey: '',
passphrase: '',
cluster: [], // 集群部署配置拙吉，要同時部署多臺配置此屬性如: ['dev', 'test', 'prod']
test: {
// 環(huán)境對象
name: '測試環(huán)境', // 環(huán)境名稱
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: {
// 環(huán)境對象
name: '生產環(huán)境', // 環(huán)境名稱
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
就是這么簡單逝变，趕快試試吧 ~~~
