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

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

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

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-builder は build.yml の github_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されます。

• 参考にしたコード
  • https://github.com/samuelmeuli/action-electron-builder/blob/master/index.js#L131

署名

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

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

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

サンプルプロジェクト

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