【React】DockerでReactの環境構築をする

作成日: 更新日:

開発環境

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

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

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

ディレクトリ構成

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

1# Directory structure
2docker-react/
3├── app/                    # Reactアプリケーションが作成されるディレクトリ
4│   ├── public/
5│   ├── src/
6│   ├── package.json
7│   ├── package-lock.json
8│   ├── .gitignore
9│   └── README.md
10├── docker/
11│   └── Dockerfile          # Dockerfileを配置するディレクトリ
12└── docker-compose.yml      # Docker Composeファイル

docker-reactディレクトリ直下にあるappディレクトリは、Reactアプリケーションが作成されるディレクトリにします。 Dockerイメージを作成するためのスクリプトファイルはdocker-react直下でも良いですが、汎用性も含めてdockerディレクトリの中にまとめていけるようにしています。 docker-compose.ymlはDockerコンテナを管理・デプロイするための設定ファイルなのでdocker-reactディレクトリ直下に配置しています。

Dockerfileを作成

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

1# Dockerfile
2# ベースイメージの指定
3FROM node:lts-alpine3.20
4
5# 作業ディレクトリの指定
6WORKDIR /var/www/html
7
8# create-react-appをインストール
9RUN 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ファイルを作成し、以下のようにしてください。

1# docker-compose.yml
2version: '3'
3
4services:
5  app:
6    build:
7      context: .
8      dockerfile: ./docker/Dockerfile
9    ports:
10      - "3000:3000"
11    volumes:
12      - ./app:/var/www/html/app
13    environment:
14      - 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イメージをビルドするために以下のコマンドを実行します。

1cd docker-react/
2docker-compose build

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

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

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

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

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

1docker-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アプリケーションの作成が実行され、最後の数行は下記のような標準出力がターミナルに表示されます。

1Success! Created app at /var/www/html/app
2Inside that directory, you can run several commands:
3
4  npm start
5    Starts the development server.
6
7  npm run build
8    Bundles the app into static files for production.
9
10  npm test
11    Starts the test runner.
12
13  npm run eject
14    Removes this tool and copies build dependencies, configuration files
15    and scripts into the app directory. If you do this, you can’t go back!
16
17We suggest that you begin by typing:
18
19  cd app
20  npm start
21
22Happy hacking!

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

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

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

1# docker-compose.yml
2version: '3'
3
4services:
5  app:
6    build:
7      context: .
8      dockerfile: ./docker/Dockerfile
9    ports:
10      - "3000:3000"
11    volumes:
12      - ./app:/var/www/html/app
13    environment:
14      - CHOKIDAR_USEPOLLING=true
15+   command: sh -c 'cd app && npm run start'

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

Dockerコンテナを起動

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

1docker-compose up

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

1docker-react-app-1  | Compiled successfully!
2docker-react-app-1  | 
3docker-react-app-1  | You can now view app in the browser.
4docker-react-app-1  | 
5docker-react-app-1  |   Local:            http://localhost:3000
6docker-react-app-1  |   On Your Network:  http://172.21.0.2:3000
7docker-react-app-1  | 
8docker-react-app-1  | Note that the development build is not optimized.
9docker-react-app-1  | To create a production build, use npm run build.
10docker-react-app-1  | 
11docker-react-app-1  | webpack compiled successfully
12docker-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を以下のようにします。

1  "scripts": {
2    "start": "react-scripts start",
3+   "winstart": "WATCHPACK_POLLING=true react-scripts start",
4    "build": "react-scripts build",
5    "test": "react-scripts test",
6    "eject": "react-scripts eject"
7  },

WATCHPACK_POLLING=trueを設定することで、Webpackはポーリングモードを使用してファイルの変更を監視します。 そしてdocker-compose.ymlを以下のように修正します。

1# docker-compose.yml
2version: '3'
3
4services:
5  app:
6    build:
7      context: .
8      dockerfile: ./docker/Dockerfile
9    ports:
10      - "3000:3000"
11    volumes:
12      - ./app:/var/www/html/app
13    environment:
14      - CHOKIDAR_USEPOLLING=true
15+   command: sh -c 'cd app && npm run winstart'

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

まとめ

今回はDockerでReactの環境構築をする手順について解説していきましたが、いかがだったでしょうか。 個人開発のみであればDockerは不要かもしれませんが、Dockerコンテナで開発環境を構築することにより、複数人でプロジェクトを進める場合でも同じ環境で開発を進めることができます。 Dockerを使った開発は必須となりつつありますので、是非、チャレンジしてみてください。

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