Quden Dev Doc

Appearance

Desktop Application Windows 開発 ​

Windows における Desktop Application の開発について記載しています。

ローカル開発 ​

ローカル開発環境を開始する前に、下記のコマンドを実行して Native module を事前にビルドしておく必要があります。

ビルド時の環境条件:

  • Node.js v20.x
  • Python v3.11.x
bash
# x64 architecture (windows) の場合
yarn run build-addons:x64:win

ローカル開発環境を開始するには、下記のコマンドを実行します。

bash
# ローカル開発
yarn run start

# staging 環境を用いた開発
yarn run start:staging

# production 環境を用いた開発
yarn run start:prod

それぞれのコマンドは、各環境ごとに用意された .env.[development|staging|prod] ファイルを読み込みます。 ファイルが存在しない場合は随時作成してください。

下記に、各環境で利用する .env ファイルの内容を示します。

bash
# .env.development
APP_ENV_NAME="development"
bash
# .env.staging
BASIC_AUTH_USERNAME="<BASIC 認証のユーザー名を記入してください>"
BASIC_AUTH_PASSWORD="<BASIC 認証のパスワードを記入してください>"
APP_ENV_NAME="staging"
bash
# .env.production
APP_ENV_NAME="production"

ローカル開発時の Tips ​

Package されたアプリのログを見る方法 ​

Electron 内のログは electron-log というモジュールを利用しています。

logger.info() などの関数を利用することでログを出力することができ、出力先は下記の通り設定されています。

  • コンソール
  • ファイル
    • %USERPROFILE%\AppData\Roaming\{app name}\logs\main.log (Windows)

ファイルに保存されたログを見る際は、下記コマンドを実行することでログをリアルタイムに表示することができます。

bash
# windows (powershell)
Get-Content -Path "$env:USERPROFILE\AppData\Roaming\Quden\logs\main.log" -Wait -Tail 50

VSCode の live share を使って mac から開発する ​

Windows 端末側で VSCode live share のリンクを発行し、mac 側から参加することで、mac 側でコードを触りつつ windows 機で挙動を確かめることができます。

ssh-agent を開始する ​

powershell
Get-Service -Name ssh-agent | Set-Service -StartupType Manual
Start-Service ssh-agent

ssh private key を ssh-agent に追加する ​

bash
ssh-add C:\Users\YOU/.ssh/id_ed25519

node のプロセスを終了する ​

powershell
Get-Process node | Stop-Process

Signtool のパスを通す ​

powershell
# signtool のパスを通す
$Env:Path += ';C:\Program Files (x86)\Windows Kits\10\App Certification Kit'

# Path が通っているかのテスト
SignTool /?

ビルド ​

ビルドコマンド ​

ビルドは、下記のコマンドを実行することで行うことができます。

bash
# windows で x64 architecture のアプリをビルドする
yarn run make:x64:win:prod

💡 yarn run make の実体は electron-forge make です。このコマンドは、packaging と make の2つの処理を行ってくれます。(つまり、yarn run package を内包しています。)

下記でも同様にビルドを行うことができます。(dry-runを指定することに注意する)

bash
# dry run 実行をする。 macOS 同様に `out/make` 配下に成果物が作成されます。
yarn run publish:x64:win:prod:dry-run

配布 ​

Windows アプリを配布する際にやることは下記の通りです。

  • 1: アプリのビルド yarn run publish:x64:win:prod:dry-run
  • 2: アプリの署名 yarn run sign:win '.\out\make\squirrel.windows\x64\Quden-<version> Setup.exe'
  • 3: アプリの公開 (GitHub Release) yarn run publish:x64:win:prod:from-dry-run
  • 4: 最新版 .exe ファイルを zip 圧縮し、S3 内 /public/assets/Quden-exe-latest.zip として配置する
    • CDN に配置している背景はこちら参照のこと