Github Action 快速构建 Electron 应用_github action打包electron

前言

在开发 Electron 应用时，比较耗时的部分应该是构建打包的过程，像用 electron-builder 这种打包工具来说，它会根据你要打包的系统来下载应用的系统镜像打包工具，由于这些镜像的源文件托管在 Github 上，且 nodejs 上做网络加速很困难，所以这个过程十分消耗时间。当我们换一台电脑，还要经历相同的打包环境的准备时间。

前段时间 Github 推出工作流功能，也就是 Github Actions，正好可以满足我们这种由于网络过慢导致准备环境成本高的问题。

Github Actions 基础概念

在 GitHub Actions 的仓库中自动化、自定义和执行软件开发工作流程。 您可以发现、创建和共享操作以执行您喜欢的任何作业（包括 CI/CD），并将操作合并到完全自定义的工作流程中。

这里主要有四个概念：workflow(工作流)、job(任务)、step(步骤)、action(动作)。

一个仓库可以有多个工作流，一个工作流可以有多个任务，一个任务可以有多个步骤，一个步骤可以有多个动作。

工作流文件存放在 .github/workflows/ 目录下，以 .yml 描述。

任务目前可以在三种系统下运行，用 runs-on 标注，包括：ubuntu-latest, windows-latest, macOS-latest。

任务由事件触发，支持分支的 push、pull_request 事件，以及 cron 语法的时间任务触发，由 on 字段指定。

Github Actions 机器配置

那 Github Actions 的机器性能如何呢？

这里写了一个仓库，专门用来查看所有支持的操作系统的信息。

仓库地址：https://github.com/lecepin/github-actions-system-info

三个系统的信息如下所示：

┌─────────┬────────────┬───────────────────────────────────────────┐
│ (index) │    name    │                   info                    │
├─────────┼────────────┼───────────────────────────────────────────┤
│    0    │ '系统信息' │       'Ubuntu 5.4.0-1032-azure x64'       │
│    1    │  '处理器'  │ 'Intel® Xeon® Platinum 8171M 2.60GHz 2核' │
│    2    │   '内存'   │                   '6GB'                   │
│    3    │   '硬盘'   │                  '14GB'                   │
└─────────┴────────────┴───────────────────────────────────────────┘
 
┌─────────┬────────────┬───────────────────────────────────────────────────────────┐
│ (index) │    name    │                           info                            │
├─────────┼────────────┼───────────────────────────────────────────────────────────┤
│    0    │ '系统信息' │ 'Microsoft Windows Server 2019 Datacenter 10.0.17763 x64' │
│    1    │  '处理器'  │         'Intel® Xeon® Platinum 8171M 2.60GHz 2核'         │
│    2    │   '内存'   │                           '6GB'                           │
│    3    │   '硬盘'   │                          '13GB'                           │
└─────────┴────────────┴───────────────────────────────────────────────────────────┘
 
┌─────────┬────────────┬───────────────────────────────────────┐
│ (index) │    name    │                 info                  │
├─────────┼────────────┼───────────────────────────────────────┤
│    0    │ '系统信息' │         'Mac OS X 19.6.0 x64'         │
│    1    │  '处理器'  │ 'Intel® Xeon® E5-1650 v2 3.50GHz 3核' │
│    2    │   '内存'   │                '14GB'                 │
│    3    │   '硬盘'   │                '380GB'                │
└─────────┴────────────┴───────────────────────────────────────┘

构建诉求

应用打包构建的诉求比较简单，就是代码 push 到 master 后，能够进行构建，并且构建的产物可以进行下载。

构建产物，可以直接上传到 Actions 中的 Artifact 中。

编写工作流文件

在 .github/workflows/ 目录下创建，pack.yml 文件，内容如下：

name: Build Pack
on:
  push:
    branches:
      - master # master 分支 push 时触发工作流
jobs:
  pack: # 打包任务
    runs-on: windows-latest # 在 windows 系统中运行
    steps:
    - uses: actions/checkout@v2 # 下载仓库代码到工作流机器中
    - name: Install and Pack # 安装依赖并且进行构建
      run: |
        npm install
        npm run pack
    - name: Upload file # 将构建产物进行上传
      uses: actions/upload-artifact@v2
      with:
        name: packs # 上传后的名字
        path: packs # 将 packs 目录进行上传
  

保存后，即可触发工作流执行，效果如下：

并且会把构建产物上传到工作流中，如下：

 支持多系统的打包

如果对 Electron 打多个环境的安装包，在 Github Actions 中可以直接用相应的系统进行打包，很方便。

如要构建 window 和 mac 的安装包，可以创建两个工作流文件：pack-win.yml、pack-mac.yml，把配置中的 runs-on 字段进行修改即可。

也可以做一个矩阵变量，来运行多个不同的工作流，如同时支持 mac 和 win 机器，配置如下：

name: Build Pack
on:
  push:
    branches:
      - master 
jobs:
  pack: 
    runs-on: ${{matrix.os}}
    strategy:
      matrix:
        os: [windows-latest, macOS-latest] 
    steps:
    - uses: actions/checkout@v2 
    - name: Install and Pack 
      run: |
        npm install
        npm run pack
    - name: Upload file
      uses: actions/upload-artifact@v2
      with:
        name: packs
        path: packs 

效果如下： 

 两个系统构建的产物，会一起上传到 Artifact 中。

上传文件的过滤

由于打包出来的文件包括日志文件、源文件、解压文件等，而我们只需要安装文件，这里可以对上传的文件进行规则定义，如下：

    - name: Upload file
      uses: actions/upload-artifact@v2
      with:
        name: packs
        path: |
          packs/*dmg # mac 安装包
          packs/*exe # window 安装包
  

可参考这个仓库：https://github.com/lecepin/tss-merge-to-mkv/blob/master/.github/workflows/pack.yml