Windowsにゼロから WSL2 + Docker CE + React環境を構築する全手順


## はじめに
突然ですが、先日私の PCが壊れました。仕方なく新しいノートパソコン、具体的には Surface Pro 7（Windows 10）を購入したので、これを機に Reactの開発環境をゼロから構築しました。React開発環境の構築手順については過去に書かれた記事が既にいくつかあったのですが、2022/07の現在においては

- [Docker Desktopが 2021/09に有料化](https://www.docker.com/blog/updating-product-subscriptions/) → **Docker CE**等に切替えが必要
- [Ubuntu 18.04 LTSのサポート期限が 2023/04に終了](https://endoflife.software/operating-systems/linux/ubuntu) → **Ubuntu 22.04 LTS**等に切替えが必要

などと、当時と少し状況が変わっているようです。実際に環境構築してみたところ、上記に伴い追加の手順がいくつか発生することが分かりました。同じ場所にハマる人が一人でも減るよう、今回は **Windowsにゼロから WSL2(Ubuntu 22.04) + Docker CE + React環境を構築するまでの全手順**を記事にしました。また、VSCodeと連携する手順も併せて記載しています。部分的にでもご参考になれば幸いです。


## サマリ
### 本記事の目次
- [1.WSL2の設定](#1wsl2の設定)
  - [1-1.PC環境の事前確認](#1-1pc環境の事前確認)
  - [1-2.WSL2のインストール](#1-2wsl2のインストール)
  - [1-3.Ubuntuのインストール](#1-3ubuntuのインストール)
- [2.Dockerの設定](#2dockerの設定)
  - [2-1.Docker CEのインストール](#2-1docker-ceのインストール)
  - [2-2.Docker Composeのインストール](#2-2docker-composeのインストール)
- [3.React開発用コンテナ起動](#3react開発用コンテナ起動)
  - [3-1.コンテナ設定ファイル作成](#3-1コンテナ設定ファイル作成)
  - [3-2.コンテナ＆Reactサービス起動](#3-2コンテナreactサービス起動)
  - [3-3.Reactサービス動作確認](#3-3reactサービス動作確認)
- [4.VSCodeとの連携設定](#4vscodeとの連携設定)
  - [4-1.VSCodeのインストール](#4-1vscodeのインストール)
  - [4-2.VSCodeの動作確認](#4-2vscodeの動作確認)

### 環境情報
今回登場する主要ツールのバージョン、および簡単な説明を下の表にまとめています。「何でもいいから試しに環境を作ってみたい！」という方は読み飛ばしても大丈夫です。
|各種ツール名|バージョン|簡単な説明・備考|
|:--|:--|:--|
|WSL|2|Windows上で Linuxコマンドを実行できる機能。正式名称は "Windows Subsystem for Linux"。|
|Ubuntu|22.04 LTS|Linux環境の配布形態にはいくつか種類があり、これらを "ディストリビューション"と呼ぶ。代表例に Ubuntu、RHEL、CentOS等があるが、今回は無償で利用できる Ubuntuの最新版を採用する。|
|Docker|20.10.17|"コンテナ"という仮想環境単位でアプリケーションを開発、配布、実行する仕組み。2021/09に [Docker Desktopが有償化](https://www.docker.com/blog/updating-product-subscriptions/)されたため、今回は Docker CE（Community Edition）を採用する。|
|Docker Compose|2.6.0|複数のコンテナを使う Docker アプリケーションを、定義・実行するツール。|
|node|14.19.3|JavaScriptの有名な実行環境。大量接続に強い。詳細は[こちらの記事](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)が分かりやすかった。|
|React|18.2.0|Meta社（旧 Facebook社）が開発した、UI構築用の超有名な JavaScriptライブラリ。Vueと比較して学習コストが高いが、処理速度が速くライブラリが充実。|
|VS Code|1.69.0|Microsoft社が提供する無料のコードエディタ。拡張機能をインストールすれば WSLと連携も可能。|





# 1.WSL2の設定
### 1-1.PC環境の事前確認
WSL2をインストールする前に、PCの Windowsバージョンが条件を満たしているか確認します。
>WSL 2 は、Windows 10 (バージョン 1903、ビルド 18362 以上) でのみ使用できます。

[Microsoft公式サイト](https://docs.microsoft.com/ja-jp/windows/wsl/compare-versions)には上記の記載があります。なお、Windowsバージョンは「Windows」キー押下 → 「winver」を検索＆実行することで確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/9390e090-fc0a-a6e1-7d53-4a8b870687ce.png)

### 1-2.WSL2のインストール
それでは WSL2をインストールします。コマンドプロンプトを**管理者として実行**し、下記コマンドを実行するだけでインストールは完了です。
```
C:\windows\system32>wsl --install
```
　
インストールが正常に終了したら **PCを再起動**します。明示的に既定の WSLバージョンを 2に指定するために、再びコマンドプロンプトを**管理者として実行**し、下記コマンドを実行しておきます。（参考: [Microsoft公式サイト](https://docs.microsoft.com/ja-jp/windows/wsl/basic-commands)）
```
C:\windows\system32>wsl --set-default-version 2
```
　
### 1-3.Ubuntuのインストール
次に、Ubuntuディストリビューションを PCにインストールします。「Windows」キー押下 →「Microsoft Store」を検索＆起動し、「Ubuntu 22.04 LTS」を探してインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/2ddf8063-b106-c497-f692-94d081b562f8.png)
数分後、先ほど押下したボタンの表示が「開く」に変わったら、ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/b878fc1e-88f9-b075-3d18-ccac8c1a3da9.png)
Ubuntuの初期設定画面が起動したら、画面に従い設定を進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/276cc3b4-7b42-88d2-a2b6-5040cbede4cb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/196a5662-bd0c-63e8-21cb-cb187a0a4937.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/24fad62d-18cd-06fa-55a3-6f81a805fbc1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/0a90daad-074d-4cc6-c1f7-afd3396cd06f.png)

**Ubuntuのコンソール画面**が起動したら設定完了です。上記のデフォルト設定だと、Ubuntuの `/mnt/c/`配下に PCの Cドライブ配下がマウントされます。試しに PC上で Cドライブ直下にディレクトリを新規作成すると、Ubuntu上でも該当ディレクトリを参照できます。
```bash:Ubuntu
$ pwd
# /home/yamazo
$ ls -ltr /mnt/c/
# ...(中略)...
# drwxrwxrwx 1 yamazo yamazo 4096 Jul  8 15:01  yamazo_work_dir
```
　　
**コマンドプロンプト**で以下コマンドを実行し、PC上にインストールされた Linux ディストリビューションの一覧を表示してみます。正しく設定できていれば、Ubuntu-22.04が Version 2、つまり WSL2でインストールされているはずです。

```
C:\windows\system32>wsl -l -v
   NAME            STATE           VERSION
 * Ubuntu-22.04    Running         2
```

# 2.Dockerの設定
### 2-1.Docker CEのインストール
ここからは Linuxコマンドを実行するため、先ほど起動した **Ubuntuのコンソール画面上**で作業を行います。Ubuntuのコンソール画面を閉じてしまった場合は、「Windows」キー押下 →「Ubuntu」で検索＆起動できます。

WSL2で Ubuntu 22.04を使用する場合、`apt-get install`コマンド等を実行する度に下記ログが出力されます。
>Failed to retrieve available kernel versions.
>Failed to check for processor microcode upgrades.

これは Ubuntu 22.04の仕様で特に問題ありませんが、下記コマンドを実行して非表示にしておきます。（参考: [Ubuntuの公式 QA](https://askubuntu.com/questions/1404129/ubuntu-22-04-lts-on-wsl-failed-to-retrieve-available-kernel-versions-failed)）
```bash:Ubuntu
$ sudo apt-get purge needrestart
```
　


それでは Ubuntuに Docker CEと Docker Composeを順次インストールします。
[Docker公式ドキュメント](https://docs.docker.com/engine/install/ubuntu/)に従い、以下のコマンドを順に実行します。
```bash:Ubuntu
# パッケージインデックスの最新化
sudo apt-get update

# リポジトリに HTTPS接続するためのパッケージをインストール
sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

# Docker公式の GPGキーを取得＆追加
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

# リポジトリのセットアップ
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

# 再度パッケージインデックスを最新化後、Docker CEのパッケージ群をインストール
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin
```
　 
インストールが完了したら、Dockerのサービスを起動する前に、Dockerと Ubuntuが使用する ibtablesの整合性を取る必要があります。以下のコマンドを実行して iptables-legacyを Ubuntuのデフォルト参照先に指定します。なお、この設定をしないと Dockerサービスを起動できません。（参考: [Dockerフォーラム](https://forums.docker.com/t/failing-to-start-dockerd-failed-to-create-nat-chain-docker/78269/2)）
```bash:Ubuntu
$ sudo update-alternatives --set iptables /usr/sbin/iptables-legacy
$ sudo update-alternatives --set ip6tables /usr/sbin/ip6tables-legacy
```
　
以上で Docker CEの設定は完了です。動作確認のために、Dockerサービスを起動して hello-worldが出力されることを確認します。
```bash:Ubuntu
sudo service docker start
sudo docker run hello-world
```
　　
hello-worldを出力できたら、次回以降は `sudo`を省略できるように、一般ユーザに `docker`コマンドの実行権限を付与します。下記コマンド末尾の `yamazo` 部分をご自身の**一般ユーザ名**に変更してください。
```bash:Ubuntu
sudo usermod -a -G docker yamazo
```
　
**Ubuntuコンソール画面に再ログイン**後、これまで `sudo docker`と入力していた各コマンドは `docker`だけで実行できるようになります。試しにコンテナの一覧を出力してみます。まだコンテナを作成していないため空の結果が返ってきますが、権限が正しく設定できていない場合はエラー「Permission Denied」が出力されてしまいます。
```bash:Ubuntu
$ docker ps
# CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES
```
　
### 2-2.Docker Composeのインストール
続けて、Docker Composeのインストールを **Ubuntuコンソール画面上**で行います。下記コマンドで Docker Composeをダウンロードし、実行権限を付与します。（参考: [Docker公式ドキュメント](https://docs.docker.jp/compose/install.html)）
```bash:Ubuntu
$ sudo curl -L https://github.com/docker/compose/releases/download/v2.6.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
```
　
コマンドが実行できることを確認するために、バージョンを出力します。正常に出力できたら Docker Composeの設定は完了です。
```bash:Ubuntu
$ docker-compose --version
Docker Compose version v2.6.0
```





# 3.React開発用コンテナ起動
### 3-1.コンテナ設定ファイル作成
Dockerの設定が済んだら、いよいよ Reactの開発用コンテナを作成します。まずは開発用コンテナの設定ファイルやディレクトリを作成します。ここではコンテナ名やマウントするディレクトリ名等を一律で `frontend`という名前で作成することにします。（参考: [Dockerfileの公式リファレンス](https://docs.docker.jp/engine/reference/builder.html)、[docker-compose.ymlの公式リファレンス](http://docs.docker.jp/v1.12/compose/compose-file.html)）
```bash:Ubuntu
$ mkdir react && cd react && pwd
/home/yamazo/react
$ vi Dockerfile
$ vi docker-compose.yml
$ mkdir frontend
$ ls -ltr
total 12
-rw-r--r-- 1 yamazo yamazo   54 Jul 10 22:39 Dockerfile
-rw-r--r-- 1 yamazo yamazo  222 Jul 10 22:41 docker-compose.yml
drwxr-xr-x 3 yamazo yamazo 4096 Jul 10 22:41 frontend
$ cat Dockerfile
FROM node:14.19.3-alpine
WORKDIR /frontend
USER node

$ cat docker-compose.yml
version: "3.9"
services:
  frontend:
    build: .
    container_name: frontend
    volumes:
      - ./frontend:/frontend
    ports:
      - 3000:3000
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true

$
```
　
ここで注意点ですが、各ファイルの配置先として `/mnt`配下は**絶対に使用しないでください**。WSL2は OS ファイル システム間でのパフォーマンスが低く、諸々の処理時間が数十倍程度遅くなります。（参考: [Microsoft公式サイト](https://docs.microsoft.com/ja-jp/windows/wsl/compare-versions)）例えば Reactのサービスを起動する場合、`/home`配下だと起動時間 10秒程度なのに対し、`/mnt` 配下だと **5分以上かかります**。
　
### 3-2.コンテナ＆Reactサービス起動
Dockerの設定ファイルを作成したら、実際にコンテナをビルド＆起動します。
```
$ docker-compose build
$ docker-compose up -d
```
　
コンテナを無事に起動できたら、コンテナ内にログインします。
```bash:Ubuntu
$ docker exec -it frontend sh
# /frontend $
```
　
コンテナ内にログインできたら、実際に Reactのプロジェクトを作成してみます。下記コマンドを**コンテナ内**で実行して、TypeScriptのプロジェクトを `yamazo-pj-01`という名前で作成してみます。
```bash:コンテナ内
$ npx create-react-app yamazo-pj-01 --template typescript
```
　
プロジェクトの作成が完了したら、プロジェクトのディレクトリに移動し、Reactのサービスを起動します。下記コマンドを**コンテナ内**で実行します。
```bash:コンテナ内
$ cd yamazo-pj-01/
$ npm start
```
　
およそ 10秒程度経過したら、Chrome等のブラウザを起動し、**localhost:3000** にアクセスします。以下のような画面が表示されたら Reactの起動は成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/c31bb893-b5dd-c11b-9d01-77bacac01299.png)
　
### 3-3.Reactサービス動作確認
次に、画面の出力を好きな文字列に変更してみます。もう一つ **Ubuntuのコンソール画面**を開き、トップ画面の描画ファイル `App.tsx`を修正します。なお、該当ファイルは`<プロジェクト名>/src`配下にあります。今回作成した `docker-compose.yml`ではコンテナ内のファイルを `./frontend` 配下にマウントしたため、わざわざコンテナ内に入る必要はなく、 **Ubuntuコンソール画面**から直接修正ができます。
```bash:Ubuntu
$ pwd
/home/yamazo/react
$ vi ./frontend/yamazo-pj-01/src/App.tsx
```
　
ファイルを修正すると、画面に即反映されます。もしも即時に反映されない場合は Reactの**ホットリロード設定**が正しくできていないため、`docker-compose.yml`内の `CHOKIDAR_USEPOLLING=true`部分にタイプミスが無いかご確認ください。また、私の PCでは作業ディレクトリを `/mnt`配下に指定しているとホットリロードが動作しませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/1a56da14-5c40-68ae-7869-2e457c9aa5cb.png)






# 4.VSCodeとの連携設定
### 4-1.VSCodeのインストール
この時点で Reactの開発はできるようになったものの、毎回 `vi`コマンドでファイルを修正するのは少し非効率なため、Visual Studio Code（以下 VSCode）上で実装を行うためのセットアップを追加で行います。[公式サイト](https://code.visualstudio.com/download)から実行ファイル（.exe）を PC上にダウンロードして実行します。設定項目はデフォルトのままで大丈夫です。VSCodeを開いたら下図のように WSLに接続するための拡張機能を検索し、インストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/a7c808fe-1447-5145-e393-cf9c333d8c64.png)
インストールが完了したら、VSCodeを再起動します。下図のように、追加された「Remote Exploler」 のアイコンを押下し、WSL（Ubuntu22.04 LTS）を選択して接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/cfb5f0a0-414a-14c8-38ab-2e7a09d23616.png)

新しい VSCodeが起動し、下部のステータスバーに「WSL」の表示がされていれば連携成功です。ステータスバーが表示されていない場合は、「View」→「Appearance」→「Show Status Bar」から表示できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/846e1ea5-b8cd-85b2-0da7-2bc5e3562aed.png)
　
### 4-2.VSCodeの動作確認
VSCode上でも再度 `App.tsx`の修正を行い、画面表示に即反映されることが確認できたら VSCodeの設定は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348507/aa21235a-cae4-5fd4-136a-6b9bb1c8734a.png)

# おわりに
今回は Windows10に React環境を構築するまでの手順を記事にまとめました。
記事中には関連する公式ドキュメントのリンクを可能な限り添付したので、各要素についてさらに理解を深めたい方は公式ドキュメントを参照いただければと思います。

最後まで読んでいただき、ありがとうございました。

以下のような記事も書いていますので、
是非こちらも読んでいただけると嬉しいです！

**2024/09/05公開 ← New!!**

https://qiita.com/yamazombie/items/4d31d3c39717164ec805

以下の記事も私のお気に入りです。


https://qiita.com/yamazombie/items/b7b76ea3f0103fc0f41b

https://qiita.com/yamazombie/items/d56e1f66ec03f8d115f4