内部开发部署
当前开发部署流程中，主要借助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，此时手动部署、更新将产生大量重复劳动
之前实过现从零开始 Node实现前端自动化部署，并实现对Docker的支持升级 前端docker自动化部署。但仍存在较多不足。
为何升级
针对上一版本（终端执行版本），存在以下痛点：
- 显示效果差 无法提供良好、直观的展示效果
- 功能高度耦合 没有实现对 服务器、项目、配置等功能的解耦
- 不支持快速修改 无法快速修改、调整项目配置
- 不支持并行处理 无法支持项目的并行部署
- 自由度低 仅对应前端项目，没有提供更高的自由度
新版升级点
- 提供可视化界面，操作便捷
- 支持服务器、执行任务、任务实例的统一管理
- 支持任务实例的快速修改、并行执行、重试、保存
- 支持更加友好的信息展示（如：任务耗时统计、任务状态记录）
- 支持上传文件、文件夹
- 支持自定义本地编译、清理命令
- 支持远端前置命令、后置命令批量顺序执行
- 支持仅执行远端前置命令，用于触发某些自动化脚本
下载并安装
查看使用帮助
- 点击查看使用帮助
创建任务并执行
- 创建服务器（支持密码、密钥）
- 点击Create Task创建任务（本地编译-->上传文件夹-->编译并启动容器）
- 任务结束后可保存
执行保存的任务实例
- 选择需要的任务点击运行
技术选型
鉴于上一版本（终端执行版本）的痛点，提供一个实时交互、直观的用户界面尤为重要。
考虑到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
功能设计
为便于功能解耦，设计实现三个模块：
- 服务器（保存服务器连接信息）
- 任务执行（连接服务器并完成相应命令或操作）
- 任务实例（任务保存为实例，便于再次快速运行）
各模块功能统计如下：
任务执行模块
这里主要整理任务队列的实现思路，对其他功能感兴趣可在评论区进行讨论????。
任务队列实现
任务队列实现应保持逻辑简洁、易扩展的设计思路
任务队列需要支持任务的并行执行、重试、快速修改、删除等功能，且保证各任务执行、相关操作等相互隔离。
考虑维护两个任务队列实现：
- 待执行任务队列 (新创建的任务需要添加至待执行队列)
- 执行中任务队列 (从待执行队列中取出任务，并依次加入执行中任务队列，进行执行任务)
由于待执行任务队列需保证任务添加的先后顺序，且保存的数据为任务执行的相关参数，则Array<object>可满足以上需求。
考虑执行中任务队列需要支持任务添加、删除等操作，且对运行中的任务无强烈顺序要求，这里选用{ taskId: { status, logs ... } ... }数据结构实现。
因数据结构不同，这里分别使用 List、Queue 命名两个任务队列
// store/modules/task.jsconst state = { pendingTaskList: [], executingTaskQueue: {}
}复制代码
Executing Task页面需根据添加至待执行任务队列时间进行顺序显示，这里使用lodash根据对象属性排序后返回数组实现。
// store/task-mixin.jsconst taskMixin = { computed: {
...mapState({ pendingTaskList: state => state.task.pendingTaskList, executingTaskQueue: state => state.task.executingTaskQueue
}),// executingTaskQueue sort by ascexecutingTaskList () { return _.orderBy(this.executingTaskQueue, ['lastExecutedTime'], ['asc'])
}
}
}复制代码
视图无法及时更新
由于执行中任务队列初始状态没有任何属性，则添加新的执行任务时Vue无法立即完成对其视图的响应式更新，这里可参考深入响应式原理，实现对视图响应式更新的控制。
// store/modules/task.jsconst 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.jsconst taskMixin = { methods: {
_connectServe () {},
_runCommand () {},
_compress () {},
_uploadFile () {}// 省略...
}
}复制代码
任务执行
任务执行流程按照用户选择依次执行：
- 提示任务执行开始执行，开始任务计时
- 执行服务器连接
- 是否存在远端前置命令，存在则依次顺序执行
- 是否开启任务上传，开启则依次进入5、6、7，否则进进入8
- 是否存在本地编译命令，存在则执行
- 根据上传文件类型（文件、文件夹），是否开启备份，上传至发布目录
- 是否存在本地清理命令，存在则执行
- 是否存在远端后置命令，存在则依次顺序执行
- 计时结束，提示任务完成，若该任务为已保存实例，则更新保存的上次执行状态
Tip:
- 每个流程完成后，会添加对应反馈信息至任务日志中进行展示
- 某流程发生异常，会中断后续流程执行，并给出对应错误提示
- 任务不会保存任务日志信息，仅保存最后一次执行状态与耗时
// views/home/TaskCenter.vueexport 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 connectawait this._connectServe(ssh, server, taskId)// run post command in preCommandListif (preCommandList && preCommandList instanceof Array) { for (const { path, command } of preCommandList) {if (path && command) await this._runCommand(ssh, command, path, taskId)
}
}// is uploadif (isUpload) { const { projectType, localPreCommand, projectPath, localPostCommand,
releasePath, backup, postCommandList } = task // run local pre command if (localPreCommand) {const { path, command } = localPreCommandif (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 filelocalFile = 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 } = localPostCommandif (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 statusif (task._id) this.editInstanceList({ ...task })// system notificationconst 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 statusif (task._id) this.editInstanceList({ ...task })// system notificationconst myNotification = new Notification('❌Error', { body: `???? ${name} 执行中发生错误，请修改后再次尝试！`})console.log(myNotification)
}
}
}
}复制代码
总结
此次使用electron对终端执行版本的前端自动化部署工具进行了重构，实现了功能更强、更加快捷、自由的跨平台应用。
由于当前没有Mac环境，无法对Mac端应用进行构建、测试，请谅解。欢迎大家对其编译和测试，可通过github构建、测试。
????项目和文档中仍有不足，欢迎指出，一起完善该项目。
????该项目已开源至 github，欢迎下载使用，后续会完善更多功能 ???? 源码及项目说明
喜欢的话别忘记 star 哦????，有疑问????欢迎提出 pr 和 issues ，积极交流。
后续规划待完善
- 备份与共享
- 项目版本及回滚支持
- 跳板机支持
不足
- 因当前远端命令执行，使用非交互式shell，所以使用nohup、&命令会导致该任务持续runing（没有信号量返回）
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
