Electronで自動アップデートをしたい

Last updated at 2024-10-28Posted at 2024-10-28

viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方はこちらまで。

Electronで自動アップデートをしたい

知り合いの自転車屋さんに、商品のポップを簡単にデザインできるツールを作れないか相談を受けたので、Electronを使ったデスクトップアプリで作ってみることにしました

実際に使ってもらって、そのフィードバックを反映した新しいバージョンのアプリを配信したいのですが、毎回exeファイルを送ってインストールしなおしてもらうのはちょっと手間ですよね。
こちらが新しいバージョンのアプリを登録したら、アプリの起動時にアップデートチェックが走って勝手に再インストールされる仕組みを導入してみます。

Electron自動アップデートの概要

軽く調べてみたところElectronアプリの自動アップデートを実現したい場合、いくつかの方法があるようです。

AWS S3のようなクラウドストレージを利用する
- アプリ本体とメタデータをクラウドストレージに配置するだけなので一番簡単
update.electronjs.orgというElectronチームが提供するオープンソースWEBサービスを利用する
- アプリがパブリックなGitHubリポジトリのReleasesで公開されている必要がある
- 専用のモジュールが公開されているので、アプリ側での制御が簡単
- プライベートなGitHubリポジトリでは利用できない
アップデート用サーバーを自分でデプロイする
- こちらはプライベートなGitHubリポジトリでも可能
- Hazel
- Nuts
- electron-release-server
- Nucleus

今回はパブリックなリポジトリを使っていませんが、別にアプリ自体が公開されて問題があるわけではないので、AWS S3を利用した方法を試してみます。

検証環境

Windows10
Node：20.10.0
Vue CLI：5.0.8

環境構築

ある程度これに倣えば同じように検証ができるように記載しています。

前回投稿から引き続き同じ環境での検証になります。
Electronでマルチウィンドウを制御したい

まずは自動更新をするために必要となるautoUpdaterモジュールをインストールします。

npm install electron-updater

そして、Electronアプリを配布可能形式にパッケージング（exeやdmgファイルを作る）するためのモジュールであるelectron-builderも導入します。

npm install --save-dev electron-builder

更新処理を組み込む

メインプロセス側に更新処理を組み込みます。
アプリが起動したタイミングでアップデートがあるかをチェックして、もし更新があればダイアログを表示してアップデートを実行します。

background.ts

'use strict'

import path from "path";
import { app, protocol, BrowserWindow, ipcMain, dialog } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import { autoUpdater } from "electron-updater";
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

// ★★★　更新ファイルダウンロード完了　★★★
autoUpdater.addListener("update-downloaded", () => {
  if (!mainWindow) return;
  // ダイアログを表示して更新があることを伝える
  dialog.showMessageBoxSync(mainWindow, {
    type: "info",
    buttons: ["Yes"],
    defaultId: 1,
    title: "お知らせ",
    message: "新しいバージョンのアプリが存在します",
    detail: "アップデートを実行します",
  });
  // アプリを終了してインストール
  autoUpdater.quitAndInstall();

  return true;
});

let mainWindow, subWindow

async function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // メインウィンドウがレンダリングされたタイミング
  mainWindow.once("ready-to-show", async () => {
    // ★★★　最新バージョンがあるか、チェックしてダウンロード　★★★
    await autoUpdater.checkForUpdates();
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) mainWindow.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    mainWindow.loadURL('app://./index.html')
  }
}

アプリのバージョンを画面に表示して更新できたかわかるようにしてみます。

MainWindow.vue

<template>
  <h1>アプリバージョン：{{ appVersion }}</h1>
</template>

<script>
export default {
  name: 'MainWindow',
  data() {
    return {
      appVersion: require('../../package.json').version,
    }
  },
}
</script>

S3にバケットを作成する

パッケージされたアプリを配置しておくS3のバケットを作成します。

バケット名やその他の設定は任意で問題ないです。
注意点としては、パブリックなアクセスを可能とするために、ここのチェックを以下のようにする必要があります。

バケットを作成したらバケットポリシーを設定します。
オブジェクトの取得だけができる状態にします。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::auto-update-electron-sample/*"
        }
    ]
}

今回はお試しなのでバケットを公開状態で進めていますが、実運用では適切なIAMポリシーを付与したIAMユーザーを作成して、バケットへのアクセスを制限することをオススメします。
Electron Builder側もIAMユーザーのアクセスキーを介してのS3アクセスに対応しているようです。

アプリをパッケージング

更新用ファイルをチェックしにいくエンドポイントを定義します。
builderOptions内が追加した項目です。

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      preload: "src/preload.js",
      builderOptions: {
        appId: "com.app.multi-window-app",
        win: {
          publish: [
            {
              provider: "generic",
              url: "https://auto-update-electron-sample.s3.ap-northeast-1.amazonaws.com/win32/",
            },
          ],
        },
      },
    },
  },
})