はじめに
Windows のデスクトップアプリを作るのに、自分は Electron も使っています。使い方を整理してまとめています。
Electron を始める #JavaScript - Qiita
この続きです。
Electron アプリの「自動更新」を実装する
Electron アプリに「自動更新」の機能を実装できることは知っていました。これを試してみたいと思います。
実装するのに幾つかのパターンがあるようです。
- 標準の
autoUpdaterモジュールを使う - 上記をラップした
update-electron-appモジュールを使う -
electron-updaterモジュールを使う
上記のモジュールが参照するため
- 更新サーバを用意する
- 静的ストレージに配布ファイルを置く
更新サーバは
-
update.electronjs.orgを使う - その他の更新サーバを用意する
配布ファイルは使用するモジュールが要求する仕様で用意する。
-
autoUpdaterあるいはupdate-electron-appを使うとき - 上記のモジュールで
update.electronjs.orgを参照するとき -
electron-updaterを使うとき
autoUpdater あるいは update-electron-app を使う
標準の autoUpdater モジュールを使って実装すると、更新サーバが必須です。
これをラップした update-electron-app を使うと、記述しないといけないコードが少なくなり、更新サーバだけでなく静的ストレージを参照することも可能になります。
いずれも要求される仕様の配布ファイルを用意してサーバに配置します。
更新サーバに update.electronjs.org を使うことができます。このサーバを使うときは、配布ファイルは GitHub のパブリックなリポジトリの「リリース」 に配置します。
公式が用意しているモジュールなので使いたいところですが、制限が多いですね。
electron-updater を使う
autoUpdater および update-electron-app でなく、electron-updater モジュールを使いたいと思います。
electron-builder/packages/electron-updater · electron-userland/electron-builder · GitHub
メリットが幾つかあります。
-
autoUpdaterの仕様を真似ている - 更新サーバが不要
- 独自の静的ストレージを使える。GitHub の「リリース」でもいい
-
electron-builderが生成したファイルを配置する
electron-updater を使う①
では、試してみましょう。
Electronアプリのアップデート実装はカンタンだった話｜東京 AI 研究所
まず electron-updater モジュールを組込します。
$ npm install electron-updater --save
メインプロセスのプログラムに追記します。
const { autoUpdater } = require('electron-updater');
autoUpdater.autoDownload = true; // 自動ダウンロードする指定
app.on('ready', () => {
(中略)
autoUpdater.checkForUpdatesAndNotify(); // アップデートの有無を確認
});
配布ファイルの参照先の指定を追記します。
build: {
(中略)
publish: {
provider: "generic",
url: "https://(配布ファイルの参照先)"
}
}
electron-builder が生成したファイルのうち、以下を参照先にアップロードします。
(アプリの名前)-Setup-(バージョン).exe
(アプリの名前)-Setup-(バージョン).exe.blockmap
latest.yml
(アプリの名前)-(バージョン)-(アーキテクチャ).dmg
(アプリの名前)-(バージョン)-(アーキテクチャ).dmg.blockmap
latest-mac.yml
(プロジェクトの名前)_(バージョン)_(アーキテクチャ).deb
latest-linux.yml
package.json の version を変更してビルドして、新しいバージョンの実行ファイルをアップロードし直しましょう。
以前のバージョンのアプリを実行すると、最新の実行ファイルがバックグラウンドでダウンロードされます。アプリを終了するとインストールし直されます。アプリを起動し直すと新しいバージョンになっています。
electron-updater を使う②
ユーザが直ぐにアップデートしたくないかも知れません。自動ダウンロードは無効にして、確認メッセージを追加します。↓
autoUpdater.autoDownload = true; // 自動ダウンロードを無効
autoUpdater.on('update-available', (info) => { // アップデートが見つかった
dialog.showMessageBox(mainWin, {
type: 'info',
title: 'アップデートあり',
message: `新しいバージョン ${info.version} が利用可能です。今すぐダウンロードしますか？`,
buttons: ['する', '後で']
}).then((result) => {
if (result.response === 0) {
autoUpdater.downloadUpdate(); // ダウンロードを開始
}
});
});
ユーザが「する」を選択すると、最新の実行ファイルがバックグラウンドでダウンロードされます。
ダウンロードが完了した時点で確認メッセージを表示するようにします。↓
autoUpdater.on('update-downloaded', () => { // ダウンロードが完了した
dialog.showMessageBox(mainWin, {
title: 'ダウンロード完了',
message: 'アップデートの準備できました。今すぐアプリを再起動しますか？',
buttons: ['する', '後で']
}).then((result) => {
if (result.response === 0) {
autoUpdater.quitAndInstall(); // アプリを閉じてインストールを実行
}
});
});
ここで「後で」にしても、アプリを終了するとインストールし直されます。アプリを起動し直すと新しいバージョンになっています。
electron-builder で Electron アプリを公開する
ローカル環境で配布ファイルを作成して公開先にアップロードしますが、electron-builder の機能で配布ファイルをアップロードできるようです。
electron-builder で Cloud Storage にアップロードする
Google Cloud Storage にアップロードしてみます。
まず Google Cloud Storage にバケットを用意します。
Google Cloud Storage(GCS)の使い方 | Zenn
続いて S3 互換で接続できるよう準備します。
GCP(Google Cloud Platform)のStorageをS3モードでつないで操作する #GoogleCloud - Qiita
以下の設定します。
"build": {
(中略)
"publish": {
"provider": "s3",
"endpoint": "https://storage.googleapis.com",
"region": "auto",
"bucket": "(用意したバケット)",
"path": "(必要なら指定)",
"acl": null
}
AWS_ACCESS_KEY_ID="(準備したアクセスキー)"
AWS_SECRET_ACCESS_KEY="(準備したシークレットキー)"
ビルドすると同時にアップロードします。↓
$ electron-builder --publish always
electron-publisher-gcs を使ってみる
electron-publisher-gcs が紹介されていたので使ってみました。
現行の electron-builder と整合しないようで、実行させられませんでした。
electron-builder で GitHub にアップロードする
electron-builder で GitHub の「リリース」にアップロードできます。
まず GitHub にリポジトリを用意します。
「GitHub」にリポジトリを作成してみよう | 実践で学ぶDevOpsツールの使いこなし術 | Think IT（シンクイット）
続いて GitHub のアクセストークンを準備します。
GitHubで個人アクセストークンを発行する方法 #Python - Qiita
以下の設定します。
"build": {
(中略)
"publish": {
"provider": "github",
"owner": "(アカウント名)",
"repo": "(リポジトリ名)",
"releaseType": "release"
}
GH_TOKEN="(準備したトークン)"
ビルドすると同時にアップロードします。↓
$ electron-builder --publish always
GitHub の指定したリポジトリの「リリース」に追加されます。
GitHubのリリース機能を使う #GitHub - Qiita
Electron アプリを GitHub Actions で作成する
Electron を使うと同じソースコードで Windows 、macOS 、Linux のアプリを作成できるのがメリットです。
アプリを作成するのは、それぞれの OS の実機でビルドします。自分は Windows 機、macOS 機 、Linux 機があるのでいいのですが、それぞれにソースコードをコピーあるいはクローンしてビルドするのは面倒です。
GitHub の CI ツールを使うと、実機がなくてもクラウド環境で、複数の OS のアプリを作成できるようです。
CI を利用したマルチプラットフォーム・ビルド (GitHub Actions, electron-builder)
electron-builder で複数の OS のアプリを作成する
electron-builder で複数 OS のアプリを作成するよう package.json に必要な設定しておきます。
{
name: "(プロジェクトの名前)",
version: "(アプリのバージョン)",
homepage: "(アプリあるいは作者のウェブサイト)",
author: {
name: "(作者の名前)",
email: "(作者のメール)"
},
"build": {
"appId": "(アプリの ID)",
"productName": "(アプリの名前)",
"win": {
"target": "nsis",
"icon": "(アイコン画像のパス)"
},
"mac": {
"target": "dmg",
"icon": "(アイコン画像のパス)"
},
"linux": {
"target": "deb",
"icon": "(アイコン画像のパス)"
"category": "Utility"
}
}
最低必要な設定は以上でしょうか。アイコンは必須でないけれど指定しておきたいですね。
- Windows 用は
NSIS (Nullsoft Scriptable Install System)形式のインストーラを作成する指定しています。 - macOS 用は
dmg (ディスクイメージ)ファイルで配付できるようにします - Linux 用は
debファイルを作成する指定しています。ビルドするのにhomepage、authorのemail、categoryを指定するよう要求されます
上記の設定で、以下のファイルが作成されました。
- Windows 用は
(アプリの名前)-Setup-(バージョン).exe - macOS 用は
(アプリの名前)-(バージョン)-(アーキテクチャ).dmg - Linux 用は
(プロジェクトの名前)_(バージョン)_(アーキテクチャ).deb
artifactName を指定するとファイル名を変更できます。
electron-builder を GitHub Actions で実行する
electron-builder を GitHub Actions で実行したいと思います。
コミュニティが用意している electron-builder-action を使うとよさそうです。
github actionsを使った electron アプリインストーラの自動ビルド (action-electron-builder) - Composable Life
以下の設定を用意します。
name: release
on:
push:
jobs:
release:
runs-on: ${{ matrix.os }}
permissions:
contents: write
strategy:
matrix:
os: [windows-latest, ubuntu-latest, macos-latest]
steps:
# Checkout the repository
- uses: actions/checkout@main
# Set up Node.js
- uses: actions/setup-node@main
with:
node-version: '22'
# Install dependencies
- run: npm install
# Install dependencies (Linux only)
- if: matrix.os == 'ubuntu-latest'
run: |
sudo apt-get update
sudo apt-get install -y libarchive-tools
# Build & Release
- uses: samuelmeuli/action-electron-builder@v1
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
release: true
"build": {
(中略)
"publish": {
"provider": "github",
"owner": "(アカウント名)",
"repo": "(リポジトリ名)",
"releaseType": "release"
}
ソースコード一式と一緒に GitHub のリポジトリにプッシュすると、クラウド環境でビルドされて「リリース」に追加されます。
以下の指定しないとリリースできませんでした。リポジトリの「設定」で指定しても構いません。
permissions:
contents: write
Actions permissions に GitHub Actions ワークフローに必要な最小限のパーミッションを教えてもらう | 豆蔵デベロッパーサイト
Linux 用のビルドするには以下の設定が必要でした。↓
# Install dependencies (Linux only)
- if: matrix.os == 'ubuntu-latest'
run: |
sudo apt-get update
sudo apt-get install -y libarchive-tools
上記の設定ではプッシュするたびにリリースされます。ソースコードのプッシュだけできるようにしたいときは、以下の設定を加えてタグを指定したときだけ実行されるようにできます。↓
push:
# バージョン指定つきタグがプッシュされた時のみ実行
tags:
- 'v*'
$ git tag v(バージョン)
$ git push && git push --tags