Contents
スポンサードリンク
開発環境の準備
このセクションでは、Windows で Electron アプリをビルドするために最低限必要なソフトウェアと設定項目を整理します。正しいバージョンを導入すれば、electron-builder が要求するツールチェーンが自動的に利用できるようになります。
Node.js とパッケージマネージャーのインストール
Node.js は LTS 系列を選択し、npm もしくは Yarn を併用します。以下の手順で環境変数 PATH に自動登録されますので、コマンドプロンプトからすぐに利用可能です。
|
1 2 3 4 5 |
# 1. Node.js LTS（執筆時点 v20.x 系）を公式サイトから取得しインストール # 2. インストーラの「Add to PATH」に必ずチェック # 3. Yarn が必要な場合は npm 経由でグローバルインストール npm install -g yarn |
ポイント
* LTS バージョンは長期サポートが保証され、electron-builderの依存関係と互換性が高くなります。
Windows SDK とビルドツールのセットアップ
| コンポーネント | 推奨取得方法 | 主な設定ポイント |
|---|---|---|
| Windows 10/11 SDK (例: 10.0.22621) | Visual Studio Installer → 「個別コンポーネント」→「Windows 10 SDK」 | インストール後、%ProgramFiles(x86)%\Windows Kits\10\bin\<version>\signtool.exe が PATH に含まれることを確認 |
| C++ デスクトップ開発ワークロード | 同上の「ワークロード」タブで選択 | windows-build-tools の npm パッケージは不要です |
| PowerShell 7.x | https://github.com/PowerShell/PowerShell/releases | スクリプト実行ポリシーは Set-ExecutionPolicy -Scope CurrentUser RemoteSigned 推奨 |
これらをインストールした状態で、コマンドラインから次のコマンドが正常に動作すれば完了です。
|
1 2 |
signtool /? |
本番ビルド ― electron‑builder の活用
Windows 配布ではインストーラ形式とコード署名の自動化が重要です。electron-builder はこれらをシームレスに統合できる唯一のツールとして広く採用されています。
electron‑builder と electron‑packager の比較
| 項目 | electron‑packager | electron‑builder |
|---|---|---|
| ビルド対象 | フォルダ構造の作成のみ | NSIS、MSIX など多様なインストーラを自動生成 |
| 設定方式 | コマンドライン中心 | package.json の build フィールドで一元管理 |
| 署名統合 | 手作業で signtool.exe 呼び出しが必要 |
環境変数だけで自動署名、Azure Key Vault 連携も可能 |
| CI/CD 対応 | スクリプト追加が必須 | デフォルトで Windows/macOS/Linux のパイプライン例を提供 |
結論：Windows 向けにインストーラと署名の自動化が求められる場合、
electron-builderが最適です。
ビルド設定ファイルの基本構成
以下は {{CompanyName}} の製品情報を埋め込んだサンプルです。ロゴやアイコンのパスは自社リポジトリに合わせて変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
{ "name": "my-electron-app", "version": "1.0.0", "main": "main.js", "scripts": { "dist": "electron-builder --win" }, "build": { "appId": "com.example.myapp", "productName": "{{CompanyName}} Desktop", "directories": { "output": "release" }, "files": [ "dist/**/*", "node_modules/**/*", "main.js" ], "win": { "target": [ { "target": "nsis", "arch": ["x64"] }, { "target": "msix", "arch": ["x64"] } ] }, "nsis": { "oneClick": false, "perMachine": true, "allowElevation": true, "installerIcon": "build/icon.ico", "uninstallerIcon": "build/uninstall.ico", "license": "LICENSE.txt", "include": "build/installer.nsh" } } } |
ビルドの実行
|
1 2 |
npm run dist |
上記コマンドだけで release/ に NSIS インストーラと MSIX パッケージが生成されます。次節でコード署名の設定方法を詳しく説明します。
インストーラ作成とコード署名
未署名の実行ファイルは SmartScreen や UAC の警告対象になるため、デジタル署名は必須です。本章では EV 証明書の取得から Azure Key Vault への安全な格納、electron-builder での自動適用手順を解説します。
NSIS インストーラのカスタマイズ
build/installer.nsh に独自ロジックを書き込むことで UI を自由に拡張できます。以下は基本的な設定例です。
|
1 2 3 4 5 6 7 8 9 |
!include "MUI2.nsh" ; カスタムページの挿入例 Page custom CustomPageCreate CustomPageLeave Function CustomPageCreate ; 任意の UI コントロールを配置 FunctionEnd |
ヒント：公式サンプル (
node_modules/electron-builder/templates/nsis) をベースにすると、将来のアップデートにも安全です。
EV 証明書の取得と Azure Key Vault へのインポート
-
証明書購入
DigiCert、GlobalSign 等の認定 CA から「Extended Validation (EV)」証明書（PFX 形式）を取得します。EV 証明書は一般的なコード署名証明書に比べて信頼性スコアが高く、SmartScreen の警告回避率が向上することが実績として報告されています。 -
Key Vault にインポート
|
1 2 3 4 5 6 7 |
# Azure CLI がインストール済みである前提 az keyvault certificate import ` --vault-name {{KeyVaultName}} ` --name {{EVCertName}} ` --file ./path/to/certificate.pfx ` --password $Env:CERT_PFX_PASSWORD |
重要：
CERT_PFX_PASSWORDは GitHub Secrets や Azure Pipelines の変数として安全に管理してください。
ビルド時の自動署名フロー
electron-builder が認識する環境変数は次の 2 つです。CI 環境では必ず シークレット として設定し、平文で保存しないよう注意します。
| 環境変数 | 内容 |
|---|---|
CSC_LINK |
PFX ファイルへのパス（例: ${{ runner.temp }}/cert.pfx） |
CSC_KEY_PASSWORD |
上記 PFX のパスワード |
GitHub Actions の実装例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
name: Build & Sign Windows Installer on: push: tags: - 'v*.*.*' jobs: build-windows: runs-on: windows-latest steps: - uses: actions/checkout@v3 - name: Setup Node uses: actions/setup-node@v3 with: node-version: '20' - name: Install deps run: npm ci - name: Retrieve EV certificate from Key Vault env: AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }} AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }} AZURE_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }} run: | az keyvault secret download \ --vault-name {{KeyVaultName}} \ --name {{EVCertSecretName}} \ --file cert.pfx - name: Build and sign env: CSC_LINK: ${{ github.workspace }}/cert.pfx CSC_KEY_PASSWORD: ${{ secrets.CERT_PFX_PASSWORD }} run: npm run dist |
Azure DevOps Pipelines の実装例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
trigger: - main pool: vmImage: 'windows-2022' variables: NODE_VERSION: '20.x' BUILD_OUTPUT: 'release' steps: - task: NodeTool@0 inputs: versionSpec: $(NODE_VERSION) - script: npm ci displayName: Install dependencies - script: | az keyvault secret download \ --vault-name {{KeyVaultName}} \ --name {{EVCertSecretName}} \ --file $(Agent.TempDirectory)\cert.pfx env: AZURE_CLIENT_ID: $(AZURE_CLIENT_ID) AZURE_TENANT_ID: $(AZURE_TENANT_ID) AZURE_CLIENT_SECRET: $(AZURE_CLIENT_SECRET) - script: npm run dist displayName: Build with signing env: CSC_LINK: $(Agent.TempDirectory)\cert.pfx CSC_KEY_PASSWORD: $(CERT_PFX_PASSWORD) - task: PublishBuildArtifacts@1 inputs: PathtoPublish: '$(BUILD_OUTPUT)' ArtifactName: Installer |
SmartScreen と UAC に対する署名の効果
- SmartScreen はデジタル署名と過去の評価スコアを組み合わせて信頼性を判定します。EV 署名は評価スコア向上に寄与し、警告が表示される確率を低減させます（※保証ではなく「可能性が高まる」ことを示す）。
- UAC のダイアログには「発行元が信頼できる」と表示されるため、ユーザーのインストール意思決定がスムーズになります。
自動更新と CI/CD パイプライン
配布後も安全に最新版を提供するために、electron-updater とクラウドリポジトリ（GitHub Releases）を組み合わせた自動更新フローを構築します。CI/CD に組み込むことで、ビルド・署名・リリースまでの一連作業が完全自動化されます。
electron‑updater の基本設定
package.json の publish セクションに GitHub リポジトリ情報を記述します。{{CompanyName}} のリポジトリ名は適宜置き換えてください。
|
1 2 3 4 5 6 7 8 9 10 11 |
"build": { // 既存の build 設定… }, "publish": [ { "provider": "github", "owner": "{{GitHubOwner}}", "repo": "{{GitHubRepo}}" } ] |
メインプロセスに組み込む更新ロジック
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const { app } = require('electron'); const { autoUpdater } = require('electron-updater'); autoUpdater.on('checking-for-update', () => console.log('Checking for updates…')); autoUpdater.on('update-available', info => console.log(`Version ${info.version} is available`)); autoUpdater.on('update-downloaded', () => { console.log('Update downloaded – will install now'); autoUpdater.quitAndInstall(); }); app.whenReady().then(() => { if (!require('electron-is-dev')) { autoUpdater.checkForUpdatesAndNotify(); } }); |
ポイント：開発環境 (
electron-is-dev) では自動更新を無効化し、テスト時の誤動作を防ぎます。
CI/CD パイプラインでのリリース自動化
GitHub Actions（完全自動リリース）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
name: Build, Sign & Release on: push: tags: - 'v*.*.*' jobs: windows-build: runs-on: windows-latest steps: - uses: actions/checkout@v3 - name: Setup Node uses: actions/setup-node@v3 with: node-version: '20' - run: npm ci - name: Retrieve certificate (same as previous example) # 省略… - name: Build & sign env: CSC_LINK: ${{ github.workspace }}/cert.pfx CSC_KEY_PASSWORD: ${{ secrets.CERT_PFX_PASSWORD }} run: npm run dist - name: Create GitHub Release uses: softprops/action-gh-release@v1 with: files: release/*.exe generate_release_notes: true |
Azure DevOps Pipelines（マルチプラットフォーム例）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
trigger: - main variables: NODE_VERSION: '20.x' BUILD_DIR: 'release' stages: - stage: Build_Windows jobs: - job: BuildAndSign pool: vmImage: 'windows-2022' steps: - task: NodeTool@0 inputs: versionSpec: $(NODE_VERSION) - script: npm ci displayName: Install dependencies - script: | az keyvault secret download \ --vault-name {{KeyVaultName}} \ --name {{EVCertSecretName}} \ --file $(Agent.TempDirectory)\cert.pfx env: AZURE_CLIENT_ID: $(AZURE_CLIENT_ID) AZURE_TENANT_ID: $(AZURE_TENANT_ID) AZURE_CLIENT_SECRET: $(AZURE_CLIENT_SECRET) - script: npm run dist displayName: Build with signing env: CSC_LINK: $(Agent.TempDirectory)\cert.pfx CSC_KEY_PASSWORD: $(CERT_PFX_PASSWORD) - task: PublishBuildArtifacts@1 inputs: PathtoPublish: '$(BUILD_DIR)' ArtifactName: WindowsInstaller |
これらのパイプラインは タグプッシュ（バージョン管理）をトリガーに、署名済みインストーラを自動生成し、GitHub Releases または Azure Artifacts に公開します。electron-updater がリポジトリから最新アセットを取得するため、エンドユーザーはワンクリックでアップデートできます。
MSIX パッケージと配布後のトラブルシューティング
企業内配布や Microsoft Store への掲載が必要な場合、MSIX が推奨フォーマットです。ここでは MSIX のビルド手順と、実運用で遭遇しやすいエラーへの対処法をまとめます。
MSIX ビルド設定（{{CompanyName}} 用サンプル）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
"build": { // 既存の build 設定… "msix": { "displayName": "{{CompanyName}} Desktop", "identityName": "com.example.myapp", "publisher": "CN=YourCompany, O=YourOrg, L=Tokyo, S=Tokyo, C=JP", "logoPath": "build/store-logo.png", "protocolActivation": [ { "protocol": "myapp", "host": "open" } ], "signingIdentity": { "file": "./cert.pfx", "password": "${CSC_KEY_PASSWORD}" } }, "win": { "target": [{ "target": "msix", "arch": ["x64"] }] } } |
MSIX のみ生成するコマンド
|
1 2 |
npm run dist -- -c.nsis=false # NSIS 出力を抑制し、MSIX パッケージだけを作成 |
配布後に起きやすいエラーと解決策
| 現象 | 主な原因 | 推奨対処 |
|---|---|---|
| SmartScreen が「未知の発行元」と表示 | 証明書が EV でない、または署名期限切れ | EV 証明書に更新し、signtool verify /pa <exe> で有効性を確認 |
| UAC に「このアプリの発行元は不明です」 | publisherId が Windows Store の証明書と不一致 |
MSIX の publisher フィールドを Azure AD 証明書と完全一致させる |
| 自動更新が検出されない | GitHub Releases に latest.yml が欠如 |
ビルド時に electron-builder --publish=always を付与し、メタ情報を自動生成 |
| MSIX インストールで「署名が無効」エラー | PFX のパスワードが間違っている、または環境変数未設定 | 環境変数 CSC_KEY_PASSWORD が正しいか再確認し、signtool verify /pa <msix> で検証 |
| アプリ起動時に依存ランタイムエラー | 必要な Visual C++ 再頒布パッケージが未インストール | インストーラの dependencies に Microsoft.VCRedist.2015+ を追加 |
ベストプラクティス：CI パイプラインに「署名検証ステップ」を組み込み、ビルド完了後に自動で
signtool verifyを実行してエラーを早期に捕捉します。
まとめ
- 環境構築：Node.js LTS + Windows SDK → 必要ツールは PATH に追加。
- ビルド選択：インストーラ自動生成とコード署名の容易さから
electron-builderが最適。 - 署名：EV 証明書を Azure Key Vault で安全管理し、
CSC_LINK/CSC_KEY_PASSWORDにより CI/CD へ自動供給。 - 更新：
electron-updaterと GitHub Releases の組み合わせでシームレスな自動アップデートを実現。 - MSIX：企業・Store 向けは MSIX を生成し、署名とメタ情報の整合性を CI で検証。
上記手順に沿って構築すれば、{{CompanyName}} の Windows デスクトップアプリは 安全・信頼性・継続的配布 が実現でき、ユーザー体験の向上と運用コスト削減が期待できます。
スポンサードリンク