(続き)Windows+WSL2でReactの開発環境を作った

Aug 1, 2021 23:50 · 3015 words · 7 minute read react Windows WSL Node.js

この記事は、こちらの記事の続きです。

Windows+WSL2+nodebrewでReactの開発環境を作った · kapieciiのブログ

TL;DR

前回の記事と今回の記事で

  • Windows + WSL2 + nodebrew
  • Windows + WSL2 + nvm
  • Windows + Docker

でReact環境を作り、速度を比較してみました。
結果は、どの環境も速度面で難があり、実用には耐えない印象。

原因は、「ReactのソースコードをWindowsのファイルシステムに置いていたが、WSL2からWindowsのファイルシステムにアクセスする速度が極端に遅い」ということでした。
Windows + WSL2でReactの開発をする場合は、WSL2のファイルシステム上で作業しましょう。

目次

前回の振り返り

前回の記事でWindows + WSL2 + nodebrewでReactの開発環境を作りましたが、動作が非常に遅く、開発に使うには難ありでした。

今回はMicrosoftの公式ドキュメントでNode.jsの開発環境として紹介されているnvmを使ってみます。

nvmを使ってみる

nvmインストール

nvmはMicrosoftの公式ドキュメントでも紹介されています。

WSL 2 上で Node.jis を設定する | Microsoft Docs

nvmのGitHubのドキュメントに従ってインストールします。

nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions (github.com)

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

~/.bashrcに下記が追加されていたのでsorceを実行し、動作確認。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

動作を確認

$ source ~/.bashrc
$ nvm

Node Version Manager (v0.38.0)

まだNode.jsがインストールされていないので、インストールします。

$ nvm ls
            N/A
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

今回はLTS版をインストールします。

$ nvm install --lts
$ nvm ls
->     v14.17.3
default -> lts/* (-> v14.17.3)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v14.17.3) (default)
stable -> 14.17 (-> v14.17.3) (default)
lts/* -> lts/fermium (-> v14.17.3)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.3 (-> N/A)
lts/fermium -> v14.17.3

nodebrewではv16.5.0がstableだったので、nvmのlts版の方が少し古いです。

$ node --version
v14.17.3

npmコマンドが実行できることを確認。

$ npm --version
6.14.13

これでnvmを使ったnode環境の準備ができました。

Create React App

前回と同じく、下記のコマンドを実行。

$ npx create-react-app react-and-nvm
$ cd react-and-nvm/
$ npm start

動作を確認したところ、こちらも「快適に動作する」とは言い難い状況でした。
nodebrewよりはいくらか早かったですが、それでも「$ npm start」から開発サーバが起動してブラウザに描画されるまでに約2分。
ホットリロードも同程度の時間がかかります。

nvmを使った今回の環境はMicrosoftのドキュメントに記載してある方法のはずなのですが、この遅さはちょっと厳しいような。
「自分のマシンのスペックが低すぎる」という可能性も考えられますが。

Dockerを使ってみる

nvmを使った環境も実用に耐えるとは言い難い動作速度でした。
WSL2の利用は諦め、Dockerを試してみます。

今回使ったDockerFileとdocker-compose.ymlはこちら。
先程Create React AppしたReactアプリをDockerコンテナ上で実行してみます。

$ cat Dockerfile
FROM node:14.5.0-alpine
WORKDIR /usr/src/app
$ cat docker-compose.yml
version: '3'
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "cd react-sample && npm start"
    ports:
      - "3000:3000"
    stdin_open: true

実行してみるとこんなアラートが。
どうやらnodebrewだとかnvmというのは関係なく、WSL2とWindowsの間でファイルの操作をするのに時間がかかっているようです。

というわけで、Dockerを使った場合もブラウザが起動するまで2分ほどかかりました。

C:\Users\*****\react\react-docker>docker-compose up
[+] Running 1/1
 - Container react-docker_node_1  Started                                                                          2.6s
Attaching to node_1
node_1  |
node_1  | > react-sample@0.1.0 start /usr/src/app/react-sample
node_1  | > react-scripts start
node_1  |

mac環境で試す

「そもそもReactの開発環境自体が遅いものなのでは？」という疑念が湧いてきたので、手元のmacOS環境で試してみます。
brewからnodebrewをインストールし、あとはお決まりの下記のコマンドで実行。

$ npx create-react-app react-and-nvm
$ cd react-and-nvm/
$ npm start

「爆・速！」
「そうそう、コレです、コレ。」という動作速度でした。
開発サーバの起動も数秒で、ホットリロードも素早い。エディタで変更した内容が即座にブラウザ上に反映されます。

Ubuntu環境で試す

これまで検証していたWindows10のパソコンにはUbuntu20.04環境も同居しています。
マシンスペックは全く同じ状態で、Ubuntuではどうなるのかを試してみます。

「create-react-app」して「 num start」してみると、こちらもすこぶる快調。
「コレです、この速度でお願いします。」という速度でした。

WSL2のファイルシステム内で試す

「そもそもReactの開発環境が遅いのでは？」という疑念は晴れたので、Widowsに立ち戻ります。

Dockerのこちらの情報によると、WSL2からWindowsのファイルシステムにアクセスする状況で性能が低下するようです。

Docker Desktop WSL 2 backend | Docker Documentation

ということで今度はWSL2のファイルシステム内でお決まりのコマンドを実行。

$ npx create-react-app react-and-nvm
$ cd react-and-nvm/
$ npm start

早いじゃないか！
UbuntuをホストOSにした環境で実行するのとほぼ変わらない速度でテストサーバが起動。ホットリロードもスムーズでした。

WindowsからWSL2のファイルシステムにアクセスする方法

WindowsからWSL2のファイルシステムにアクセスする方法を知らなかったので、メモを残しておきます。
ソースファイルはWSL2のファイルシステム上にあったとしても、エディタはWindows環境の物を使いたいこともあるので。

こちらのMicrosoftのドキュメントに記載してありました。

Windows または Linux 用 Windows サブシステム (WSL) にインストールする必要がありますか | Microsoft Docs

Windowsのエクスプローラーから下記のパスにアクセスするか、

\\wsl$\｛WSLで実行しているディストリビューション｝\

例:
\\wsl$\Ubuntu-18.04\

もしくは、WSL2のBashなどから

$ cd ~/
$ explorer.exe .

を実行することでWindowsのエクスプローラーでWSL2のファイルシステムにアクセスすることができます。

このドキュメントには、

「Linux ディストリビューションで作業している場合は、マウントされた C ドライブ (/mnt/c/Users/yourname$) ではなく、\wsl\ ドライブにツール (NodeJS、パッケージ マネージャーなど) をインストールしてください。 マウントされた C ドライブにインストールしても機能しますが、インストールとビルドに長い時間がかかり、混乱を招く可能性があります」

と、しっかり書いてありました。
この記述に気づかず、かなり遠回りをしてしまった。。。

結論

  • WindowsのマシンでReactの開発をする場合は、WSL2のファイルシステム上で作業すること。
  • WSL2からWindowsのファイルシステムを参照しにいくと極端に速度が遅くなる。

ということがわかりました。

最後に

ここ数年「Windowsは開発環境としての進化に力を入れているな」という印象です。
しかし、実際に開発環境として使うには、今回のような「知っていれば当たり前だけど、知らないと結構困る」というノウハウが色々ありそうですね。

今回遠回りはしてしまいましたが、そのおかげで開発環境としてのWindows + WSL2と少しだけお近づきになれたように感じました。おしまい。

tweet Share