前言

内部开发部署

当前开发部署流程中，主要借助git-lab ci + docker compose实现，大致流程如下：

1. 基于dev创建目标功能分支，完成功能实现和本地测试
2. 测试稳定后，提交合并至dev分支，触发dev对应runner，实现开发服务器部署更新
3. dev分支测试通过后，提交合并至test分支，触发test对应runner，实现测试服务器部署更新
4. 测试完成，提交合并至prod分支（或master），触发prod对应runner，实现生产服务器部署更新

Tips: 可通过tag管理不同runner

以上可应对多数场景，但对于以下情形仍有不足：

• 依赖于git-lab，且服务器安装git-lab-runner，简单项目配置较繁琐
• 对于部分陈旧项目，运维部署较繁琐
• 无法在客户服务器安装git-lab-runner，此时手动部署、更新将产生大量重复劳动

之前实过现从零开始 Node实现前端自动化部署，并实现对Docker的支持升级 前端docker自动化部署。但仍存在较多不足。

为何升级

针对上一版本（终端执行版本），存在以下痛点：

• 显示效果差 无法提供良好、直观的展示效果
• 功能高度耦合 没有实现对 服务器、项目、配置等功能的解耦
• 不支持快速修改 无法快速修改、调整项目配置
• 不支持并行处理 无法支持项目的并行部署
• 自由度低 仅对应前端项目，没有提供更高的自由度

新版升级点

• 提供可视化界面，操作便捷
• 支持服务器、执行任务、任务实例的统一管理
• 支持任务实例的快速修改、并行执行、重试、保存
• 支持更加友好的信息展示（如：任务耗时统计、任务状态记录）
• 支持上传文件、文件夹
• 支持自定义本地编译、清理命令
• 支持远端前置命令、后置命令批量顺序执行
• 支持仅执行远端前置命令，用于触发某些自动化脚本

How to use

下载并安装

Download

查看使用帮助

• 点击查看使用帮助

创建任务并执行

• 创建服务器（支持密码、密钥）

• 点击Create Task创建任务（本地编译-->上传文件夹-->编译并启动容器）

• 任务结束后可保存

执行保存的任务实例

• 选择需要的任务点击运行

Just do it

技术选型

鉴于上一版本（终端执行版本）的痛点，提供一个实时交互、直观的用户界面尤为重要。

考虑到SSH连接、文件压缩、上传等操作，需要Node提供支持，而交互场景可通过浏览器环境实现。

因此不妨使用Electron来构建，并实现对跨平台的支持（Windows、Mac OS/ Mac ARM OS）。

程序需持久化保存数据，这里选用nedb数据库实现。

技术栈：Vue + Ant Design Vue + Electron + Node + nedb

功能设计

各模块功能统计如下：

任务执行模块

这里主要整理任务队列的实现思路，对其他功能感兴趣可在评论区进行讨论?。

任务队列实现

任务队列需要支持任务的并行执行、重试、快速修改、删除等功能，且保证各任务执行、相关操作等相互隔离。

考虑维护两个任务队列实现：

• 待执行任务队列 (新创建的任务需要添加至待执行队列)
• 执行中任务队列 (从待执行队列中取出任务，并依次加入执行中任务队列，进行执行任务)

由于待执行任务队列需保证任务添加的先后顺序，且保存的数据为任务执行的相关参数，则Array<object>可满足以上需求。

考虑执行中任务队列需要支持任务添加、删除等操作，且对运行中的任务无强烈顺序要求，这里选用{ taskId: { status, logs ... } ... }数据结构实现。

// 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' } })
  },
}

任务实现

该部分代码较多，相关实现在之前的文章中有描述，这里不在赘述。 可点击task-mixin.js查看源码。

// store/task-mixin.js
const taskMixin = {
  methods: {
    _connectServe () {},
    _runCommand () {},
    _compress () {},
    _uploadFile () {}
    // 省略...
  }
}

任务执行

任务执行流程按照用户选择依次执行：

1. 提示任务执行开始执行，开始任务计时
2. 执行服务器连接
3. 是否存在远端前置命令，存在则依次顺序执行
4. 是否开启任务上传，开启则依次进入5、6、7，否则进进入8
5. 是否存在本地编译命令，存在则执行
6. 根据上传文件类型（文件、文件夹），是否开启备份，上传至发布目录
7. 是否存在本地清理命令，存在则执行
8. 是否存在远端后置命令，存在则依次顺序执行
9. 计时结束，提示任务完成，若该任务为已保存实例，则更新保存的上次执行状态

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（没有信号量返回）