Electronの公証ビルドをGithubにpushした時Actionsによって自動ビルドし成果物をダウンロードする方法

2023年4月11日

GithubのActionsを使用してpushした後に自動でelectronの公証ビルドを開始し生成された.dmgや.appなどのファイルをダウンロードできるようにする方法をご紹介します。

公証をつける方法

ここではelectron-builderを使用してelectronをビルドした時に自動で公証がつくようにする設定をご紹介します。

1. package.jsonを修正する

"appId": "com.xxxx.electron.sample"

appIdを修正します。
修正したappIdは後ほど出てくるnotarize.jsと一致させる必要があるので覚えておいてください。

"afterSign": "scripts/notarize.js",
"directories": {
  "output": "build"
},
"dmg": {
  "sign": false
},
"mac": {
  "icon": "icons/icon.icns",
  "hardenedRuntime": true,
  "gatekeeperAssess": false
}

buildに公証用の設定を追記します。

"afterSign": "scripts/notarize.js"

ビルドに公証を取得するためのプログラムが書かれたnotarize.jsのpathを指定しています。

"directories": {
  "output": "build"
}

ビルド時に出力される.dmgや.appの出力先のpathになります。
上記設定ではbuildフォルダが作成されその中に.dmgや.appなどのファイルが生成されるようになります。

"icon": "icons/icon.icns"

macアプリのアイコンのpathを指定しています。

{
  "name": "Name",
  "productName": "ProductName",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "celleus",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "dotenv": "^16.0.3",
    "electron-notarize": "^1.2.2"
  },
  "devDependencies": {
    "electron": "21.3.1",
    "electron-builder": "^23.6.0"
  },
  "build": {
    "appId": "com.xxxx.electron.sample",
    "afterSign": "scripts/notarize.js",
    "directories": {
      "output": "build"
    },
    "dmg": {
      "sign": false
    },
    "mac": {
      "icon": "icons/icon.icns",
      "hardenedRuntime": true,
      "gatekeeperAssess": false
    }
  }
}

2. notarize.jsを追加する

require('dotenv').config();
const { notarize } = require('electron-notarize');

exports.default = async function notarizing(context) {
  const { electronPlatformName, appOutDir } = context;
  if (electronPlatformName !== 'darwin') {
    return;
  }

  const appName = context.packager.appInfo.productFilename;

  return await notarize({
    appBundleId: 'com.xxxx.electron.sample',
    appPath: `${appOutDir}/${appName}.app`,
    appleId: process.env.APPLEID,
    appleIdPassword: process.env.APPLEIDPASS,
    ascProvider: process.env.ASC_PROVIDER
  });
};

scripts/notarize.jsを作成、追加します。

appBundleId: 'com.xxxx.electron.sample'

アプリのBundleIdです。package.jsonと揃えましょう。

appPath: `${appOutDir}/${appName}.app`

公証された.appが出力されるpathになります。

3. .env作成する

APPLEID=<AppleDeveloperProgramのメールアドレス>
APPLEIDPASS=<Appleのサイトで生成したパスワード>
ASC_PROVIDER=<AppleDeveloperProgramのチームID>

.envを作成、追加します。
ここで設定した値は後でGithubActionsの環境変数としても使います。

// 例
APPLEID=xxxxxx@gmail.com
APPLEIDPASS=aaaa-bbbb-cccc-dddd
ASC_PROVIDER=AAAAAAAAA1

ASC_PROVIDERについて

ASC_PROVIDERがチームIDでなエラーになる場合があります。

そんな時は以下のコマンドを実行しProviderShortnameを取得してくださ。

$ xcrun altool --list-providers -u "APPLEID" -p "APPLEIDPASS"

うまく実行できると以下のように取得できます。

ProviderName ProviderShortname PublicID                             WWDRTeamID 
------------ ----------------- ------------------------------------ ---------- 
Test Inc.    TestCOJP          xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx GB2dKk6juz 

ここでは「TestCOJO」がProviderShortnameとなります。

よってASC_PROVIDERTestCOJPを設定することでエラーを回避できます。

4. 公証ビルド

$ npx electron-builder --mac

公証付きのビルドをします。
buildフォルダにdmgと公証のついたappが作成されれば成功です。

Github Actionsで自動で公証をつける方法

ここではGithubにpushした時に自動でビルドされ公証のついたappやdmgをダウンロードできるようにする方法をご紹介します。

1.Github ActionsのWorkflow(yml)の記述

name: Push

on: [push]

jobs: 
  build: 
  
    runs-on: macos-latest
    
    env:
      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 18.x
        uses: actions/setup-node@v1
        with:
          node-version: 18.x
      - name: npm install
        run: npm install
      # code signing
      - name: apple codesigning
        uses: apple-actions/import-codesign-certs@v1
        with:
          p12-file-base64: ${{ secrets.CERTIFICATES_P12 }}
          p12-password: ${{ secrets.CERTIFICATES_P12_PASSWORD }}
      # アプリをビルド
      - name: build application
        env:
          APPLEID: ${{ secrets.APPLEID }}
          APPLEIDPASS: ${{ secrets.APPLEIDPASS }}
          ASC_PROVIDER: ${{ secrets.ASC_PROVIDER }}
        run: npx electron-builder --mac
       # ファイルをアップロード
      - name: upload artifact
        uses: actions/upload-artifact@v3
        with: 
          name: build
          path: build

細かい記述は省きますがnpm installでインストールからはじまり、codesigning→アプリビルド→artifactのアップロードを行なっています。

2. Actionsに環境変数を追加する

  • CERTIFICATES_P12
  • CERTIFICATES_P12_PASSWORD
  • APPLEID
  • APPLEIDPASS
  • ASC_PROVIDER

GithubのSettings > Secrets > Actionsに上記5つの環境変数を追加します。

  • APPLEID
  • APPLEIDPASS
  • ASC_PROVIDER

APPLEID、APPLEIDPASS、ASC_PROVIDERの3つは.evnで指定したものと同じになります。

CERTIFICATES_P12はキーチェーンアクセスにあるDevelopper ID Applicationの証明書(.p12)を右クリックで書き出します。この時パスワードの入力が必要です。パスワードはCERTIFICATES_P12_PASSWORDとして環境変数に登録します。

$ base64 -i 証明書.p12 | pbcopy

書き出したファイル(.p12)に対しターミナルで上記コマンドを叩くとクリップボードにハッシュがコピーされます。
コピーされたハッシュをCERTIFICATES_P12としてGithubActionsの環境変数として登録します。

環境変数の設定は以上です。

3. .gitignoreを修正する

node_modules
out

build
.env

electronをビルドすると.dmgと.appが生成されますが容量が重たいので生成ファイルは除外しておきます。
ここでは出力先は「build」フォルダにしているのでbuildフォルダ全て除外ファイルにします。

また.envはパスワードなどの情報を含むため除外してきます。

4. Githubにプッシュする

再度にGithubにプッシュしてGithubActionsが自動でビルドp+公証を開始し、artifactsとしてビルドして出力されたbuildフォルダをダウンロードできれば完了です。

参考にしたサイト

・macos-latest
https://qiita.com/jrsyo/items/76e476aa25bf4f8f8e79
・公証
https://kent-and-co.com/866/
・upload-artifact
https://www.guri2o1667.work/entry/2022/09/30/%E3%80%90Github%E3%80%91GitHubActions%E3%81%A7%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8Bupload-artifact%E3%81%A8download-artifact#artiafct-%E3%81%A8%E3%81%AF