schedule2021-08-28

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

ElectronまとめNodejsJavaScriptWindows

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.jsonのbuildオプションに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の設定

https://www.electron.build/configuration/nsis.html こちらは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}`	ターゲットプラットフォームに応じて`mac`、`linux`または`win`
`${platform}`	`darwin`、`linux`または`win32`といった`process.platform`のプロパティ
`${name}`	`package.json`の`name`
`${productName}`	製品名
`${version}`	バージョン
`${channel}`	バージョンからプレリリースコンポーネントが検出されました（例 `beta`）
`${env.ENV_NAME}`	任意の環境変数

他にAppInfoの任意のプロパティが利用できます（例 buildVersion、buildNumber）。

NSISスクリプト

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

Custom NSIS script - www.electron.build

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

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

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

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)