GitHub Action + Release：打造 Electron 持续交付系统

发表于 分类于 ， 阅读次数： 本文字数： 1.6k 阅读时长 ≈ 6 分钟
Github Action 实例：本文中主要是想给大家讲清楚 Github Action 中每一步的作用，所以比较详细。

演示项目使用 https://github.com/nklayman/vue-cli-plugin-electron-builder 作为 electron 的手脚架，演示项目由我手动添加了 windows 的打包命令在 npm 中，如下图所示

创建 Workflow 配置文件

在项目根目录中创建 .github/workflow/main.yml 文件：

为 Workflow 添加名称

# main.yml

# Workflow's name
name: Build Electron App For Win/Mac

为 Workflow 添加触发器

# main.yml

# Workflow's name
name: Build Electron App For Win/Mac

# Workflow's trigger
on:
  push:
    tags:
      - 'v*.*.*'

我们知道，我们可以在本地仓库为最新的 commit 打上标签：git tag v0.1.0 然后再将本地仓库（尚未推送到远程）的全部标签推送到远程仓库：git push origin --tags 我们上面添加的触发器，就是表示当接收到新的标签推送时，且标签名为「v*.*.」时，就执行 Workflow。

创建一个 job 并定义它的名字

# main.yml

# Workflow's name
name: Build Electron App For Win/Mac

# Workflow's trigger
on:
  push:
    tags:
      - 'v*.*.*'

# Workflow's jobs
jobs:
  # job's id
  release:
    # job's name
    name: build and release electron app

创建矩阵定义 mac 和 windows 双运行环境

# main.yml

# Workflow's name
name: Build Electron App For Win/Mac

# Workflow's trigger
on:
  push:
    tags:
      - 'v*.*.*'

# Workflow's jobs
jobs:
  # job's id
  release:
    # job's name
    name: build and release electron app
    
    # the type of machine to run the job on
    runs-on: ${{ matrix.os }}
    
    # create a build matrix for jobs
    strategy:
      matrix:
        os: [windows-2019, macos-10.15]

上述代码创建了 windows-server 和 macos 双运行环境

创建 steps 们并定义它们的名字

将存储在 Github Repo 中的项目代码，下载到 Workflow 的工作区

使用 Action：https://github.com/marketplace/actions/checkout

# main.yml

# Workflow's name
name: Build Electron App For Win/Mac

# Workflow's trigger
on:
  push:
    tags:
      - 'v*.*.*'

# Workflow's jobs
jobs:
  # job's id
  release:
    # job's name
    name: build and release electron app
    
    # the type of machine to run the job on
    runs-on: ${{ matrix.os }}
    
    # create a build matrix for jobs
    strategy:
      matrix:
        os: [windows-2019, macos-10.15]

    # create steps
    steps:
      # step1: check out repository
      - name: Check out git repository
        uses: actions/checkout@v2

安装 Node.js 环境

使用 Action：https://github.com/marketplace/actions/setup-node-js-environment

# main.yml

# Workflow's name
name: Build Electron App For Win/Mac

# Workflow's trigger
on:
  push:
    tags:
      - 'v*.*.*'

# Workflow's jobs
jobs:
  # job's id
  release:
    # job's name
    name: build and release electron app
    
    # the type of machine to run the job on
    runs-on: ${{ matrix.os }}
    
    # create a build matrix for jobs
    strategy:
      matrix:
        os: [windows-2019, macos-10.15]

    # create steps
    steps:
      # step1: check out repository
      - name: Check out git repository
        uses: actions/checkout@v2

      # step2: install node env
      - name: Install Node.js
        uses: actions/setup-node@v2-beta

构建 Electron App

# main.yml

# Workflow's name
name: Build Electron App For Win/Mac

# Workflow's trigger
on:
  push:
    tags:
      - 'v*.*.*'

# Workflow's jobs
jobs:
  # job's id
  release:
    # job's name
    name: build and release electron app
    
    # the type of machine to run the job on
    runs-on: ${{ matrix.os }}
    
    # create a build matrix for jobs
    strategy:
      matrix:
        os: [windows-2019, macos-10.15]

    # create steps
    steps:
      # step1: check out repository
      - name: Check out git repository
        uses: actions/checkout@v2

      # step2: install node env
      - name: Install Node.js
        uses: actions/setup-node@v2-beta

      # step3: npm install
      - name: npm install
        run: |
          npm install

      # step4: build app for mac/win
      - name: build windows app
        if: matrix.os == 'windows-2019'
        run: |
          npm run electron:build-win
      
      - name: build mac app
        if: matrix.os == 'macos-10.15'
        run: |
          npm run electron:build

可以看到，步骤 4 中我对 mac 和 windows 分别使用 if 做了处理。另外，npm run electron:build-win 是我在 package.json 中后添加的指令：

上传 dist_electron 文件夹中的 .exe 和 .dmg 文件

使用 Action：https://github.com/marketplace/actions/upload-a-build-artifact

# main.yml

# Workflow's name
name: Build Electron App For Win/Mac

# Workflow's trigger
on:
  push:
    tags:
      - 'v*.*.*'

# Workflow's jobs
jobs:
  # job's id
  release:
    # job's name
    name: build and release electron app
    
    # the type of machine to run the job on
    runs-on: ${{ matrix.os }}
    
    # create a build matrix for jobs
    strategy:
      matrix:
        os: [windows-2019, macos-10.15]

    # create steps
    steps:
      # step1: check out repository
      - name: Check out git repository
        uses: actions/checkout@v2

      # step2: install node env
      - name: Install Node.js
        uses: actions/setup-node@v2-beta

      # step3: npm install
      - name: npm install
        run: |
          npm install

      # step4: build app for mac/win
      - name: build windows app
        if: matrix.os == 'windows-2019'
        run: |
          npm run electron:build-win
      
      - name: build mac app
        if: matrix.os == 'macos-10.15'
        run: |
          npm run electron:build

      # step5: cleanup artifacts in dist_electron
      - name: cleanup artifacts
        run: |
          npx rimraf "dist_electron/!(*.exe|*.dmg)"

      # step6: upload artifacts
      - name: upload artifacts
        uses: actions/upload-artifact@v2
        with:
          name: ${{ matrix.os }}
          path: dist_electron

创建 Release

使用 Action：https://github.com/softprops/action-gh-release

# main.yml

# Workflow's name
name: Build Electron App For Win/Mac

# Workflow's trigger
on:
  push:
    tags:
      - 'v*.*.*'

# Workflow's jobs
jobs:
  # job's id
  release:
    # job's name
    name: build and release electron app
    
    # the type of machine to run the job on
    runs-on: ${{ matrix.os }}
    
    # create a build matrix for jobs
    strategy:
      matrix:
        os: [windows-2019, macos-10.15]

    # create steps
    steps:
      # step1: check out repository
      - name: Check out git repository
        uses: actions/checkout@v2

      # step2: install node env
      - name: Install Node.js
        uses: actions/setup-node@v2-beta

      # step3: npm install
      - name: npm install
        run: |
          npm install

      # step4: build app for mac/win
      - name: build windows app
        if: matrix.os == 'windows-2019'
        run: |
          npm run electron:build-win
      
      - name: build mac app
        if: matrix.os == 'macos-10.15'
        run: |
          npm run electron:build

      # step5: cleanup artifacts in dist_electron
      - name: cleanup artifacts
        run: |
          npx rimraf "dist_electron/!(*.exe|*.dmg)"

      # step6: upload artifacts
      - name: upload artifacts
        uses: actions/upload-artifact@v2
        with:
          name: ${{ matrix.os }}
          path: dist_electron

      # step7: create release
      - name: release
        uses: softprops/action-gh-release@v1
        if: startsWith(github.ref, 'refs/tags/')
        with:
          files: "dist_electron/**"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

尝试运行 Action

打标签并上传

当我编辑好我的 main.yml 后，我将其提交到 Github：

git add *
git commit -m "create main.yml"
git push origin -u

然后我打上了 tag，并上传了代码：

git tag v0.1.0
git push origin --tags

出现错误：缺少 GH_TOKEN 环境变量

很不幸，我的代码没有一次性跑通，它出现了错误：GitHub Personal Access Token is not set, neither programmatically, nor using env “GH_TOKEN” 。于是，我搜索得知解决方案如下：
1、得到我们的 Github Token
2、将 Github Token 配置在项目的环境变量中

# step4: build app for mac/win
- name: build windows app
  if: matrix.os == 'windows-2019'
  run: |
    npm run electron:build-win
  env:
    GH_TOKEN: bef0b46667d2b13f8asdasdasd762873af59f71c

- name: build mac app
  if: matrix.os == 'macos-10.15'
  run: |
    npm run electron:build
  env:
    GH_TOKEN: bef0b46667d2b13f8asdasdasd762873af59f71c

注意，上面的 GH_TOKEN 请替换成你自己的！！！

出现错误：Windows 的 Power Shell 不支持 | 符号

不支持 | 符号

这个解决方案倒是比较简单，就是将 cleanup artifacts 这一步再次用 if 语句判断：这样 Windows 是 (.exe)，Mac 是 (.dmg)，这就避免了出现 | 符号了。

# step5: cleanup artifacts in dist_electron
- name: cleanup artifacts for windows
  if: matrix.os == 'windows-2019'
  run: |
    npx rimraf "dist_electron/!(*.exe)"

- name: cleanup artifacts for macos
  if: matrix.os == 'macos-10.15'
  run: |
    npx rimraf "dist_electron/!(*.dmg)"

最后，我把全部的 YAML 文件配置放出来，大家自行食用～

# main.yml

# Workflow's name
name: Build Electron App For Win/Mac

# Workflow's trigger
on:
  push:
    tags:
      - "v*.*.*"

# Workflow's jobs
jobs:
  # job's id
  release:
    # job's name
    name: build and release electron app

    # the type of machine to run the job on
    runs-on: ${{ matrix.os }}

    # create a build matrix for jobs
    strategy:
      fail-fast: false
      matrix:
        os: [windows-2019, macos-10.15]

    # create steps
    steps:
      # step1: check out repository
      - name: Check out git repository
        uses: actions/checkout@v2

      # step2: install node env
      - name: Install Node.js
        uses: actions/setup-node@v2-beta

      # step3: npm install
      - name: npm install
        run: |
          npm install

      # step4: build app for mac/win
      - name: build windows app
        if: matrix.os == 'windows-2019'
        run: |
          npm run electron:build-win
        env:
          GH_TOKEN: bef0b46667d2b13f8asdasdasd762873af59f71c

      - name: build mac app
        if: matrix.os == 'macos-10.15'
        run: |
          npm run electron:build
        env:
          GH_TOKEN: bef0b46667d2b13f8asdasdasd762873af59f71c

      # step5: cleanup artifacts in dist_electron
      - name: cleanup artifacts for windows
        if: matrix.os == 'windows-2019'
        run: |
          npx rimraf "dist_electron/!(*.exe)"

      - name: cleanup artifacts for macosZ
        if: matrix.os == 'macos-10.15'
        run: |
          npx rimraf "dist_electron/!(*.dmg)"

      # step6: upload artifacts
      - name: upload artifacts
        uses: actions/upload-artifact@v2
        with:
          name: ${{ matrix.os }}
          path: dist_electron

      # step7: create release
      - name: release
        uses: softprops/action-gh-release@v1
        if: startsWith(github.ref, 'refs/tags/')
        with:
          files: "dist_electron/**"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}