【React】DockerでReactの環境構築をする | Webエンジニア「いっしー」のブログ

動画で解説を見る

1 開発環境
2 DockerでReactの環境構築をする手順
3 WindowsでReactのホットリロードが効かない場合の対処方法
4 まとめ

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Docker Engine:v23.0.5

DockerでReactの環境構築をする手順

DockerでReactの環境構築をする手順について解説していきます。

ディレクトリ構成

今回のディレクトリ構成は下記を目指していきます。

docker-react/
├── app/                    # Reactアプリケーションが作成されるディレクトリ
│   ├── public/
│   ├── src/
│   ├── package.json
│   ├── package-lock.json
│   ├── .gitignore
│   └── README.md
├── docker/
│   └── Dockerfile          # Dockerfileを配置するディレクトリ
└── docker-compose.yml      # Docker Composeファイル

docker-react/

├── app/ # Reactアプリケーションが作成されるディレクトリ

│ ├── public/

│ ├── src/

│ ├── package.json

│ ├── package-lock.json

│ ├── .gitignore

│ └── README.md

├── docker/

│ └── Dockerfile # Dockerfileを配置するディレクトリ

└── docker-compose.yml # Docker Composeファイル

docker-reactディレクトリ直下にあるappディレクトリは、Reactアプリケーションが作成されるディレクトリにします。

Dockerイメージを作成するためのスクリプトファイルはdocker-react直下でも良いですが、汎用性も含めてdockerディレクトリの中にまとめていけるようにしています。

docker-compose.ymlはDockerコンテナを管理・デプロイするための設定ファイルなのでdocker-reactディレクトリ直下に配置しています。

Dockerfileを作成

まずはDockerfileを作成していきます。

dockerディレクトリの直下にDockerfileを作成し、以下のようにしてください。

# ベースイメージの指定
FROM node:lts-alpine3.20

# 作業ディレクトリの指定
WORKDIR /var/www/html

# create-react-appをインストール
RUN npm install -g create-react-app

# ベースイメージの指定

FROM node:lts-alpine3.20

# 作業ディレクトリの指定

WORKDIR /var/www/html

# create-react-appをインストール

RUN npm install -g create-react-app

ベースイメージについてはDocker Hubから探します。

nodeのDocker Official Imageから、Node.jsの長期サポート（LTS）バージョンを使用し、Alpine Linux 3.20をベースとしたイメージを使っています。

作業ディレクトリの指定については、一般的にWebアプリケーションのドキュメントルートとして使用される/var/www/htmlディレクトリを指定しています。

WORKDIRの命令以降、すべてのRUN、CMD、ENTRYPOINT、COPY、ADD命令はこのディレクトリを基準に実行されます。

最後に、Reactアプリケーションのプロジェクトテンプレートを簡単に作成するためにcreate-react-appをインストールしています。

docker-compose.ymlを作成

次にdocker-react直下にdocker-compose.ymlファイルを作成し、以下のようにしてください。

version: '3'

services:
  app:
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./app:/var/www/html/app
    environment:
      - CHOKIDAR_USEPOLLING=true

version: '3'

services:

app:

build:

context: .

dockerfile: ./docker/Dockerfile

ports:

- "3000:3000"

volumes:

- ./app:/var/www/html/app

environment:

- CHOKIDAR_USEPOLLING=true

Docker Composeファイルのバージョンは3を使用し、servicesでappという名前のサービスを定義しています。

buildの設定については、イメージをビルドするためのコンテキストディレクトリはルートディレクトリを指定し、ビルドに使用するDockerfileのパスを指定します。

portsの設定については、ホストのポート3000をコンテナのポート3000にマッピングしています。

volumesの設定については、ホストマシンのディレクトリ（./app）をコンテナ内のディレクトリ（/var/www/html/app）にマウントします。

environmentの設定については、コンテナ内で使用する環境変数を設定します。

ファイルの追加・変更・削除を検知できるようにNode.jsのファイルシステムイベントを監視するライブラリであるChokidarをポーリングモードを使用するよう指示しています。

Dockerイメージをビルド

次にDockerイメージをビルドするために以下のコマンドを実行します。

cd docker-react/
docker-compose build

1 2	cd docker-react/ docker-compose build

cdコマンドでdocker-reactディレクトリに移動し、docker-composeコマンドでDockerイメージをビルドすると下記のような標準出力がターミナルに表示されます。

[+] Building 2.8s (7/7) FINISHED
 => [internal] load build definition from Dockerfile                                                                                                                                                                      0.2s 
 => => transferring dockerfile: 232B                                                                                                                                                                                      0.0s 
 => [internal] load .dockerignore                                                                                                                                                                                         0.3s 
 => => transferring context: 2B                                                                                                                                                                                           0.0s 
 => [internal] load metadata for docker.io/library/node:lts-alpine3.20                                                                                                                                                    2.4s 
 => [1/3] FROM docker.io/library/node:lts-alpine3.20@sha256:66c7d989b6dabba6b4305b88f40912679aebd9f387a5b16ffa76dfb9ae90b060                                                                                              0.0s 
 => CACHED [2/3] WORKDIR /var/www/html                                                                                                                                                                                    0.0s 
 => CACHED [3/3] RUN npm install -g create-react-app                                                                                                                                                                      0.0s 
 => exporting to image                                                                                                                                                                                                    0.0s 
 => => exporting layers                                                                                                                                                                                                   0.0s 
 => => writing image sha256:a40e7736274b2bb292d77f6fff4227626d903db38ee135f622e3233fbfd0c6e0                                                                                                                              0.0s 
 => => naming to docker.io/library/docker-react-app                                                                                                                                                                       0.0s

[+] Building 2.8s (7/7) FINISHED

=> [internal] load build definition from Dockerfile 0.2s

=> => transferring dockerfile: 232B 0.0s

=> [internal] load .dockerignore 0.3s

=> => transferring context: 2B 0.0s

=> [internal] load metadata for docker.io/library/node:lts-alpine3.20 2.4s

=> [1/3] FROM docker.io/library/node:lts-alpine3.20@sha256:66c7d989b6dabba6b4305b88f40912679aebd9f387a5b16ffa76dfb9ae90b060 0.0s

=> CACHED [2/3] WORKDIR /var/www/html 0.0s

=> CACHED [3/3] RUN npm install -g create-react-app 0.0s

=> exporting to image 0.0s

=> => exporting layers 0.0s

=> => writing image sha256:a40e7736274b2bb292d77f6fff4227626d903db38ee135f622e3233fbfd0c6e0 0.0s

=> => naming to docker.io/library/docker-react-app 0.0s

特にエラーなどがでていなければ、Dockerイメージのビルドに成功です。

Dockerコンテナ内でReactプロジェクトを作成

次にDockerコンテナ内でReactプロジェクトを作成するために、以下のコマンドを実行します。

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

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

コマンドの内容は以下の組み合わせです。

docker-compose run：一時的にコンテナを起動して指定したコマンドを実行
--rm：コマンドが終了した後、コンテナを自動的に削除
app：docker-compose.ymlファイル内で定義されたappを指定
sh -c：シェル（sh）を使って指定されたコマンドを実行
npx create-react-app app --template typescript：新しいReactアプリケーションを作成するためのコマンドを実行

このコマンドを実行するとReactアプリケーションの作成が実行され、最後の数行は下記のような標準出力がターミナルに表示されます。

Success! Created app at /var/www/html/app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd app
  npm start

Happy hacking!

Success! Created app at /var/www/html/app

Inside that directory, you can run several commands:

npm start

Starts the development server.

npm run build

Bundles the app into static files for production.

npm test

Starts the test runner.

npm run eject

Removes this tool and copies build dependencies, configuration files

and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd app

npm start

Happy hacking!

特にエラーなどがでていなければReactアプリケーションの作成に成功です。

Dockerコンテナ起動時に開発用サーバーを起動

次にDockerコンテナ起動時に開発用サーバーを起動するようにdocker-compose.ymlを修正します。

version: '3'

services:
  app:
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./app:/var/www/html/app
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: sh -c 'cd app && npm run start'

version: '3'

services:

app:

build:

context: .

dockerfile: ./docker/Dockerfile

ports:

- "3000:3000"

volumes:

- ./app:/var/www/html/app

environment:

- CHOKIDAR_USEPOLLING=true

command: sh -c 'cd app && npm run start'

cdコマンドでappディレクトリに移動してpackage.jsonで定義されたstartスクリプトを実行するようにしています。

Dockerコンテナを起動

最後にDockerコンテナを起動するために下記のコマンドを実行します。

docker-compose up

1	docker-compose up

Dockerコンテナの起動に成功していれば、最後の数行は下記のような標準出力がターミナルに表示されます。

docker-react-app-1  | Compiled successfully!
docker-react-app-1  | 
docker-react-app-1  | You can now view app in the browser.
docker-react-app-1  | 
docker-react-app-1  |   Local:            http://localhost:3000
docker-react-app-1  |   On Your Network:  http://172.21.0.2:3000
docker-react-app-1  | 
docker-react-app-1  | Note that the development build is not optimized.
docker-react-app-1  | To create a production build, use npm run build.
docker-react-app-1  | 
docker-react-app-1  | webpack compiled successfully
docker-react-app-1  | No issues found.

docker-react-app-1 | Compiled successfully!

docker-react-app-1 |

docker-react-app-1 | You can now view app in the browser.

docker-react-app-1 |

docker-react-app-1 | Local: http://localhost:3000

docker-react-app-1 | On Your Network: http://172.21.0.2:3000

docker-react-app-1 |

docker-react-app-1 | Note that the development build is not optimized.

docker-react-app-1 | To create a production build, use npm run build.

docker-react-app-1 |

docker-react-app-1 | webpack compiled successfully

docker-react-app-1 | No issues found.

ブラウザでhttp://localhost:3000にアクセスし、Reactアプリケーションの初期画面が表示されていれば成功です。

WindowsでReactのホットリロードが効かない場合の対処方法

WindowsでReactのホットリロードが効かない場合があるようです。

react-scripts 5.xx以降を使用している場合、WindowsではCHOKIDAR_USEPOLLINGは機能しないことが原因のようです。

参考記事：https://stackoverflow.com/questions/71297042/react-hot-reload-doesnt-work-in-docker-container

その場合は、package.jsonのscriptsを以下のようにします。

  "scripts": {
    "start": "react-scripts start",
    "winstart": "WATCHPACK_POLLING=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

"scripts": {

"start": "react-scripts start",

"winstart": "WATCHPACK_POLLING=true react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject"

WATCHPACK_POLLING=trueを設定することで、Webpackはポーリングモードを使用してファイルの変更を監視します。

そしてdocker-compose.ymlを以下のように修正します。

version: '3'

services:
  app:
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./app:/var/www/html/app
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: sh -c 'cd app && npm run winstart'

version: '3'

services:

app:

build:

context: .

dockerfile: ./docker/Dockerfile

ports:

- "3000:3000"

volumes:

- ./app:/var/www/html/app

environment:

- CHOKIDAR_USEPOLLING=true

command: sh -c 'cd app && npm run winstart'

あとはDockerコンテナを起動してhttp://localhost:3000にアクセスし、ホットリロードが効いているかを確認してみましょう。

まとめ

今回はDockerでReactの環境構築をする手順について解説していきましたが、いかがだったでしょうか。

個人開発のみであればDockerは不要かもしれませんが、Dockerコンテナで開発環境を構築することにより、複数人でプロジェクトを進める場合でも同じ環境で開発を進めることができます。

Dockerを使った開発は必須となりつつありますので、是非、チャレンジしてみてください。