DockerでReactの開発環境を構築する

はじめに

試行錯誤したため、備忘録がわりに。
DockerでReact×TypeScriptの開発環境を構築します。

手順

手順１

任意のディレクトリにDockerfile と compose.yml を作成します。

■Dockerfile

FROM node:lts
WORKDIR /usr/src/app

■compose.yml

services:
  app:
    container_name: app
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
    - type: bind
      source: ./app
      target: /usr/src/app
    #"react-app"の部分がプロジェクト名になる
    command: sh -c "cd react-sample && yarn start" 
    ports:
      - 3000:3000
    stdin_open: true #標準入力をコンテナと紐付ける

手順２

volumesでsourceに指定したディレクトリを作成します。

mkdir app

この時点でのディレクトリはこんな感じ

.
├── Dockerfile
├── app
└── compose.yml

手順３

Dockerイメージをbuildします。

docker compose build

手順４

コンテナを起動し、reactプロジェクトを作成します。

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

■上記のコマンドを実行した結果

[+] Creating 1/0
 ✔ Network docker-react-practice_default  Created            0.0s 
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) y

npm warn deprecated uid-number@0.0.6: This package is no longer supported.
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.

(中略)

We suggest that you begin by typing:

  cd react-sample
  npm start

Happy hacking!
npm notice
npm notice New minor version of npm available! 10.7.0 -> 10.8.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.2
npm notice To update run: npm install -g npm@10.8.2
npm notice

手順５

もう一度コンテナを起動します。

docker compose up -d

localhostに接続するとReactが起動していることを確認できます。

おわりに

数ヶ月後の自分のために書きましたが、誰か一人でも参考になれば幸いです。