📌

WSL2+DockerでReactの環境を簡単に作る

2022/02/05に公開約2,400字

概要

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

手順

プロジェクトフォルダの作成

まず最初に、今回のプロジェクトを格納するためのフォルダを作成しておきます。

WSL2(Ubuntu)
cd ~
mkdir react-sample

※自身のホームディレクトリ(/home/[ユーザ名]配下)にプロジェクトフォルダを作成します。

コード格納用フォルダの作成

続いて、コード格納用のフォルダを作成しておきます。

WSL2(Ubuntu)
cd react-sample
mkdir src

Dockerfileの作成

プロジェクトフォルダの直下に、Dockerfileを作成します。

WSL2(Ubuntu)
vi Dockerfile
Dockerfile
FROM node:17-alpine
WORKDIR /usr/app

使用するDockerのnodeのバージョンは以下で確認します。(今回は17を指定)

https://hub.docker.com/_/node

ちなみに、node:17の後ろのalpineというのは、OSの種類で、alpineはコンテナで使用することを想定した軽量イメージです。
軽量化しているためにOSのつくりがだいぶ違い、制約がいろいろあるようですが、とりあえずReactを動かしたいだけなので問題ないでしょう。

以下参考にさせて頂きました。

https://www.ted027.com/post/docker-debian-difference/

docker-compose.ymlの作成

プロジェクトフォルダの直下に、docker-compose.ymlファイルを作成します。

WSL2(Ubuntu)
vi docker-compose.yml
docker-compose.yml
version: '3'

services:
  app:
    build: ./
    volumes:
      - ./src:/usr/app
    command: sh -c "yarn start"
    ports:
      - "3000:3000"

Reactアプリを構築する

プロジェクトフォルダ直下で以下のコマンドを実行して、create-react-appを実行します。

WSL2(Ubuntu)
docker-compose run --rm app sh -c "npm install -g create-react-app && create-react-app ."
WSL2(Ubuntu)(ReactRouterを入れる場合)
docker-compose run --rm app sh -c "npm install react-router-dom"

Dockerコンテナを起動する

プロジェクトフォルダ直下で以下のコマンドを実行します。

WSL2(Ubuntu)
docker-compose up -d

ブラウザで動作を確認する。

ブラウザで以下のURLにアクセスします。

http://localhost:3000/

以下のような画面が表示されたらOKです。

あとは、

~/src

配下でReactコードを作成して動かしてみましょう。

注意事項

WSL2でDockerを動作させた状態で、Dockerコンテナ側からファイルを作成すると、ファイルの所有者がrootになります。
一方で、WSL上の操作ユーザはデフォルトでroot以外のユーザとなっており、また、VSCodeなどでファイルを開いた場合もroot以外のユーザとなるため、ファイル更新しようとするとPermission deniedエラーが発生します。
対応としては、VSCodeのエクステンションを用いて、WSL2→VSCode用コンテナ→対象のフォルダという形で接続して作業を行う必要があります。
以下を参考としていただければと思います。

https://zenn.dev/ttani/articles/wsl2-docker-edit-root-user

参考:よく使うDockerコマンド集

https://zenn.dev/ttani/articles/docker-command-list

Discussion

ログインするとコメントできます