Windows企業内プロキシ配下でcreate-react-app（yarnを使う）

はじめに

当社のLANはプロキシサーバー経由でインターネットへ接続する構成です。Reactアプリケーションを社内で制作するため、プロキシ経由で通信をするようネット情報を参考にしましたが非常に苦戦。

npx create-react-app <application name>

で固まってしまい、netstat コマンドで観察するとダイレクト接続しようとしています。

その後なんとかインストールできたので、方法を共有します。

環境

• Windows 10
• Node.js v12.10.0
• npm 6.10.3
• yarn 1.17.3

方法

Node.js(+npm) と yarn 導入済みとします。

まずはプロキシサーバーへの通信設定

プロキシ設定

npm -g config set proxy http://host:port
npm -g config set https-proxy http://host:port
npm -g config set registry http://registry.npmjs.org/
npm -g config set strict-ssl=false
yarn config set proxy http://host:port -g
yarn config set https-proxy http://host:port -g

create-react-app準備

npm -g install create-react-app
yarn global add react react-dom react-scripts react-scripts-ts
@rem react-scripts-ts は TypeScript を使うとき

これで、キャッシュさせることが解決の鍵。このあと

reactアプリケーション作成

create-react-app <application name>
@rem または create-react-app <application name> --typescript

で、React のアプリケーションディレクトリが準備されるでしょう。

さいごに

環境構築がうまくできないことで、React導入を諦めてしまうケースも多いと思います。勿体ない！！

Microsoft 社などでも企業内プロキシの存在が蔑ろにしている傾向を感じることがしばしばですが（WindowsUpdate などの標準機能利用に netsh winhttp¹ やらbitsadmin² やらコマンドを打て、とか）プロキシ導入を止めさせる何かの戦略なのかと穿ってしまいます。かつては自ら[ISAサーバー](Microsoft Internet Security and Acceleration Server)という製品も出していたのに...

誤り・冗長なこと、もっと簡単な方法がある、などありましたらご指摘くださいませ！

余談ですが、このような社内のプロキシサーバーを、一定の外国圏のお方たちは corporate proxy などと呼んでいるようです。

参考にしたサイト（感謝！）

• node.js – 企業ファイアウォールの内側でcreate-react-appを使用する - コードログ さん

1. https://qiita.com/gitya107/items/9302c07412e4990b1121 - @gitya107 さん ↩

2. https://ranp.myds.me/wordpress/2018/12/14/post-176/ - Noobest Engineering meiryoさん ↩