当記事は、プロキシ環境下でElectronを用いた開発に着手すべくnpm install electronを試したは良いものの、エラーに阻まれてコーディングに辿り着けない悲しみを背負った技術者へ向けた備忘録です。
1.対象読者
- プロキシ環境下での
npm installに失敗する人 - プロキシ環境下での
npm install electronに失敗する人
2.筆者環境
- Windows11
- Node.js v22
2.そもそもElectronとは
Electron は、JavaScript、HTML、CSS によるデスクトップアプリケーションを構築するフレームワークです。 Electron は Chromium と Node.js をバイナリに組み込むことで、単一の JavaScript コードベースを維持しつつ、ネイテイブ開発経験無しでも Windows、macOS、Linux で動作するクロスプラットフォームアプリを作成できます。
https://www.electronjs.org/ja/docs/latest/ より
HTML・CSS・JavaScriptといった、Webフロントエンドで使用される言語を用いて、デスクトップアプリを作れるフレームワークです。
Windows・macOS・Linuxに対応したマルチプラットフォームなアプリを1つのソースコードから生成出来る点も大きな魅力でしょう。
みなさんご存知超有名コードエディター 『Visual Studio Code』 君もElectronを使って開発されていたりします。
3. 対処法
そもそもの話、プロキシ環境下でnpm installを行うには、
> npm -g config set proxy http://proxy:port
> npm -g config set https-proxy http://proxy:port
によるnpmへのプロキシ設定が必要です。
環境変数のHTTP_PROXYまたはhttp_proxyへの設定でも可なため、そちらで対応するのも良いでしょう。
これで凡そのnpmパッケージは問題なくインストールできるようになります。
ただし、この記事へ辿り着いた皆様に於かれましてはElectronではご失敗なされていることかと存じます。
Electronをインストールするための個別対応
https://www.electronjs.org/docs/latest/tutorial/installation#proxies
にも記載されていましたが、
ELECTRON_GET_USE_PROXY=true
GLOBAL_AGENT_HTTPS_PROXY=http://proxy:port
をそれぞれ環境変数へ設定すると、インストールできるようになりました。
Electronのインストール時には、npmにセットされているものとはまた別項目でのプロキシ設定が必要となる様子ですね。なんでさ
5. それでも動かなかった人へ
なぜこれで解決したのか分からないんですが、 筆者はcmdやvscodeのターミナルからのインストールを辞めて、powershellを起動して
npm install electron
を行ったところ、無事にインストールできました。
cmdやvscodeで
$env:ELECTRON_GET_USE_PROXY
を行っても返値がnullだったところ、powershellでは
$env:ELECTRON_GET_USE_PROXYに対してtrue
が戻って来たので、その違いかもしれません。なんでそんな違いが出るのかは不明です
ご参考までに。
6.参考文献
https://qiita.com/ota-meshi/items/69ed2333ed2ba0768178
https://aquasoftware.net/blog/?p=927
https://qiita.com/LuckyRetriever/items/2f377b1ce34f7d12903c
https://maku.blog/p/t7gqxyf/
https://www.electronjs.org/docs/latest/tutorial/installation#proxies
http://electronjs.org/ja/docs/latest/