1. 自动部署
安装
yarn add scp2 chalk ssh2 -D
yarn add npm-run-all -D
- scp2：上传文件
- ssh2：运行指令
- chalk：改变console.log样式
- npm run all：并行或者顺序执行npm指令 https://www.jianshu.com/p/4ccff715a6a9
在vue项目根目录新建以下文件
├── deploy # 部署相关
├── deploy.dev.mjs # dev服务器部署配置
├── deploy.mjs # 服务器连接
├── deploy.test.mjs # test服务器部署配置
└── notice.mjs # 请求飞书群机器人
deploy.dev.mjs
import deploy from './deploy.mjs'
const server = {
name: '', // 项目名
env: 'dev', // 部署环境
notice: [], // [{openId: 飞书openId,name: 姓名}]
url: '', // 飞书机器人
host: '', // 服务器的IP地址
port: '22', // 服务器端口
username: 'root', // 用户名
password: '', // 密码
path: '/data/dist/', // 项目部署的服务器目标位置
command: '' // 删除命令 rm -rf /var/www/html/*
}
deploy(server)
deploy.mjs
import scpClient from 'scp2'
import chalk from 'chalk'
import ssh2 from 'ssh2'
import sendNotice from './notice.mjs'
var Client = ssh2.Client
var conn = new Client()
export default function (server) {
console.log(chalk.blue('正在部署' + server.env + '...'))
sendNotice(server, 1)
conn
.on('ready', () => {
conn.exec(server.command, (err, stream) => {
if (err) {
throw err
}
stream
.on('close', () => {
scpClient.scp(
'./dist/', // 本地打包文件的位置
{
host: server.host,
port: server.port,
username: server.username,
password: server.password,
path: server.path
},
(err) => {
if (err) {
sendNotice(server, 2)
console.log(chalk.red(server.env + '部署失败!'))
throw err
} else {
sendNotice(server, 3)
console.log(chalk.green(server.env + '部署成功!'))
}
}
)
conn.end()
})
.on('data', (data) => {
console.log('STDOUT: ' + data)
})
.stderr.on('data', (data) => {
console.log('STDERR: ' + data)
})
})
})
.connect({
host: server.host,
port: server.port,
username: server.username,
password: server.password
})
}
package.json
"build": "vue-cli-service build", // 打包
"build:all": "run-s build deploy:all", // 打包并部署dev test
"build:dev": "run-s build deploy:dev", // 打包并部署dev
"build:test": "run-s build deploy:test", // 打包并部署test
"deploy:all": "run-p deploy:dev deploy:test", // 部署dev test
"deploy:dev": "node ./deploy/deploy.dev.mjs", // 部署dev
"deploy:test": "node ./deploy/deploy.test.mjs" // 部署test
2. 飞书群机器人发送部署消息
添加飞书机器人
群设置->群机器人->添加机器人->自定义机器人
image.png
notice.mjs
import axios from 'axios'
// name:项目名称 env:部署环境 notice:通知@
export default function ({ name, env, notice, url }, noticeType) {
var startText = noticeType == 1 ? '开始' : '结束'
var envText = '💻 服务器环境：' + env
var success = noticeType == 2 ? '失败' + ' ❌' : noticeType == 3 ? '成功' + ' ✅' : ''
var successText = noticeType != 1 ? '\n🌟 构建结果：' + success : ''
var timeText = '\n🕐 当前时间：' + new Date().toLocaleString()
var atUser = ''
if (notice && notice.length > 0 && noticeType != 1) {
atUser = '\n👤 提醒：'
notice.forEach((item) => {
atUser = atUser + ' <at user_id = "' + item.openId + '">' + item.name + '</at>'
})
}
var content = envText + successText + atUser + timeText
var stateIcon = noticeType == 2 ? ' 😥' : noticeType == 3 ? ' 😀' : ' 🙏'
// 消息模板
var data = {
msg_type: 'interactive',
card: {
config: {
wide_screen_mode: true,
enable_forward: true
},
elements: [
{
tag: 'hr'
},
{
tag: 'div',
text: {
content: content,
tag: 'lark_md'
}
}
],
header: {
template: 'blue',
title: {
content:
'🔔 ' + name + '前端' + ' - ' + '构建' + startText + '（' + env + '）' + stateIcon,
tag: 'plain_text'
}
}
}
}
// 请求机器人发送消息
axios({
method: 'post',
url: url,
headers: {
'Content-Type': 'application/json'
},
data: data
})
}
群机器人部署通知
image.png
