Windows+WSL2+nodebrewでReactの開発環境を作った
Jul 25, 2021 08:35 · 2017 words · 5 minute read
今月の目標として、Yuki Sonodaさん（Yuguiさん）がQuoraに記載していた学習方法を実践してみることを掲げています。
2021年6月の振り返りと2021年7月の目標 · kapieciiのブログ
今回学習の題材にしたのはReact。
Reactのチュートリアルは以前やったことがあるのですが、「とりあえずやってはみたが、わかったようなわからないような？」というモヤッとした感想が残っています。
チュートリアル：React の導入 – React (reactjs.org)
公式チュートリアルよりも腹落ち感の良さそうな教材を探したところ、トラハックさんのYouTube動画を見つけたので、今回はこちらで学習しました。
トラハックさんが公開してくれている「新・日本一わかりやすいReact入門」の動画では、Yuguiさんの学習ステップの内
- 動かしてみる
- 概念理解
- 実例（＋実際の開発案件で役立ちそうなTipなど）
あたりを学ぶことができます。
というわけで、動画を一通り見たのでローカルに環境構築をしてみました。
目次
TL;DR
- Windows + WSL2(Ubuntu) + nodebrewでReactの環境を作ってみたが、開発サーバの起動とホットリロードが非常に遅く、実用的ではなかった。
- 次はMicrosoftのドキュメントで使われていたnvmを使ってみる。
後日追記。
こちらの記事に、nvm、とdockerをを試した結果と、速度が遅かった原因について書きました。
(続き)Windows+WSL2でReactの開発環境を作った · kapieciiのブログ
環境
- Windows10 Pro 21H1
- WSL2
- Ubuntu 18.04
Node.jsインストール
これまでNode.jsは少し触ったことがある程度で、ほとんど経験がありません。
Ubuntu標準のパッケージマネージャーであるaptではNode.jsのバージョンが古かったりするらしいので、今回はトラハックさんも使っていたnodebrewを使ってみます。
hokaccha/nodebrew: Node.js version manager (github.com)
nodebrewインストール
今回の環境では、Node.jsは入っていない状態です。
すでにNode.jsがインストールされている場合は、インストール済みのNode.jsは削除します。
$ nodejs
Command 'nodejs' not found, but can be installed with:
sudo apt install nodejs
nodebrewはコマンド一発でインストールできます。
$ curl -L git.io/nodebrew | perl - setup
ダウンロードが終わったら、bash_profileにパスを通しておきます。
export PATH=$HOME/.nodebrew/current/bin:$PATH
Terminalを再起動して動作を確認。
$ nodebrew help
nodebrew 1.1.0
Usage:
nodebrew help Show this message
nodebrew install <version> Download and install <version> (from binary)
nodebrew compile <version> Download and install <version> (from source)
nodebrew install-binary <version> Alias of `install` (For backward compatibility)
nodebrew uninstall <version> Uninstall <version>
nodebrew use <version> Use <version>
nodebrew list List installed versions
nodebrew ls Alias for `list`
nodebrew ls-remote List remote versions
nodebrew ls-all List remote and installed versions
nodebrew alias <key> <value> Set alias
nodebrew unalias <key> Remove alias
nodebrew clean <version> | all Remove source file
nodebrew selfupdate Update nodebrew
nodebrew migrate-package <version> Install global NPM packages contained in <version> to current version
nodebrew exec <version> -- <command> Execute <command> using specified <version>
Example:
# install
nodebrew install v8.9.4
# use a specific version number
nodebrew use v8.9.4
nodebrewのインストールができました。
Node.jsのインストール
2021年7月時点の安定版をインストールします。
$ nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v16.5.0/node-v16.5.0-linux-x64.tar.gz
################################################################################################################# 100.0%
Installed successfully
$ nodebrew ls
v16.5.0
current: none
$ nodebrew use v16.5.0
use v16.5.0
起動確認
$ node -v
v16.5.0
Create React App
Create React Appして開発サーバを起動してみます。
$ npx create-react-app react-basic
$ cd react-basic/
$ npm start
無事にWSL2のUbuntuからReactの開発サーバが起動しました。
困りごと
無事にWindows上でReactの環境を構築できたかに思えたのですが、だがしかし・・・。
開発サーバの起動が非常に遅い。
あまりに遅いので起動にかかる時間を測ってみたところ、
npm startから開発サーバが起動し、ブラウザのタブが開くまでに約2分20秒、
ブラウザ上にReactのロゴが表示されたのは4分15秒後でした。
ホットリロードも同様に遅いです。
これでは開発環境としてはあまりに辛い。
なぜ遅いのかも気になるところですが、原因究明は本来の目的ではないので、別の環境を模索してみます。
候補としてはDockerがよいでしょうか。
最後に
Windows + WSL2(Ubuntu)でReactの環境を作ってみたが、開発サーバの動作が遅すぎて使うのは辛い、というお話でした。
MicrosoftのドキュメントでもWSLを使ったReactの開発環境について書かれているので、遅いのは私の環境に依存した問題なのかもしれません。
もしくはnodebrewとWSL2の相性か？
Linux 用 Windows サブシステムに React をインストールする | Microsoft Docs
というようなブログ記事を書いていたら、Microsoftのドキュメントではnvmを使用していました。
こちらでも試してみよう。
WSL 2 上で Node.js を設定する | Microsoft Docs
後日追記。
試した結果を書きました。速度が遅かった原因も判明しました。