🚀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の情報ばかりで非垞にもったいない。みなさん䜿っおいきたしょう。

投皿者: soramugi

ラゞオ奜きが講じおお仕事に遞んだ人。 web゚ンゞニアなので「ラゞオで寂しさを無くすシステム制䜜」をしおいたす(ラゞオ=音声コンテンツ)。 東京は立川によく出没したす。

コメントを残す

以䞋に詳现を蚘入するか、アむコンをクリックしおログむンしおください。

WordPress.com ロゎ

WordPress.com アカりントを䜿っおコメントしおいたす。 ログアりト /  倉曎 )

Twitter 画像

Twitter アカりントを䜿っおコメントしおいたす。 ログアりト /  倉曎 )

Facebook の写真

Facebook アカりントを䜿っおコメントしおいたす。 ログアりト /  倉曎 )

%s ず連携䞭