✨

Electronのプロジェクトを新規作成してGitHub Actionsで自動ビルドするまで

2022/12/04に公開

Electron

ゼロからElectronのプロジェクトを立ち上げて、GitHub Actionsで自動ビルドするまでの流れの備忘録です。

前提となる環境

OS
- Ubuntu 20.04
node
- 18.12.1
yarn
- 1.22.19

依存するライブラリのインストール

$ sudo apt-get install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libgbm-dev

解説

これらのライブラリをインストールしていない場合、Electronの起動時にライブラリの参照エラーとなり正常に動きません。
各ライブラリが何者なのかをざっくり解説します。

libnss3
- セキュリティを考慮したクロスプラットフォームな開発の補助のためのライブラリ群
libatk1.0-0
- ATKを使ったアプリケーションの実行に必要
- ※ATK：アクセシビリティのインターフェースを提供するツールキット
libatk-bridge2.0-0
- ATKブリッジの共有ライブラリ
libcups2
- CUPS（Common Unix Printing System）用の基本的な共有ライブラリ
- ※CUPS：印刷システム、各種文書形式を扱うための独自のフィルタリングドライバモデルを持つ
libgtk-3-0
- ウィジェットを提供するGTKの共有ライブラリ
- ※GTK：GUIを作成するためのマルチプラットフォームなツールキット
libgbm-dev
- GBM（Generic Buffer Manager）バッファ管理ライブラリ、Mesaに結びついたグラフィックス描画のためのバッファを割り当てるための機構を提供
- GBM：プラットフォームによって異なるDRM APIを隠蔽してバッファ取得のAPIを提供するモジュール
- Mesa：3Dグラフィックスライブラリ

【参考】

Electronのプロジェクトを新規作成

今回はプロジェクト作成のために「electron-starter」というテンプレートを利用します。

とてもシンプルなテンプレートが展開されるのでカスタマイズしやすいです。
デフォルトでホットリロードに対応しています。

作者であるKei Tougeさんによる紹介記事はこちらです。

electron-starterを引数なしで実行し、インタラクティブモードで好きなものを選んでいきます。

$ npx electron-starter
? Project name: sample-project
? Select a framework: react
? Select a variant: TypeScript
? Which package manager do you prefer?: yarn

今回はUIライブラリとしてReactを、言語はTypeScriptを選択しました。
パッケージマネージャーは次章で扱う「electron-builder」で強く推奨されていたyarnにしています。

テンプレートが展開され、開発ができるようになりました。

$ cd sample-project
$ yarn dev

これでElectronアプリケーションのウィンドウが立ち上がります。
ソースコードを変更して保存すると、即座に変更が反映されます。

GitHub Actionsで自動ビルドする

準備

GitHubにリポジトリを作り、展開されたテンプレートをpushしておきます。

Actionsはこちらを利用します。

Setupの手順に従い、builderをインストールします。

$ yarn add electron-builder --dev

次に、package.jsonにbuildを追記します。

package.json

{
  "name": "sample-project",
  "description": "",
  "version": "0.1.0",
  ...
  "scripts": {
    ... 
  },
+ "build": {
+   "appId": "com.username.sample-project",
+   "files": [
+     "dist/**/*"
+   ]
+ },
  ...
}

※filesは、yarn buildしたときに生成されるファイルの出力先

最後に、Actionsの設定ファイルを作成します。

.github/workflows/build.yml

name: Build/release

on: push

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: 18.12.1

      - name: Build/release Electron app
        uses: samuelmeuli/action-electron-builder@v1
        with:
          # GitHub token, automatically provided to the action
          # (No need to define this secret in the repo settings)
          github_token: ${{ secrets.github_token }}

          # If the commit is tagged with a version (e.g. "v1.0.0"),
          # release the app after building
          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

ここまでで準備は完了です。

自動Build

自動Buildは簡単にできます。
その代わり、Electron Builder Actionのレールに乗る必要があります。

package.jsonのversionを変更します。

package.json

{
  "name": "sample-project",
  "description": "",
- "version": "0.1.0",
+ "version": "0.1.1",
  ...
}

バージョン名でCommitし、同名のタグを作成してpushします。

$ git commit -am v0.1.1
$ git tag v0.1.1
$ git push && git push --tags

これをトリガーにGitHub Actionsが実行され、自動的にReleasesのDraftが作られます。
このReleasesのAssetsとしてインストーラが追加されているはずです。

これにて自動的Buildまでできるようになりました。
インストーラをダウンロードして実行すると、Electronアプリケーションがインストールされます。

以上、Electronのプロジェクトを新規作成してGitHub Actionsで自動ビルドするまでの流れでした。