什么是Github Actions

详细请查看官方文档，或者可以查看阮一峰写的这篇博客

简单来说就是一个自动化构建工具，可以在git仓库接收事件之后触发对应的action，例如发布，构建等等

使用Github Actions构建自动构建Electron

在Github的虚拟机中装好node依赖，然后执行项目中的打包指令，收集构建完成的产物，然后发布到release，等待正式的发布。

撰写构建指令

以我的为知笔记客户端为例，

由于我使用了Quasar UI框架，所以我就直接使用它提供的CLI来构建项目

1
2
3
4
5
6
7
8
"scripts": {
  "lint": "eslint --ext .js,.vue ./",
  "dev": "quasar dev -m electron -t mat",
  "build-develop": "quasar build -m electron -d",
  "build-publish": "quasar build -m electron -P",
  "build-all": "quasar build -m electron -T all -P",
  "build": "quasar build -m electron"
},

在不同的系统使用build-publish就可以构建对应系统的客户端。

然后我们还需要找到构建产物的生成地址，一般都是在dist文件夹或者build文件夹之类的，可以在本地找到对应的文件夹然后再写到CI脚本中，例如我在本地的路径就是：dist/electron/Neeto-Vue-darwin-x64/*这个文件夹下都是生成的产物。

撰写CI脚本

image-20200927105243036

打开github仓库，点击tab中的actions标签，进入actions的编辑页面，如果你没有创建过Github Actions，那么它就会提供一些模板，这里我选择自己创建脚本。

image-20200927105426209

可以在github直接编辑CI脚本。

参考阮一峰的文章可以知道每个字段的含义。

1
workflow > job > step > bash, use other action etc..

是一个层级嵌套的关系，从每一步的脚本再到一个job再到整个文件的workflow，jobs是可以并行运行的，但每个jobs并不共享环境，所以我们需要解决一个问题，我们的构建产物需要上传到一个公共的区域，这样才能在release步骤中一起发布到仓库的release中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
build-windows:
    # The type of runner that the job will run on
    runs-on: windows-latest
    if: contains(github.ref, 'refs/tags/v')
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - name: Check out branch
        uses: actions/checkout@master
        
      - name: Install Node.js, NPM
        uses: actions/setup-node@v1
        with:
          node-version: 14
        
      - name: Build
        run: |
         npm install
         npm run build-publish
      - name: Compress Bundle
        run: |
          npm install -g bestzip
          bestzip Neeto-Vue-win32-x64.zip  dist/electron/Neeto-Vue-win32-x64/*
      - name: Upload Win Package
        uses: actions/upload-artifact@v1
        with:
          name: Windows_Dist
          path: Neeto-Vue-win32-x64.zip

以构建windows系统的包为例。从上到下依次为：

  1. 该jobs需要运行在最新的Windows上
  2. 只有在推送tag时才会触发对应的脚本构建，节约时间
  3. 然后指明各个脚本的步骤
  4. 第一步先检出master分支，因为只有master分支更新时我们才需要构建新的版本
  5. 指明我们需要nodejs 14版本
  6. 然后执行构建脚本
  7. 安装nodejs环境
  8. 由于quasar构建出来的包是一个文件夹，直接上传会在发布的时候出错，因此我们需要将其压缩成一个文件
  9. 然后我们使用github官方的actions将上面构建好的包上传到artifact，以供后期发布使用
  10. 指定发布的位置和名字

再来看release的部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
release:
    needs: [build-windows, build-linux, build-mac]
    runs-on: ubuntu-latest
    if: contains(github.ref, 'refs/tags/v')
    steps:
      - uses: actions/checkout@v1
      - name: Download pre-built packages for Linux
        uses: actions/download-artifact@v1
        with:
          name: Linux_Dist
          path: artifacts
      - name: Download pre-built packages for Windows
        uses: actions/download-artifact@v1
        with:
          name: Windows_Dist
          path: artifacts
      - name: Download pre-built packages for MacOS
        uses: actions/download-artifact@v1
        with:
          name: MacOS_Dist
          path: artifacts
      - name: Create Release
        id: create_release
        uses: ncipollo/release-action@v1
        with:
          name: Neeto-Vue
          token: ${{ secrets.GITHUB_TOKEN }}
          artifacts: "artifacts/*"
          draft: true
          prerelease: true

这一步需要三个系统的包都构建成功才能执行，同时也只有在发布新的tag的时候才会运行，节约不必要的损耗。

  1. 签出分支
  2. 下载前面上传到artifact的包
  3. 然后使用ncipollo的发布脚本来发布我们的构建产物

至此就完成了整个构建流程