放課後TechTime

単なる個人の備忘録です。

Electron のビルド環境構築からビルド実行までの手順

概要

ドキュメントを見ながら Electron のビルド環境構築からビルドの実行までをやってみたもの。

  • Electron でアプリを作る手順ではなくて、Electron そのもの(つまり electron.exe)をビルドする方法をまとめた。
  • 注意:Electron のビルドは Chromium もビルドすることになるので、初回ビルドは非常に時間がかかる。8 コアのサーバーで 10~12時間かかった。

環境

Azure 上にビルド用のVMを構築。

  • Windows Server 2019 (英語版)
  • Standard D8s_v4 (8 vcpus, 32 GiB memory)
  • Disk : 128GB

参考ドキュメント

構築手順

必要なツール類のインストール

  1. Visual Studio 2019(Community版で可)をインストール。以下のオプションを選択してインストールを実行。
    • Desktop development with C++
    • 右側のInstallation details から以下を選択
      • C++ ATL for latest v142 build tools (x86 & x64)
      • C++ MFC for latest v142 build tools (x86 & x64)
    • [Indivisual components] タブを開く
      • Windows 10 SDK で検索をして、10.0.19041 かそれ以降のものをチェック
        • 今回は Windows 10 SDK (10.0.19041.0) をチェック
        • デフォルトでチェックされてた Windows 10 SDK (10.0.18362.0) そのまま残した
    • インストール先はデフォルトのまま
    • インストールを実行
  2. Debugging Tools For Windows の追加
  3. 例えばこんな手順で追加
    • Control Panel → Programs → Programs and Features → Select the “Windows Software Development Kit - Windows 10.0.19041.1” → Change → Change → Check “Debugging Tools For Windows” → Change
  4. Python 2.7.10 以降のインストール
    • 2系の最新版である 2.7.18 をダウンロードしてインストールを実行
    • インストールの途中、Customize Python 2.7.18 (64-bit) の画面で Add python.exe to Path を有効にする
  5. Python for Windows (pywin32) のインストール
    1. ここからダウンロード https://pypi.org/project/pywin32/#files
      • ファイル名の cpXX が Python のバージョンらしい。 あと、その後ろの win32 や win_amd64 を見て自分の環境に合うものを選ぶ。今回は pywin32-228-cp27-cp27m-win_amd64.whl を選択。
    2. コマンドプロンプトでダウンロードしたフォルダに移動して、以下を実行
      • pip install pywin32-228-cp27-cp27m-win_amd64.whl
  6. Node.js のインストール
    • 今回は 12.19.0 LTS をインストールした
  7. Git のインストール (https://git-scm.com/)
    • 今回は 2.28.0 をインストールした

Electron Build Tools のインストール

参考:https://github.com/electron/build-tools

  1. yarn のインストール
  2. Electron Build Tools をグローバルにインストールする

ソースコードの取得とビルド

C:\Dev は自分の環境の作業用ディレクトリ。以下のコマンドを実行。

C:\Dev>e init --bootstrap testing
  • e は Electron Build Tool のコマンド
  • e は以下のサブコマンドを持つ
    • init : e init はビルド用の Configuration を作るコマンド
      • この例では testing という名前の Configuration を作っている
    • sync : Chromium depot_tools の 'gclient sync' コマンドのラッパー
    • build : Electron の実行ファイルをビルドする
  • --bootstrap オプションは e init の後に自動で e synce build を実行してくれる。
    • つまり、ビルドが走る。コマンドが完了するまで10~12時間かかった。
    • 最新の master ブランチでビルドされる。
  • e init 実行直後にいろいろ聞かれるが基本的には全て y を押せばよいと思う。
  • ビルド後のバイナリは、この例だと C:\Dev\electron\src\out\Testing\electron.exe に生成される
  • e inite buildgoma_ctl.py ensure_start の処理でハングしてしまうことがある。Ctrl+C で中断してから、再度同じコマンドを実行すると前に進んだ。修正済みに見えるが、まだ問題があるのか?
  • master 以外のブランチでビルドすることもできるらしいが試してない

https://github.com/electron/build-tools/issues/145

Unfortunately, at this point, Electron with build-tools can't be switched over to 7-3-x
owing to differences in dependencies (win toolchain, xcode etc) at the Chromium level. 
The normal flow:

$ git checkout x-y-z
$ e sync -vvvv
$ e build
Should work as expected for all newer branches.

ビルド環境詳細

ソースツリーの構造

Chromium のソースやビルドツール群がダウンロードされて、その中に Electron と Node(Electron版?)が組み込まれるらしい。つまり、ビルド環境の本体はあくまで Chromium

Chromium のソース(C:\Dev\electron\src):

C:\Dev\electron\src>git remote -v
origin  C:\Users\<UserName>\.git_cache\chromium.googlesource.com-chromium-src (fetch)
origin  https://chromium.googlesource.com/chromium/src.git (push)

Electron のソース(C:\Dev\electron\src\electron):

C:\Dev\electron\src\electron>git remote -v
origin  git@github.com:electron/electron.git (fetch)
origin  git@github.com:electron/electron.git (push)

Node.js のソース? (C:\Dev\electron\src\third_party\electron_node)

C:\Dev\electron\src\third_party\electron_node>git remote -v
origin  git@github.com:electron/node.git (fetch)
origin  git@github.com:electron/node.git (push)

参考資料