schedule2021-08-28

electron-builderとnsisでWindowsアプリのインストーラの設定まとめ

electonのアプリをビルドするためにelectron-builderを利用しています。 Windows版のインストーラの作成はNSISというスクリプト型のインストールシステムで作ります。

色々と調べてなんとなく全体を把握できたので、まとめて紹介します。

動作確認環境

electron-builderがそれなりに新しければ特に問題はないと思います。

確認しているのはElectron + Vuejsのちょっと特殊な環境です。

  • Windows 10 Home
  • vue-cli-plugin-electron-builder: ~2.0.0-rc.5
    • electronでVueが使えるプラグイン
    • electron-builder: ^21.2.0 -> 22.2.0 に依存しています。

vue-cli-plugin-electron-builderの内部でelectron-builderを利用してます。 electron-builderの最新もv22.11.7ですのでそこまで古いわけではなさそう。

electron-builderの設定

インストーラの設定は基本的にpackage.jsonbuildオプションにelectron-builderの設定を書いていきます。 (vue-cli-plugin-electron-builderの場合はvue.config.jsのbuilderOptionsに書く)

▼ 配布用のWindowsアプリを作る場合は大体こんな感じになっていると思います。 コメントを書きたいのでjsoncで書いていますがJSONに読み替えてください。

"build": {
  "appId": "jp.example.myapp",
  "productName": "アプリの名前(日本語OK)",
  "mac": {/* Macの設定 */},
  "dmg": {/* Macの設定 */},
  // Windowsの設定
  "win": {
    "icon": "path/to/icon256.png",
    "target": {
      // Windowsインストーラー
      "target": "nsis",
      "arch": ["x64"]
    },
    // Windowsアプリのコード証明
    "certificateFile": "./path/to/コード証明書.pfx",
    "publisherName": "SUZU6",
    "certificatePassword": "xxxxxxxxx",
    // インストーラのアップ先
    "publish": {
      // https://www.electron.build/configuration/publish#s3options
      "provider": "s3",
      "bucket": "bucket",
      "region": "ap-northeast-1",
      "storageClass": "STANDARD",
      "path": "/installer"
    }
  },
  // インストーラの設定
  "nsis": {
    // https://www.electron.build/configuration/nsis
    // インストーラの名前
    "artifactName": "${productName}_setup_${version}.${ext}",
    // 設定スクリプトのパス
    "include": "build/installer.nsh",
    "oneClick": false,
    "allowToChangeInstallationDirectory": false,
    "createDesktopShortcut": false,
  },
}

NSISを使うためbuild.win.target.target: nsisとしてください。 そして、build.nsisに設定を書いていきます。

electron-builderのnsisの設定

利用したり調べて分かった項目を紹介します。

key type default discription
artifactName string ${productName} Setup ${version}.${ext} インストーラのファイル名変数についてはFile Macrosを参照
include string build/installer.nsh NSISスクリプトのパスbuild/installer.nshといったファイルを用意してインストーラを拡張できる。
script string build/installer.nsi NSISスクリプトのパス拡張子が.nsi
allowToChangeInstallationDirectory長いので分割 boolean false ユーザーがインストールディレクトリを変更できるようにするかどうか。
installerIcon string アプリのアイコン(build.win.icon)と同じ 画像のパス
uninstallerIcon string アプリのアイコン(build.win.icon)と同じ 画像のパス
installerIcon string
oneClick boolean true ワンクリックインストーラを利用するか。インストーラを拡張しない場合は利用した方が分かりやすいと思う。
createStartMenuShortcut boolean true スタートメニューのショートカットを作成するかどうか
createDesktopShortcut boolean true デスクトップにショートカットを作るか
shortcutName string アプリ名 すべてのショートカットの名前

ファイル名などで利用できるマクロ

ファイル名などの文字列にはFile Macrosが使えます。

key discription
${arch} ia32, x64
${os} ターゲットプラットフォームに応じてmaclinuxまたはwin
${platform} darwinlinuxまたはwin32といったprocess.platformのプロパティ
${name} package.jsonname
${productName} 製品名
${version} バージョン
${channel} バージョンからプレリリースコンポーネントが検出されました(例 beta
${env.ENV_NAME} 任意の環境変数

他にAppInfoの任意のプロパティが利用できます(例 buildVersionbuildNumber)。

NSISスクリプト

インストーラをもっと拡張したい場合はNSISスクリプトで細かく設定できる。

Custom NSIS script - www.electron.build

electronのnsisプロパティのscriptincludeでスクリプトのファイルパスを渡して読み込むことができます。

インストーラにスタートアップのチェックボタンをつけて、スタートアップに登録させることができたのでそのスクリプトを次の記事で紹介しています。

私は正直いまいち書き方を理解していない。 下のリンクを読んでスタートアップ

NSISで使える変数

ちょっとしたTips。

NSISスクリプトで適当な変数を書いてビルドするとその変数は定義されていないとエラーが出る。 その際に、定義されている変数が一覧で出てくるので確認しておくと自由度が上がると思う。

ただし、NSISはShift-jisでエラーが出るため日本語は文字化けする。

下記のように出てくる。

# ビルドに失敗した
ExecError: C:\Users\user\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\Bin\makensis.exe exited 
with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Output:

Output:
Command line defined: "APP_ID=jp.example.myapp"
Command line defined: "APP_GUID=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Command line defined: "UNINSTALL_APP_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Command line defined: "PRODUCT_NAME=�J��@�|@�|�b�v��A�b�v"  # 文字化け
Command line defined: "PRODUCT_FILENAME=�J�C�@�|�b��N�b�v"    # 文字化け
Command line defined: "APP_FILENAME=myapp"
Command line defined: "APP_DESCRIPTION=My electron app"
Command line defined: "VERSION=1.0.0"
Command line defined: "PROJECT_DIR=C:\git\myapp"
Command line defined: "BUILD_RESOURCES_DIR=C:\git\myapp\build"
Command line defined: "APP_PACKAGE_NAME=myapp"
Command line defined: "MUI_ICON=C:\git\myapp\dist_electron\.icon-ico\icon.ico"
Command line defined: "MUI_UNICON=C:\git\myapp\dist_electron\.icon-ico\icon.ico"
Command line defined: "APP_64=C:\git\myapp\dist_electron\myapp-1.0.0-x64.nsis.7z"
Command line defined: "APP_64_NAME=myapp-1.0.0-x64.nsis.7z"
Command line defined: "APP_64_HASH=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
Command line defined: "COMPANY_NAME=SUZU6"
Command line defined: "APP_PRODUCT_FILENAME=�J�C�N���@�|�b�v�A�b�v"
Command line defined: "COMPRESSION_METHOD=7z"
Command line defined: "MULTIUSER_INSTALLMODE_ALLOW_ELEVATION"
Command line defined: "INSTALL_MODE_PER_ALL_USERS_REQUIRED"
Command line defined: "SHORTCUT_NAME=�J�C�N���@�|�b�v�A�b�v"
Command line defined: "UNINSTALL_DISPLAY_NAME=�J�C�N���@�|�b�v�A�b�v 1.0.0"
Command line defined: "MUI_WELCOMEFINISHPAGE_BITMAP=${NSISDIR}\Contrib\Graphics\Wizard\nsis3-metro.bmp"     
Command line defined: "MUI_UNWELCOMEFINISHPAGE_BITMAP=${NSISDIR}\Contrib\Graphics\Wizard\nsis3-metro.bmp"   
Command line defined: "ESTIMATED_SIZE=18823"
Command line defined: "COMPRESS=auto"
Command line defined: "UNINSTALLER_OUT_FILE=C:\git\myapp\dist_electron\__uninstaller-nsis-myapp.exe"    
Processing config: C:\Users\user\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\nsisconf.nsh    
Processing script file: "<stdin>" (ACP)
warning 6000: unknown variable/constant "APP_NAME.lnk" detected, ignoring (C:\git\myapp\build\installer.nsh:10)

参考