Docker による React 開発環境の構築

検証環境

Windows11 Home Edition (version 23H2)

D:\>wsl --version
WSL バージョン: 2.1.5.0
カーネル バージョン: 5.15.146.1-2
WSLg バージョン: 1.0.60
MSRDC バージョン: 1.2.5105
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows バージョン: 10.0.22631.3296

# installed ubuntu version
Ubuntu 22.04.4 LTS (Jammy Jellyfish)

# docker
Docker version 25.0.3, build 4debf41
Docker Compose version v2.24.6

Dockerfile、docker-compose.yml の作成

WSL 上の Linux にログインして下記コマンドを実行

$ mkdir react_example
$ cd react_example
$ touch Dockerfile docker-compose.yml

各ファイルを下記内容に変更

Dockerfile

FROM node:18.20.0-alpine

WORKDIR /usr/src/app

docker-compose.yml

version: '3'

services:
  node:
    image: takaya030/node:18-alpine
    build: .
    volumes:
      - ./:/usr/src/app
    command: sh -c 'cd react-app && yarn start'
    ports:
      - '3000:3000'

React、TypeScript のインストール

下記コマンドを実行してインストールする

$ docker compose run --rm node sh -c 'npx create-react-app react-app --template typescript'

react-app フォルダが作成される

React アプリの起動

下記コマンドを実行してコンテナを起動

$ docker compose up -d

コンテナ起動後、WEB ブラウザで http://localhost:3000 にアクセスして以下の画面が表示されれば成功

参考サイト

qiita.com

ja.react.dev