仮想Windows環境でのElectronアプリ署名：環境構築からビルドまで

Contents

はじめに
対象読者
技術背景
- USBトークンとCI/CD
課題
解決アプローチ
実装手順
結果と効果
まとめ
参考資料

はじめに

記事のポイント: Macユーザーが仮想Windows環境でElectronアプリをビルドし、USBトークンを使って署名する手順を解説します
技術スタック: Windows (仮想環境), Node.js, Electron, electron-builder, GlobalSign証明書, USBトークン

この記事は前回の「仮想Windows環境でのコード署名方法」と「Mac用グローバルサイン証明書のダウンロード方法」の続編です。前回までに構築した仮想Windows環境と、USBトークンに格納した証明書を使って、実際にElectronアプリケーションをビルド・署名する方法を説明します。

対象読者

USBトークンに証明書を格納済みのMacユーザー
仮想Windows環境が既に構築済みの方
Electronアプリケーションを署名付きでリリースしたい開発者
Windows環境でのNode.jsプロジェクト構築の基本を知りたい方

技術背景

Electronアプリケーションは配布時にコード署名を行うことで、セキュリティ警告を回避しエンドユーザーに安全性を示すことができます。2023年4月以降、コード署名証明書はUSBトークンに格納する必要があり、Macユーザーは仮想Windows環境を利用して署名プロセスを行うことができます。

electron-builderはElectronアプリのパッケージングとコード署名を自動化するツールですが、Windows環境での設定はちょっとした工夫が必要です。特にUSBトークンを使った署名では、適切な設定がないと上手く動作しないことがあります。

USBトークンとCI/CD

実は、USBトークン必須になった影響で、以前はPFXファイルを使ってCI/CDパイプラインで署名を自動化できていたのですが、今では自動化が難しくなっています。「ビルドは自動化、署名は手動」というアプローチを取るしかなくなっているのが現状のように見えます。

MacユーザーがWindowsアプリケーションに署名する場合、この記事で説明する仮想環境アプローチが役に立つでしょう。

課題

仮想Windows環境でのアプリケーション開発と署名には、いくつかの課題があります：

開発環境のセットアップ：エディタ、Git、Node.jsなどの基本ツールを適切に設定する必要があります
プライベートGitHubリポジトリへのアクセス：認証情報を安全に設定するのに一手間かかります
USBトークンからの署名：トークンに格納された証明書を使ってビルドプロセスを設定する必要があります
環境変数の管理：開発、ビルド、署名に必要なパラメータをすべて設定する必要があります

特に、USBトークンに格納された証明書を使ってelectron-builderで署名するには、いくつかの設定手順が必要です。

解決アプローチ

この記事では、以下のアプローチでこれらの課題に取り組みます：

統合開発環境としてCursorエディタを使います（VS Codeでも同様の手順が使えます）
最新の認証方法を使用するためにGitHub CLIでリポジトリアクセスを設定します
USBトークンと連携するようにWindows証明書ストアを設定します
electron-builder用にsigntool.exeのパスと環境変数を設定します

このアプローチにより、本番環境と同じように仮想環境で開発、ビルド、署名ができるようになります。

実装手順

1. 基本的な開発環境のセットアップ

まずはCursorエディタとGitをインストールして、基本的な開発環境を整えます。

Cursorエディタのインストール

https://cursor.sh にアクセス
「Download for Windows」ボタンをクリック
ダウンロードしたインストーラー(.exe)を実行
インストールウィザードの指示に従う

Gitのインストール

https://git-scm.com/download/win にアクセス
64-bit Git for Windows Setupをダウンロード
インストーラーを実行し、基本的にはデフォルト設定でOK
「Adjusting your PATH environment」では「Git from the command line and also from 3rd-party software」を選択

2. GitHub認証の設定（プライベートリポジトリ向け）

最新のセキュリティ基準に沿ったGitHub認証を設定します。

GitHub CLIのインストールと認証設定

# 一時ディレクトリを作成
mkdir -p ~/temp/gh-cli && cd ~/temp/gh-cli

# 最新版をダウンロード（リリースページから最新バージョンを確認して置き換え）
curl -LO https://github.com/cli/cli/releases/download/v2.45.0/gh_2.45.0_windows_amd64.zip

# ZIPを展開
unzip gh_2.45.0_windows_amd64.zip

# binディレクトリにパスを通す（一時的）
export PATH="$PATH:$HOME/temp/gh-cli/gh_2.45.0_windows_amd64/bin"

# 恒久的にパスを通す場合
echo 'export PATH="$PATH:$HOME/temp/gh-cli/gh_2.45.0_windows_amd64/bin"' >> ~/.bashrc
source ~/.bashrc

# GitHub CLIでログイン
gh auth login

# 対話式のプロンプトに従う:
# - GitHub.com を選択
# - HTTPS を選択
# - ブラウザでの認証を選択
# - ブラウザが開くのでGitHubアカウントで認証

Gitの初期設定

# 初回のみユーザー情報を設定
git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"

この設定はコミット履歴に記録されるため、適切に設定しておくことをお勧めします。

3. リポジトリのクローンと開発環境準備

プロジェクトコードを取得し、開発環境を整えます。

GitHubからリポジトリをクローン

# デスクトップなど適当な場所で右クリック→「Git Bash Here」

# GitHub CLI を使用する場合
gh repo clone ユーザー名/リポジトリ名
cd リポジトリ名

# または、HTTPSでクローン
git clone https://github.com/ユーザー名/リポジトリ名.git
cd リポジトリ名

実際のクローン例：

Sasaki@WIN-RF7UMHPTK93 CLANGARM64 ~
$ git clone https://github.com/your-company/your-app-name
Cloning into 'your-app-name'...
remote: Enumerating objects: 246, done.
remote: Counting objects: 100% (246/246), done.
remote: Compressing objects: 100% (124/124), done.
remote: Total 246 (delta 80), reused 212 (delta 46), pack-reused 0 (from 0)
Receiving objects: 100% (246/246), 1.38 MiB | 3.88 MiB/s, done.
Resolving deltas: 100% (80/80), done.

Cursorでリポジトリを開く

Cursorを起動
「File」→「Open Folder」でクローンしたリポジトリのフォルダを選択

これでコード編集の準備が整いました。

4. Node.jsとYarnのインストール

Electronアプリの開発・ビルドに必要なNode.jsとYarnをインストールします。

# Node.jsのインストール（curlを使用）
cd ~/Downloads
curl -O https://nodejs.org/dist/v20.11.1/node-v20.11.1-x64.msi
# ダウンロードしたMSIファイルを実行（エクスプローラーで開く）
explorer .

# インストール後、Git Bashを再起動して確認
node --version
npm --version

# Yarnのインストール
npm install -g yarn

# インストール確認
yarn --version

バージョンが表示されれば、インストールは成功です。最新のLTSバージョンを使うことをお勧めします。

5. コード署名環境の構築

USBトークンからアプリケーションに署名するための環境を整えます。

signtool.exeのパス設定

Windows SDKに含まれるsigntool.exeコマンドにパスを通します。これは前回の記事でWindows SDKをインストール済みであることを前提としています。

# .bashrcファイルに追加（Git Bash用）
echo 'export PATH="$PATH:/c/Program Files (x86)/Windows Kits/10/bin/10.0.26100.0/X64"' >> ~/.bashrc

# 設定を反映
source ~/.bashrc

動作確認：

# signtoolコマンドが利用可能か確認
signtool.exe /?

上記コマンドでヘルプが表示されれば、パスの設定は成功です。実際に使用する際は、署名証明書の名前やタイムスタンプサーバーURLを適切に指定する必要があります。

USBトークンから証明書をエクスポートしWindowsにインポート

トークンの証明書をWindows証明書ストアへ登録することで、署名プロセスが円滑になります。

SafeNet Authentication Clientからの証明書エクスポート

1. SafeNet Authentication Client（SAC）を起動します
2. トークンを選択し、PINコードを入力してログインします
3. 左パネルから「証明書」を選択します
4. 署名に使用する証明書を右クリックし、「エクスポート」を選択します
5. 「DER形式でエンコードされたバイナリX.509 (.CER)」を選択します
6. 保存先とファイル名を指定して保存します（例：`xxx_Cert.cer`）

Windows証明書ストアへのインポート

PowerShellを使用する場合：

# 管理者権限でPowerShellを開き、以下を実行
Import-Certificate -FilePath "C:\path\to\xxx_Cert.cer" -CertStoreLocation Cert:\CurrentUser\My

GUIでも同様の操作が可能です。証明書が正しくインポートされたか確認するには：

# PowerShellで実行
Get-ChildItem -Path Cert:\CurrentUser\My | Where-Object { $_.Subject -like "*xxx*" } | Format-List Subject, Thumbprint

実際のプロジェクトでは、会社名などの部分を適切に置き換えてください。

6. Electronアプリケーションのビルド環境設定

USBトークンでの署名に必要な設定に焦点を当てて説明します。

署名スクリプトの設定

USBトークンを使った署名のために、カスタム署名スクリプトを作成します。以下にsign-with-token.tsの例を示します：

// scripts/sign-with-token.ts
exports.default = async function(configuration) {
    const { path } = configuration;
    const { execSync } = require('child_process');

    console.log(`署名中: ${path}`);

    try {
      execSync(`signtool sign /tr http://timestamp.globalsign.com/tsa/r6advanced1 /fd sha256 /td sha256 /n "あなたの会社名" "${path}"`, 
        { stdio: 'inherit' });
      return true;
    } catch (error) {
      console.error('署名エラー:', error);
      throw error;
    }
};

このスクリプトは、signtoolコマンドを実行してアプリケーションファイルに署名します。重要なポイントは：

/tr オプション：タイムスタンプサーバーのURLを指定
/fd sha256 および /td sha256：署名とタイムスタンプのハッシュアルゴリズムとしてSHA-256を使用
/n "あなたの会社名"：証明書の識別名を指定（Windows証明書ストアから検索するために使用）

package.jsonの設定

electron-builderがこの署名スクリプトを使うように、package.jsonに以下の設定を追加します：

{
  "scripts": {
    "build:win": "yarn build && electron-builder -w --publish=never"
  },
  "build": {
    "win": {
      "sign": "./sign-with-token.ts"
    }
  }
}

この設定により：

yarn build:winコマンドを実行すると、アプリケーションのビルド後にelectron-builderがWindows用パッケージを作成
パッケージング中にsign-with-token.tsスクリプトが実行され、USBトークンの証明書で各ファイルに署名

7. Electronアプリケーションのビルドと署名

最後に、アプリケーションをビルドし、署名します。

アプリケーションのビルド

# プロジェクトディレクトリに移動
cd パス/to/プロジェクト

# 依存関係のインストール
yarn install

# USBトークンが接続されていることを確認

# アプリケーションのビルド
yarn build:win

このコマンドはpackage.jsonに定義されたビルドスクリプトを実行し、electron-builderがアプリのパッケージングと署名を行います。

署名の確認

署名が正常に行われたかをWindowsのUI上から確認する方法：

エクスプローラーで署名されたファイルを探す:
- artifactsフォルダ内のYourApp Setup x.x.x.exeを見つけます
ファイルのプロパティを開く:
- ファイルを右クリックして「プロパティ」を選択します
デジタル署名タブを確認:
- プロパティウィンドウで「デジタル署名」タブをクリックします
- 署名リストに「あなたの会社名」が表示されているはずです
署名の詳細を確認:
- 署名を選択し、「詳細」ボタンをクリックします
- 「証明書の表示」をクリックして証明書情報を確認できます
- ここで発行者情報、有効期限、タイムスタンプなどの詳細が確認できます

デジタル署名タブが正しく表示され、証明書情報が確認できれば、署名は正常に行われています。有効なタイムスタンプが付与されていることも確認しておくと良いでしょう。

結果と効果

この手順に従うことで以下のメリットが得られます：

セキュリティ向上: USBトークンを使用した安全な署名プロセス
自動化: electron-builderによるビルド・署名の自動化
マルチプラットフォーム開発: Mac上の仮想環境でWindowsアプリをビルド可能
安全な配布: 署名済みアプリケーションによる信頼性の確保

私の経験では、この方法を使うことでWindows専用マシンを用意することなく、Macから直接Electronアプリの署名付きビルドを行うことができました。

まとめ

この記事では、Mac上の仮想Windows環境でElectronアプリをビルドし、USBトークンを使って署名する方法を解説しました。この方法を使うことで、以下のことが可能になります：

Mac開発者が物理的なWindowsマシンなしで署名済みWindowsアプリを作成できる
USB証明書の安全性を維持しながらアプリ配布の信頼性を確保できる
開発からビルド・署名までのプロセスを一元管理できる

セキュリティ要件が厳しくなる中、USBトークンを使った署名は重要性を増しています。この記事の手順が、皆さんのアプリ開発・配布の一助となれば幸いです。

参考資料

【Macユーザ】IE非対応でもグローバルサインのサイニング証明書をダウンロードしたいはじめにこの記事の主な目的: Macユーザーが誤った証明書ダウンロード方法を選択した場合の対処法を解説重要な警告: Macユーザー...

【Macユーザ】仮想Windows環境でアプリのコードサイニング署名を実行はじめにこの記事の目的: Mac上に仮想Windows環境を構築し、USBトークンを使ったコード署名を実行する方法を解説前提条件:...

Electron: production環境でのビルド時にのみコード署名したいはじめに Electronアプリケーションの配布において、環境ごとに署名の要否を切り替える方法を紹介します技術スタック：Electr...

electron コードサイニング証明書