TravisCIでElectronアプリを自動でビルド、署名、公証してGitHubにリリースする手順メモ

これはなに?

• GitHubとTravisCIを使って、Electronアプリを自動でビルドするための設定手順です。
• Linux、Windows、macOS向けのビルドに対応。

何をしたいの?

• Electronのビルド〜署名〜公証を手動で実行するのが面倒なので、TravisCIで自動化させたい。
• ついでにGitHubのリリースタグにビルドの成果物(.exeとか)を自動で添付してほしい。

TravisCIが自動でしてくれること

• Electronアプリのビルド (.exe, .AppImage, .dmg を作成する)
• アプリの署名 (MacOSのみ)
• アプリの公証。Notarize。Gatekeeperで弾かれるのを防ぐため (MacOSのみ)
• ビルドした成果物をGitHubのドラフトタグのAssetsに添付する。

使用するライブラリ

• electron-builder - Electronをビルドするライブラリ。
• electron-notarize - アプリの公証をするためのライブラリ。

以下、手順

1. 必要なパッケージをインストール

electron-builderとelectron-notarizeをインストールします。

npm install electron-builder electron-notarize

2. electron-builderの設定をpackage.jsonに追加

package.jsonのbuildにelectron-builderの設定を書いていきます。必要最低限の設定を下記に記載しています。自由にカスタマイズしてください。

package.json

{
  "name": "example",
  "version": "1.0.0",
  "author": "example <[e-mail]>",
  "description": "Example",
  "license": "MIT",
  ...
  "build": {
    "productName": "Example",  # アプリの名前
    "appId": "app.example",    # アプリの識別子
    "afterSign": "./notarize", # 署名後にnotarizeを走らせる。後述。
    "publish": {
      "provider": "github",    
      "releaseType": "draft"   # ドラフト状態のタグがあれば、Assetsにビルド成果物を添付する
    }
  },
  "dependencies": {
   ...
  },
  "devDependencies": {
   ...
  }
}

3. .travis.ymlにビルドの設定を追加する

.travis.ymlにビルドの設定を記述します。
electron-builderのdocsを参考に作成しました。

.travis.yml

cache:
  directories:
    - node_modules
    - $HOME/.cache/electron
    - $HOME/.cache/electron-builder

jobs:
　　 # MacOS用にビルドするJob
    - stage: build
      os: osx
      osx_image: xcode11
      language: node_js
      node_js: 10
      # masterにpushした場合か、プルリクエストの場合のみビルドする。
      # ただし、成果物 (.exe, .AppImage, .dmg) をAssetsに添付するのはmasterにpushした場合のみ。
      # プルリクエストの場合はelectron-builderが自動で添付をスキップしてくれる。
      if: (branch = master AND type = push) OR type = pull_request
      script: npm run build -- --mac

　　 # Win用、Linux用にビルドするJob。wineコンテナ上で実行される。
    -
      os: linux
      services: docker
      language: generic
      node_js: 10
      before_cache:
        - rm -rf $HOME/.cache/electron-builder/wine
      if: (branch = master AND type = push) OR type = pull_request
      script:
        - |
          docker run --rm \
            -e ELECTRON_CACHE=$HOME/.cache/electron \
            -e ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder \
            -e CI=$CI \
            -e GH_TOKEN=$GH_TOKEN \
            -e TRAVIS_PULL_REQUEST=$TRAVIS_PULL_REQUEST \
            -v ${PWD}:/project \
            -v ~/.cache/electron:/root/.cache/electron \
            -v ~/.cache/electron-builder:/root/.cache/electron-builder \
            electronuserland/builder:wine \
            /bin/bash -c "\
              npm install && \
              npm run build -- --linux --win
            "

4. 公証するスクリプトを作成

MacOS用のために公証するスクリプトを作成します。公証しないと、Gatekeeperにブロックされてアプリが開けません。公証については、Appに署名してGatekeeperで保護するを参照。
このスクリプトはpackage.jsonのafterSignに設定されている通り、署名後に自動で呼び出されます。

notarize.js

const path = require('path')
const { notarize } = require('electron-notarize')

// TravisCIの環境変数 (process.env) から取得
const appleId = process.env.APPLE_ID
const appleIdPassword = process.env.APPLE_PASSWORD

// .appのパスを設定
const appPath = path.resolve(__dirname, '../dist/mac/Example.app')

// package.jsonからappIdを取得
const configPath = path.resolve(__dirname, '../package.json')
const config = require(configPath)
const appBundleId = config.build.appId

exports.default = async () => {
  // appleId, appleIdPasswordが取得できない場合はスキップ
  // プルリクエストの場合も公証をスキップ
  if (!appleId || !appleIdPassword || process.env.TRAVIS_PULL_REQUEST !== 'false') {
    console.warn('notarize skipped');
    return;
  }

  // notarizeする
  await notarize({
    appBundleId,
    appPath,
    appleId,
    appleIdPassword,
  })
}

5. TravisCIのENVにビルドに必要な機密情報を設定していく

ここからは、ビルド、署名、公証に必要な機密情報をTravisCIのENVに設定していきます。
TravisCIのENVに設定する方法は、Environment Variables を参照してください。全部で5項目あります。

GitHubのアクセストークンを設定

ビルド成果物をリリースタグのAssetsに添付するために必要になります。
Personal access tokens からトークンを取得します。scopeはrepoのみで可。

| name | value |
|:-----------------|:------------------|:------------------|
| GH_TOKEN | 発行したアクセストークン |

Apple IDとApp用パスワードを設定

公証するのに必要になります。

1. Apple IDのアカウント設定にアクセスします。
2. セキュリティ > App用パスワード からパスワードを生成します。ラベルは適当で可。

| name | value |
|:-----------------|:------------------|:------------------|
| APPLE_ID | Apple ID (ログイン時のメールアドレス) |
| APPLE_PASSWORD | 発行したApp用パスワード |

Developer ID証明書を発行

署名に使う証明書を発行します。

キーチェーンを開いて、Developer ID証明書を発行するための証明書署名リクエスト（CSR）を作成します。参考: 証明書署名リクエストを作成する

Apple Developerアカウントの「Certificates, Identifiers & Profiles」にアクセスします。「+」ボタンをクリック。

Developer ID Applicationを選択

「Choose File」をクリックして、作成したCSR (.certSigningRequest) を選択。

証明書をダウンロードします。

キーチェーンからダウンロードした証明書の秘密鍵を書き出します。

パスワードを設定するダイアログが表示されるので設定します。

base64コマンドなどで書き出したp12ファイルをBase64形式に変換します。

$ base64 ~/Downloads/example.p12 

Base64形式に変換した証明書を「CSC_LINK」として設定します。また、証明書を書き出す際に設定したパスワードを「CSC_KEY_PASSWORD」としてTravisCIのENV設定します。

| name | value |
|:-----------------|:------------------|:------------------|
| CSC_LINK | p12をbase64に変換したもの |
| CSC_KEY_PASSWORD | 証明書を書き出す際に設定したパスワード |

以上で、設定は完了です！

リリースフローを実際にやってみる

実際にリリースの流れを試してみましょう。

まずは、GitHubのリポジトリからリリースタグをドラフト状態で作成します。
今回は新しいバージョンを「v1.1.0」としました。

まだ添付されていない状態です。

では、package.jsonのversionを「1.1.0」に変更します。先程作成したタグのバージョンと合わせる必要があります。

masterにpushします。

$ git add package.json
$ git commit -m "release v1.1.0"
$ git push origin master

masterのpushをトリガーにして、TravisCIのビルドが走ります。

TravisCIのビルドが完了すると、ドラフトタグのAssetsにビルド成果物が自動で添付されています。

添付されたものを確認して、問題なければタグのドラフト状態を解除して公開しましょう！
以上がリリースフローになります。

サンプル

サンプルのリポジトリもGitHubに公開していますのでご参考ください。
https://github.com/ktmouk/electron-travis-example

参考

• https://uechi.io/blog/sign-and-notarize-electron-app
• https://qiita.com/nanairo24/items/73356574b0dc65c0e617