公開と更新

チュートリアルの流れ

これは Electron チュートリアルの 6 章 です。

学習目標

ここまでのチュートリアルで、ついにこちらが最後のステップです！ここではアプリを GitHub の Release に公開し、アプリのコードに自動更新を組み込みます。

update.electronjs.org の利用

Electron のメンテナにより、オープンソースアプリケーションの自動更新サービスが https://update.electronjs.org にて無償で提供されています。この必須要件は以下のとおりです。

アプリが macOS または Windows で動作する
アプリに GitHub の公開リポジトリがある
ビルドが GitHub の Releases で公開されている
ビルドがコード署名されている (macOS のみ)

ここでは、既に全コードを GitHub の公開リポジトリにプッシュしているものとします。

代替の更新サービス

If you're using an alternate repository host (e.g. GitLab or Bitbucket) or if you need to keep your code repository private, please refer to our step-by-step guide on hosting your own Electron update server.

GitHub Release を公開する

Electron Forge には Publisher プラグインがあり、パッケージ化したアプリケーションを様々なソースへと自動配信できます。このチュートリアルでは、GitHub Publisher を利用して、コードを GitHub の Release に公開します。

個人アクセストークンを作成する

Forge は GitHub 上のどのリポジトリにも権限無しには公開できません。 Forge が GitHub の Release にアクセスできるように、認可トークンを渡す必要があります。最も簡単な方法は、public_repo スコープで新しいパーソナルアクセストークン (PAT) を作成し、公開リポジトリへの書き込み権限を付与することです。 このトークンは必ず秘匿しておいてください。

GitHub Publisher のセットアップ

モジュールのインストール

Forge の GitHub Publisher はプラグインであり、プロジェクトの devDependencies にインストールする必要があります。

npm
Yarn

npm install --save-dev @electron-forge/publisher-github

yarn add --dev @electron-forge/publisher-github

Forge の公開システムの設定

インストールしたら、Forge の設定でセットアップする必要があります。オプションの完全なリストは、Forge の PublisherGitHubConfig API ドキュメントに記載されています。

forge.config.js
module.exports = {
  publishers: [
    {
      name: '@electron-forge/publisher-github',
      config: {
        repository: {
          owner: 'github-user-name',
          name: 'github-repo-name'
        },
        prerelease: false,
        draft: true
      }
    }
  ]
}

公開前に Release のドラフトを作成する

注意として、ここでは Release をドラフトとして作成するように Forge を設定しました。これにより、実際にエンドユーザに公開することなく、生成された成果物を含むリリースを確認できます。リリースノートを書き、頒布形式が動作することを再確認した後、手動で GitHub から Release を公開できます。

認証トークンの設定

Publisher に認証トークンを認識させる必要もあります。デフォルトでは、環境変数 GITHUB_TOKEN に格納されている値を使用します。

公開コマンドの実行

Forge の publish コマンドを npm スクリプトに追加します。

package.json
  //...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish"
  },
  //...

このコマンドは、設定したメーカーを実行し、出力された頒布形式を新しい GitHub の Release へ公開します。

npm
Yarn

npm run publish

yarn run publish

デフォルトでは、ホスト OS とアーキテクチャに対応した頒布形式 1 つのみが公開されます。 Forge コマンドに --arch フラグを渡すことで、他アーキテクチャ用にも公開できます。

このリリース名は、プロジェクトの package.json ファイルの version フィールドに対応しています。

Release のタグ付け

任意で、リリースがコードの履歴のラベル付けした時点と関連付くように、Git でリリースのタグを付けることもできます。 npm には便利な npm version コマンドがあり、バージョン更新やタグ付けができます。

おまけ: GitHub Actions で公開する

ローカルで公開することは苦痛です。特に、これではホストオペレーティングシステム用の頒布形式しか作成できません (つまり、macOS から Windows の .exe ファイルを公開できません)。

これは、GitHub Actions のような自動化ワークフローでアプリを公開することで解決できます。ワークフローは、クラウド上の Ubuntu、macOS、Windows でタスクを実行できます。これは、Electron Fiddle が採っているアプローチとまったく同じです。詳細については、Fiddle のビルドとリリースのパイプラインと Forge の構成をご参照ください。

アップデータコードの設置

GitHub の Release を使ったリリースシステムができたので、次は新しいリリースが出たときにアップデートをダウンロードするよう Electron アプリに指示します。 Electron apps do this via the autoUpdater module, which reads from an update server feed to check if a new version is available for download.

update.electronjs.org サービスは、アップデータ互換のフィードを提供します。例えば、Electron Fiddle v0.28.0 は https://update.electronjs.org/electron/fiddle/darwin/v0.28.0 のエンドポイントをチェックし、より新しい GitHub リリースが利用可能かどうか確認します。

GitHub にリリースが公開されると、update.electronjs.org サービスがあなたのアプリケーションのために動作します。あとは autoUpdater モジュールでフィードを設定するのみです。

このプロセスを簡単にするために、Electron チームは update-electron-app モジュールを保守しています。これは、1 つの関数呼び出しで update.electronjs.org の autoUpdater のテンプレートをセットアップするもので、設定は不要です。このモジュールは、プロジェクトの package.json の "repository" フィールドと同じ update.electronjs.org のフィードを検索します。

まず、このモジュールを実行時の依存関係としてインストールします。

npm
Yarn

npm install update-electron-app

yarn add update-electron-app

次に、このモジュールをインポートしてメインプロセスですぐに呼び出します。

main.js
require('update-electron-app')()

これで全て完了です！パッケージされたアプリケーションは、新しい GitHub の Release が公開される毎に自身を更新します。

概要

このチュートリアルでは、Electron Forge の GitHub Publisher を設定し、アプリの頒布形式を GitHub の Release にアップロードする方法を説明しました。プラットフォーム間では常に頒布形式を生成することはできないため、そういったマシンを利用できない場合は、継続的インテグレーションのパイプラインでビルドと公開のフローを設定することを推奨します。

Electron アプリケーションは、autoUpdater モジュールにアップデートサーバーのフィードを指定することで、自己更新が可能です。 update.electronjs.org は、GitHub の Release で公開されているオープンソースアプリケーション向けに Electron が提供する無料のアップデートサーバーです。このサービスを利用するための Electron アプリの設定は、update-electron-app モジュールをインストールしインポートすることで簡単に行えます。

アプリケーションが update.electronjs.org の対象でない場合は、代わりに各自のアップデートサーバーを導入し、autoUpdater モジュールを自分で構成する必要があります。

🌟 これで完了です！

ここまでで、Electron のチュートリアルは正式に終了しました。他のドキュメントも自由に探して、開発を楽しんでください！質問がある方は、コミュニティの Discord サーバーをお訪ねください。

学習目標​

update.electronjs.org の利用​

GitHub Release を公開する​

個人アクセストークンを作成する​

GitHub Publisher のセットアップ​

モジュールのインストール​

Forge の公開システムの設定​

認証トークンの設定​

公開コマンドの実行​

おまけ: GitHub Actions で公開する​

アップデータコードの設置​

概要​