【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を使った開発は必須となりつつありますので、是非、チャレンジしてみてください。