dockerでReactの環境構築

はじめに

Reactの環境構築を行いました。
備忘録を兼ねて環境構築の手順を書きました。
各コードの詳細については省いてます。

忙しい人のために最終的なソースです。
https://github.com/nonamenme/docker-react
こちらをdocker-compose up -dで立ち上げれば、とりあえずReactの環境は完成します。

1. 準備

以下の構成でファイルを用意

─── project
    ├── docker-compose.yml
    └── Dockerfile

・各ファイルの中身

docker-compose.yml

version: '3.8'

services:
  frontend:
    container_name: react-app
    build:
      context: ./
    restart: always
    tty: true
    volumes:
      - ./:/app

・コンテナ名などは必要に応じて変更

Dockerfile

FROM node:17.5.0-stretch-slim

WORKDIR /app

2. 作成したdockerfileを元にイメージを作成

$ docker-compose build

3. 新規プロジェクトの作成

$ docker-compose run frontend npx create-react-app react-app
Creating network "react-app_default" with the default driver
Creating react-app_frontend_run ... done
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

・ コマンドに--template typescriptを追加すると、typescriptで作成出来る。
（例: docker-compose run frontend npx create-react-app {プロジェクト名} --template typescript

4. docker-compose.ymlを編集

docker-compose.yml

version: '3.8'

services:
  frontend:
    container_name: react-app
    build:
      context: ./
+   ports:
+     - 3000:3000
    restart: always
    tty: true
    volumes:
-     - ./:/app
+     - ./react-app:/app
+     - react-node_modules:/app/node_modules
+volumes:
+  react-node_modules:

5. Dockerfieを編集

Dockerfile

FROM node:17.5.0-streetch-slim

WORKDIR /app

+ COPY react-app/package.json react-app/package-lock.json ./
+ RUN npm install
+ COPY react-app/ .

+ CMD npm run start

6. Imageを作成し直して、コンテナを立ち上げる

docker-compose up -d --build

7. サーバー立ち上げ完了

以下のURLを開くとReactのスタートページが表示されていると思います。
http://localhost:3000

最後に

node_modulesをDockerのVolumeで管理をするようにしましたが、
このようにするとホスト側のnode_modulesは空のため、VSCodeなどのエディタでESLintのモジュールが見つからないエラーが出ます。
volumeで管理するようにしない場合は、ホスト側のnode_modulesにも同期されますが、コンテナを立てて同じ環境を作っているのにホスト側のnode_modulesも同期されてしまう可能性があります。
（また、立ち上げに時間がかかる・・・）
VSCodeの場合Remote Containersという拡張機能を使えば一応解決はできますが、他にも何か良い方法があればコメントで教えていただけるとありがたいです。