前言
在项目开发中前端的部署一般是后端同志部署或是运维同志搭建好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
就是这么简单，赶快试试吧 ~~~
