🚀electron-builderで自動アップデートに対応

前回の記事「electron-builderを使ってvueアプリケーションのパッケージを作成」の続きです。前回はvue+electronとしての構築方法でしたが今回は

• コード著名(Mac)
• AutoUpdate指定
• Publish指定

の解説です。electron単体の自動アップデートの設定として独立している記事になっています。

はじめに、electron-packagerの頃はMac用の自動アップデート対応にはパッケージ配布用のサーバーが必要でした。パッケージを置く用途+バージョン情報から最新のパッケージ情報をjsonで返却するサーバーが。

そのため最善手としてはLambdaを使用してs3のダウンロードURLを返却する設定が必要だったのですが、electron-builder(正確にはelectron-updaterの機能)ならそれは不要になります。ビルド時に作成されるymlファイルを読み取ってアップロードの可否を判定するので、静的ファイルのホスティングさえできれば良いのでs3やgithubのリリース機能のみでelectronの自動アップデートに対応することができます。

面倒なサーバーセッティングが必要なく、自動アップデートに対応出来るようになるのでぜひ使っていきましょう。

コード著名(Mac)

Mac用アプリケーションではコード著名をしないと自動アップデートがされません。コード著名をするにはApple Developer Programに登録してxcodeでmacOS用の「Developer ID Application」を作成しておけばビルド時に自動で著名してくれます。ちなみにMac環境でのビルドが必須&自動アップデート対応をするとMacAppストアで配布はできません。

公式ドキュメントページ: https://www.electron.build/code-signing

AutoUpdate指定

electronの自動アップデートさせる設定を追加します。まずは必要パッケージのインストール

npm i --save electron-updater
npm i --save electron-log

公式サンプルプロジェクトの対象コードだけ別ファイルに分けて保存

# src/auto-update.js
import { app } from 'electron';
import log from 'electron-log';
import { autoUpdater } from 'electron-updater';
autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = 'info';
log.info('App starting...');
function sendStatusToWindow(text) {
  log.info(text);
}
autoUpdater.on('checking-for-update', () => {
  sendStatusToWindow('Checking for update...');
})
autoUpdater.on('update-available', (info) => {
  sendStatusToWindow('Update available.');
})
autoUpdater.on('update-not-available', (info) => {
  sendStatusToWindow('Update not available.');
})
autoUpdater.on('error', (err) => {
  sendStatusToWindow('Error in auto-updater. ' + err);
})
autoUpdater.on('download-progress', (progressObj) => {
  let log_message = "Download speed: " + progressObj.bytesPerSecond;
  log_message = log_message + ' - Downloaded ' + progressObj.percent + '%';
  log_message = log_message + ' (' + progressObj.transferred + "/" + progressObj.total + ')';
  sendStatusToWindow(log_message);
})
autoUpdater.on('update-downloaded', (info) => {
  sendStatusToWindow('Update downloaded');
});
app.on('ready', async () => {
  autoUpdater.checkForUpdatesAndNotify();
})

electronのmainファイルで上記のファイルをimportすれば完了です。

import './auto-update';

自動アップデート対象のパッケージダウンロードURLは後述するPublish設定を行えば不要です。アップロード処理のログ出しは以下のパスに出力されます。

* on Linux: ~/.config/<app name>/log.log
* on OS X: ~/Library/Logs/<app name>/log.log
* on Windows: %USERPROFILE%\AppData\Roaming\<app name>\log.log

上記のサンプルプロジェクトの挙動だと

• 起動時にアップデート出来るかチェック
• アップデート出来るのであれば通知&ダウンロード
• ダウンロード終了
• 次回起動時に適応される

という流れになります。実際に通知される内容はこちら

ダウンロード等のハンドリングをしたいのであれば公式のドキュメントページに記載されているAPIを使い分けましょう。

公式ドキュメントページ: https://www.electron.build/auto-update

Publish指定

公開指定です。公開先はproviderとして何種類かありますが試したのは以下の3種類

• generare
  • 専用サーバー等、ホスティング先を独自に設定する場合に指定。
  • アップロードはビルド完了後に自分で行う。
• s3
  • awsの静的ファイルホスティングサービス。
  • 自動でアップロードしてくれる
  • バケットの作成&バケットポリシーの変更があらかじめ必要
• github
  • githubのリリース機能に自動でアップロードしてくれる。

generateが汎用的に使用できるが、アップロードはしてくれない。s3やgithubで要件が満たせるのであれば使用した方が得です。

ビルド時のコマンドラインオプションに

--publish always

等を追加することでpublishオプション指定でアップロードなりが実行されます。ちなみに上記の設定は常にビルド成果物をアップロードします。

s3の設定例としては以下をオプション指定した場合

publish: {
  provider: 's3',
  bucket: 'example-vue-electron',
  region: 'ap-northeast-1',
},

バケットexample-vue-electronを作成後、パブリックアクセス設定を以下に設定を行う

アップロード時に公開設定がされるので事前準備は以上で終了。
ビルド時に
AWS_ACCESS_KEY_ID 
AWS_SECRET_ACCESS_KEY
のenv指定を行えば対象のバケットにアップロードされます。

githubの設定例はオプション設定がこの場合

publish: {
  provider: 'github'
}

アップロード用のトークンをこのページでrepoの欄にチェックして取得 https://github.com/settings/tokens/new

GH_TOKEN
のenvを指定、ビルドすればアップロードされます。

公式ドキュメントページ: https://www.electron.build/configuration/publish

まとめ

前回同様試作したプロジェクトはgithubに上がっています https://github.com/soramugi/example-vue-electron

travisの設定も試してみたのですがp12ファイルの設定がうまく出来ていないのでMac版の自動アップデートが失敗する状態になっています。 https://travis-ci.org/soramugi/example-vue-electron そのうち設定できるようにしたいところですが、自分の要件だとtravisまでは設定しなくても良いかなと。下準備ばかりではなく動くアプリケーション作りたい欲求が出てきました。

electron-builderは便利です。複雑化していたelectronのビルド環境を簡素にしてくれる救世主です。ですがネット上にはelectron-packagerの情報ばかりで非常にもったいない。みなさん使っていきましょう。