前言
内部开发部署
当前开发部署流程中，主要借助git-lab ci + docker compose实现，大致流程如下：
- 基于
dev创建目标功能分支，完成功能实现和本地测试 - 测试稳定后，提交合并至
dev分支，触发dev对应runner，实现开发服务器部署更新 -
dev分支测试通过后，提交合并至test分支，触发test对应runner，实现测试服务器部署更新 - 测试完成，提交合并至
prod分支（或master），触发prod对应runner，实现生产服务器部署更新
Tips: 可通过tag管理不同runner
以上可应对多数场景，但对于以下情形仍有不足：
- 依赖于
git-lab，且服务器安装git-lab-runner，简单项目配置较繁琐 - 对于部分陈旧项目，运维部署较繁琐
- 无法在客户服务器安装
git-lab-runner，此时手动部署、更新将产生大量重复劳动
为何升级
针对上一版本（终端执行版本），存在以下痛点：
- 显示效果差 无法提供良好、直观的展示效果
- 功能高度耦合 没有实现对 服务器、项目、配置等功能的解耦
- 不支持快速修改 无法快速修改、调整项目配置
- 不支持并行处理 无法支持项目的并行部署
- 自由度低 仅对应前端项目，没有提供更高的自由度
新版升级点
- 提供可视化界面，操作便捷
- 支持服务器、执行任务、任务实例的统一管理
- 支持任务实例的快速修改、并行执行、重试、保存
- 支持更加友好的信息展示（如：任务耗时统计、任务状态记录）
- 支持上传文件、文件夹
- 支持自定义本地编译、清理命令
- 支持远端前置命令、后置命令批量顺序执行
- 支持仅执行远端前置命令，用于触发某些自动化脚本
How to use
下载并安装
Download
查看使用帮助
- 点击查看使用帮助
image
创建任务并执行
-
创建服务器（支持密码、密钥）
image
- 点击
Create Task创建任务（本地编译-->上传文件夹-->编译并启动容器）
image
-
任务结束后可保存
image
执行保存的任务实例
-
选择需要的任务点击运行
image
Just do it
技术选型
鉴于上一版本（终端执行版本）的痛点，提供一个实时交互、直观的用户界面尤为重要。
考虑到SSH连接、文件压缩、上传等操作，需要Node提供支持，而交互场景可通过浏览器环境实现。
因此不妨使用Electron来构建，并实现对跨平台的支持（Windows、Mac OS/ Mac ARM OS）。
程序需持久化保存数据，这里选用nedb数据库实现。
Embedded persistent or in memory database for Node.js, nw.js, Electron and browsers, 100% JavaScript, no binary dependency. API is a subset of MongoDB's and it's plenty fast.
技术栈：Vue + Ant Design Vue + Electron + Node + nedb
功能设计
为便于功能解耦，设计实现三个模块：
- 服务器（保存服务器连接信息）
- 任务执行（连接服务器并完成相应命令或操作）
- 任务实例（任务保存为实例，便于再次快速运行）
各模块功能统计如下：
image
任务执行模块
这里主要整理任务队列的实现思路，对其他功能感兴趣可在评论区进行讨论。
任务队列实现
任务队列实现应保持逻辑简洁、易扩展的设计思路
任务队列需要支持任务的并行执行、重试、快速修改、删除等功能，且保证各任务执行、相关操作等相互隔离。
考虑维护两个任务队列实现：
-
待执行任务队列(新创建的任务需要添加至待执行队列) -
执行中任务队列(从待执行队列中取出任务，并依次加入执行中任务队列，进行执行任务)
由于待执行任务队列需保证任务添加的先后顺序，且保存的数据为任务执行的相关参数，则Array可满足以上需求。
考虑执行中任务队列需要支持任务添加、删除等操作，且对运行中的任务无强烈顺序要求，这里选用{ taskId: { status, logs ... } ... }数据结构实现。
因数据结构不同，这里分别使用 List、Queue 命名两个任务队列
// store/modules/task.js
const state = {
pendingTaskList: [],
executingTaskQueue: {}
}
Executing Task页面需根据添加至待执行任务队列时间进行顺序显示，这里使用lodash根据对象属性排序后返回数组实现。
// store/task-mixin.js
const taskMixin = {
computed: {
...mapState({
pendingTaskList: state => state.task.pendingTaskList,
executingTaskQueue: state => state.task.executingTaskQueue
}),
// executingTaskQueue sort by asc
executingTaskList () {
return _.orderBy(this.executingTaskQueue, ['lastExecutedTime'], ['asc'])
}
}
}
视图无法及时更新
由于执行中任务队列初始状态没有任何属性，则添加新的执行任务时Vue无法立即完成对其视图的响应式更新，这里可参考深入响应式原理，实现对视图响应式更新的控制。
// store/modules/task.js
const mutations = {
ADD_EXECUTING_TASK_QUEUE (state, { taskId, task }) {
state.executingTaskQueue = Object.assign({}, state.executingTaskQueue,
{ [taskId]: { ...task, status: 'running' } })
},
}
任务实现
为区分mixin中函数及后续功能维护便捷，mixin中函数均添加_前缀
该部分代码较多，相关实现在之前的文章中有描述，这里不在赘述。
可点击task-mixin.js查看源码。
// store/task-mixin.js
const taskMixin = {
methods: {
_connectServe () {},
_runCommand () {},
_compress () {},
_uploadFile () {}
// 省略...
}
}
任务执行
任务执行流程按照用户选择依次执行：
- 提示任务执行开始执行，开始任务计时
- 执行服务器连接
- 是否存在远端前置命令，存在则依次顺序执行
- 是否开启任务上传，开启则依次进入5、6、7，否则进进入8
- 是否存在本地编译命令，存在则执行
- 根据上传文件类型（文件、文件夹），是否开启备份，上传至发布目录
- 是否存在本地清理命令，存在则执行
- 是否存在远端后置命令，存在则依次顺序执行
- 计时结束，提示任务完成，若该任务为已保存实例，则更新保存的上次执行状态
Tip:
- 每个流程完成后，会添加对应反馈信息至任务日志中进行展示
- 某流程发生异常，会中断后续流程执行，并给出对应错误提示
- 任务不会保存任务日志信息，仅保存最后一次执行状态与耗时
// views/home/TaskCenter.vue
export default {
watch: {
pendingTaskList: {
handler (newVal, oldVal) {
if (newVal.length > 0) {
const task = JSON.parse(JSON.stringify(newVal[0]))
const taskId = uuidv4().replace(/-/g, '')
this._addExecutingTaskQueue(taskId, { ...task, taskId })
this.handleTask(taskId, task)
this._popPendingTaskList()
}
},
immediate: true
}
},
methods: {
// 处理任务
async handleTask (taskId, task) {
const { name, server, preCommandList, isUpload } = task
const startTime = new Date().getTime() // 计时开始
let endTime = 0 // 计时结束
this._addTaskLogByTaskId(taskId, '⚡开始执行任务...', 'primary')
try {
const ssh = new NodeSSH()
// ssh connect
await this._connectServe(ssh, server, taskId)
// run post command in preCommandList
if (preCommandList && preCommandList instanceof Array) {
for (const { path, command } of preCommandList) {
if (path && command) await this._runCommand(ssh, command, path, taskId)
}
}
// is upload
if (isUpload) {
const { projectType, localPreCommand, projectPath, localPostCommand,
releasePath, backup, postCommandList } = task
// run local pre command
if (localPreCommand) {
const { path, command } = localPreCommand
if (path && command) await this._runLocalCommand(command, path, taskId)
}
let deployDir = '' // 部署目录
let releaseDir = '' // 发布目录或文件
let localFile = '' // 待上传文件
if (projectType === 'dir') {
deployDir = releasePath.replace(new RegExp(/([/][^/]+)$/), '') || '/'
releaseDir = releasePath.match(new RegExp(/([^/]+)$/))[1]
// compress dir and upload file
localFile = join(remote.app.getPath('userData'), '/' + 'dist.zip')
if (projectPath) {
await this._compress(projectPath, localFile, [], 'dist/', taskId)
}
} else {
deployDir = releasePath
releaseDir = projectPath.match(new RegExp(/([^/]+)$/))[1]
localFile = projectPath
}
// backup check
let checkFileType = projectType === 'dir' ? '-d' : '-f' // check file type
if (backup) {
this._addTaskLogByTaskId(taskId, '已开启远端备份', 'success')
await this._runCommand(ssh,
`
if [ ${checkFileType} ${releaseDir} ];
then mv ${releaseDir} ${releaseDir}_${dayjs().format('YYYY-MM-DD_HH:mm:ss')}
fi
`, deployDir, taskId)
} else {
this._addTaskLogByTaskId(taskId, '提醒：未开启远端备份', 'warning')
await this._runCommand(ssh,
`
if [ ${checkFileType} ${releaseDir} ];
then mv ${releaseDir} /tmp/${releaseDir}_${dayjs().format('YYYY-MM-DD_HH:mm:ss')}
fi
`, deployDir, taskId)
}
// upload file or dir (dir support unzip and clear)
if (projectType === 'dir') {
await this._uploadFile(ssh, localFile, deployDir + '/dist.zip', taskId)
await this._runCommand(ssh, 'unzip dist.zip', deployDir, taskId)
await this._runCommand(ssh, 'mv dist ' + releaseDir, deployDir, taskId)
await this._runCommand(ssh, 'rm -f dist.zip', deployDir, taskId)
} else {
await this._uploadFile(ssh, localFile, deployDir + '/' + releaseDir, taskId)
}
// run local post command
if (localPostCommand) {
const { path, command } = localPostCommand
if (path && command) await this._runLocalCommand(command, path, taskId)
}
// run post command in postCommandList
if (postCommandList && postCommandList instanceof Array) {
for (const { path, command } of postCommandList) {
if (path && command) await this._runCommand(ssh, command, path, taskId)
}
}
}
this._addTaskLogByTaskId(taskId, `恭喜，所有任务已执行完成，${name} 执行成功！`, 'success')
// 计时结束
endTime = new Date().getTime()
const costTime = ((endTime - startTime) / 1000).toFixed(2)
this._addTaskLogByTaskId(taskId, `总计耗时 ${costTime}s`, 'primary')
this._changeTaskStatusAndCostTimeByTaskId(taskId, 'passed', costTime)
// if task in deploy instance list finshed then update status
if (task._id) this.editInstanceList({ ...task })
// system notification
const myNotification = new Notification('✔ Success', {
body: `恭喜，所有任务已执行完成，${name} 执行成功！`
})
console.log(myNotification)
} catch (error) {
this._addTaskLogByTaskId(taskId, `❌ ${name} 执行中发生错误，请修改后再次尝试！`, 'error')
// 计时结束
endTime = new Date().getTime()
const costTime = ((endTime - startTime) / 1000).toFixed(2)
this._addTaskLogByTaskId(taskId, `总计耗时 ${costTime}s`, 'primary')
this._changeTaskStatusAndCostTimeByTaskId(taskId, 'failed', costTime)
console.log(error)
// if task in deploy instance list finshed then update status
if (task._id) this.editInstanceList({ ...task })
// system notification
const myNotification = new Notification('❌Error', {
body: ` ${name} 执行中发生错误，请修改后再次尝试！`
})
console.log(myNotification)
}
}
}
}
总结
此次使用electron对终端执行版本的前端自动化部署工具进行了重构，实现了功能更强、更加快捷、自由的跨平台应用。
由于当前没有Mac环境，无法对Mac端应用进行构建、测试，请谅解。欢迎大家对其编译和测试，可通过github构建、测试。
项目和文档中仍有不足，欢迎指出，一起完善该项目。
该项目已开源至 github，欢迎下载使用，后续会完善更多功能 源码及项目说明
喜欢的话别忘记 star 哦，有疑问欢迎提出 pr 和 issues ，积极交流。
后续规划
待完善
- 备份与共享
- 项目版本及回滚支持
- 跳板机支持
不足
- 因当前远端命令执行，使用非交互式shell，所以使用
nohup、&命令会导致该任务持续runing（没有信号量返回）