什么是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的发布脚本来发布我们的构建产物

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