github actionsを使った electron アプリインストーラの自動ビルド (action-electron-builder)

Electronは、MacOSWindowsといったマルチプラットフォームのデスクトップアプリを簡単に作れますが、複数プラットフォームのアプリを作れる分、ビルド/署名といった作業が手間になっていました。Github Actionsを使ってタグ付けした時にGithub releasesにビルドしたインストーラを配置するようにした時の方法を書いてみたので、よかったら参考にしてみてください。

こんな感で dmg ファイルや exe ファイルが出来ます。

f:id:moritamorie:20200613011238p:plain

Github Actionsで簡単に実現するには、action-electron-builder actionを使うと楽です。最新の情報は公式のREADMEから取得するようにしてください。

github.com

action-electron-builder 導入

まずはelectron-builder (v22+) でビルドできるようにします。大体のプロジェクトは electron-builder 使っていると思うので導入方法は割愛します。(今回使った electron-builderのバージョンはV22.7.0)

.github/workflows/build.yml に以下のようなファイルを置き、Github Actionsでmacos, ubuntu, windowsのビルド/リリースが実行されるようにします。

name: 'Build and release electron installer'
on:
  push:
    tags:
      - 'v*'

jobs:
  release:
    runs-on: ${{ matrix.os }}

    strategy:
      matrix:
        os: [macos-latest, ubuntu-latest, windows-latest]

    steps:
      - name: Check out Git repository
        uses: actions/checkout@v1

      - name: Install Node.js, NPM and Yarn
        uses: actions/setup-node@v1
        with:
          node-version: 10

      - name: Build/release Electron app
        uses: samuelmeuli/action-electron-builder@v1
        with:
          github_token: ${{ secrets.github_token }}

          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

vから始まるタグがつけられるとワークフローが動き

$ npm run build 
or
$ yarn run build

が実行されます。スクリプト名( build の部分)はオプションで変えられます。

自動でリリースが作られてインストーラが配置されるように

electron-builderのpublishの設定

electron-builderのpublishの設定( githubのどのリポジトリにどのようにリリースするか)を追加します。 package.json を以下のようにしてみました。

  "build": {
    ~~~
    "publish": {
      "provider": "github",
      "owner": "moritamori",
      "repo": "my-first-app",
      "releaseType": "release"
    }
    ~~~
  }

通常、環境変数Githubトークンの設定が必要になるのですが、action-electron-builderbuild.ymlgithub_token を自動的に使うようになっているので、トークンが漏れることがなくセキュリティ面で安全なのが良い感じです。

package.jsonのバージョン変更 + タグ付け

package.jsonのバージョンを変更し、タグ付けしてpushします。

{
  "version": "1.0.0"
}
$ git tag v1.0.0
$ git push && git push --tags

タグ付け時にGithub actions workflow の中でelectron-builder が実行される時に --publish alwaysフラグが渡されることで、自動的にリリースが作られてpublishされます。

署名

アプリケーションの署名も自動的にできます。

MacOSのアプリ署名に関しては、 mac_certsエンコードした証明書、 mac_certs_password にパスワードを指定します。 Windowsに関しても同様に windows_certswindows_certs_password に指定します。

f:id:moritamorie:20200613132310p:plain

https://github.com/samuelmeuli/action-electron-builder#code-signing

サンプルプロジェクト

サンプルを作ってみたので、よかったら参考にしてみてください。 github.com