前回の記事「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の情報ばかりで非常にもったいない。みなさん使っていきましょう。
☘️だいたい楽しい☘️ 