WSL2+DockerでReactの環境を簡単に作る
概要
Windows環境上(WSL2)でDockerを使って、Reactを環境を作ります。
試しにReactを動かしてみたい場合、動かしながらReactの勉強をしたい場合などに便利ですね。
環境
- Windows10
- WSL2(Ubuntu 20.04)
- Docker 20.10.12
- docker-compose 2.2.3
Windows環境でWSL2を未セットアップの方は、よろしければ以下を参照してください。
WSL2+Docker環境構築手順
構成
WSL2上のディレクトリパスは以下とします。
/home/[ユーザ名]/react-sample
react-sampleフォルダ配下の構成（最終的に作成する構成）は以下の通りとします。
.
├ src ：Reactプロジェクトソース用フォルダ
├ Dockerfile
└ docker-compose.yml
手順
プロジェクトフォルダの作成
まず最初に、今回のプロジェクトを格納するためのフォルダを作成しておきます。
cd ~
mkdir react-sample
※自身のホームディレクトリ（/home/[ユーザ名]配下）にプロジェクトフォルダを作成します。
コード格納用フォルダの作成
続いて、コード格納用のフォルダを作成しておきます。
cd react-sample
mkdir src
Dockerfileの作成
プロジェクトフォルダの直下に、Dockerfileを作成します。
vi Dockerfile
FROM node:17-alpine
WORKDIR /usr/app
使用するDockerのnodeのバージョンは以下で確認します。（今回は17を指定）
ちなみに、node:17の後ろのalpineというのは、OSの種類で、alpineはコンテナで使用することを想定した軽量イメージです。
軽量化しているためにOSのつくりがだいぶ違い、制約がいろいろあるようですが、とりあえずReactを動かしたいだけなので問題ないでしょう。
以下参考にさせて頂きました。
docker-compose.ymlの作成
プロジェクトフォルダの直下に、docker-compose.ymlファイルを作成します。
vi docker-compose.yml
version: '3'
services:
app:
build: ./
volumes:
- ./src:/usr/app
command: sh -c "yarn start"
ports:
- "3000:3000"
Reactアプリを構築する
プロジェクトフォルダ直下で以下のコマンドを実行して、create-react-appを実行します。
docker-compose run --rm app sh -c "npm install -g create-react-app && create-react-app ."
docker-compose run --rm app sh -c "npm install react-router-dom"
Dockerコンテナを起動する
プロジェクトフォルダ直下で以下のコマンドを実行します。
docker-compose up -d
ブラウザで動作を確認する。
ブラウザで以下のURLにアクセスします。
http://localhost:3000/
以下のような画面が表示されたらOKです。
あとは、
~/src
配下でReactコードを作成して動かしてみましょう。
注意事項
WSL2でDockerを動作させた状態で、Dockerコンテナ側からファイルを作成すると、ファイルの所有者がrootになります。
一方で、WSL上の操作ユーザはデフォルトでroot以外のユーザとなっており、また、VSCodeなどでファイルを開いた場合もroot以外のユーザとなるため、ファイル更新しようとするとPermission deniedエラーが発生します。
対応としては、VSCodeのエクステンションを用いて、WSL2→VSCode用コンテナ→対象のフォルダという形で接続して作業を行う必要があります。
以下を参考としていただければと思います。
参考：よく使うDockerコマンド集
Discussion