1. 自动部署

安装

yarn add scp2 chalk ssh2 -D
yarn add npm-run-all -D

1. scp2：上传文件
2. ssh2：运行指令
3. chalk：改变console.log样式
4. 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