Docker上でReact環境を作りたい．
はじめに
-
Docker上でReact環境を作るための方法です．
-
自分は，その次に Vite + React環境も作りたかったので，やってます．
- 分かりづらいので，Vite用に記事を分けます．
-
ChatGPTとペアプロしたので，スタイルに統一性がないかもしれないです．
-
事前に, DockerおよびDockerComposeが動く環境があることが前提です．
-
参考にしたサイトもリンク付してます．
React
ファイル構造は以下の通りです．
.
├── app/
│ └── {react-appが作られる}
├── docker-compose.yml
└── Dockerfile
React: Docker Fileの作成
基本的には，docker composeのyamlファイルに書いています．
なので，Dockerファイルは簡素になっています．
# Dockerfile
# Base image
FROM node:22-slim
# Set working directory inside the container
WORKDIR /usr/src/app
FROM node:20-slim
nodeファイルはalpineでも，slimでもなんでも良いと思っていました．
でも，参考するサイトによると，リスクがあるので何も考えずに使うのは避けたほうが良いらしいです．
（詳しくは，サイトを見てください．）
加えて，最近の@shoki-y_in_KDDIアジャイル開発センター株式会社さんのサイトでも, node:22-slimが使われてました．
なので，本コードもそうしてます．
ChatGPTによる説明（gpt-4o)
FROM node:22-slim
説明: node:22-slim というベースイメージを使用しています。このイメージには、Node.js 22 がインストールされていて、slim 版は不要なファイルやライブラリを含まない軽量なバージョンです。
利点: コンテナサイズが小さく、必要最低限のものだけが含まれているため、効率的なアプリケーションの動作が期待できます。
WORKDIR /usr/src/app
説明: コンテナ内の作業ディレクトリを /usr/src/app に設定しています。このコマンド以降で実行されるすべてのコマンドは、このディレクトリを基準にして行われます。
利点: アプリケーションコードや依存ファイルを一貫して管理するための作業場所が明確になり、他のディレクトリに散らばらないようにします。
React: Docker Compose
詳しい書き方については特に説明しないです．
以下に，工夫したところだけ説明しています．
version: "3.9"
services:
app:
container_name: app
build:
context: .
dockerfile: Dockerfile
ports:
- "10000:3000"
volumes:
- type: bind
source: ./app
target: /usr/src/app
environment:
- NODE_ENV=development
command: sh -c "cd react-app && yarn start"
stdin_open: true
ports
Reactのデフォルト?である3000は使わないようにしました．
よく使われるポート番号を避けて，"10000:3000"にしています．
volumes
1行でバインドせずに複数行に分けて，バインドしています．
こちらも参考サイトがありますので，ぜひ見てみてください．
ChatGPTによる説明（gpt-4o)
- version: "3.9"
説明: 使用する Docker Compose のバージョンを指定しています。3.9 は最新の安定版です。
- services:
説明: ここでは、定義するサービス（コンテナ）のリストを指定します。この例では、1つのサービス app が定義されています。
- app:
container_name: app
説明: コンテナの名前を app に指定しています。この名前でコンテナを識別できるようになります。
build:
context: .
説明: Dockerfile のビルドコンテキストを現在のディレクトリ（.）に指定しています。Dockerfileとアプリケーションのソースコードがこのディレクトリにあることを前提としています。
dockerfile: Dockerfile
説明: 使用する Dockerfile の名前を指定しています。この例では Dockerfile というファイルをビルドに使用します。
- ports:
"10000:3000"
説明: ホストマシンのポート 10000 をコンテナの 3000 ポートにマッピングしています。ブラウザで localhost:10000 にアクセスすると、コンテナ内で実行されているReactアプリ（通常 3000 ポート）にアクセスできます。
- volumes:
type: bind
説明: ボリュームの種類を指定しています。bind はホストマシン上のファイルをコンテナに直接マウントします。
source: ./app
説明: ホストの ./app ディレクトリを、コンテナ内の /usr/src/app にマウントします。ホスト上での変更がコンテナ内にも反映されるので、開発時に便利です。
target: /usr/src/app
説明: コンテナ内のディレクトリで、ホストのファイルがどこにマウントされるかを指定します。
- environment:
NODE_ENV=development
説明: 環境変数 NODE_ENV を development に設定しています。これにより、アプリケーションが開発モードで動作します。
- command:
sh -c "cd react-app && yarn start"
説明: コンテナが起動した際に実行されるコマンドを指定しています。この例では、まず react-app ディレクトリに移動し、yarn start を実行してReactの開発サーバーを起動します。
- stdin_open: true
説明: この設定により、コンテナの標準入力がオープンになり、コンソールでのインタラクティブな操作が可能になります。開発中にデバッグやログの確認をするために便利です。
実行方法
まずは，ファイルをビルドします．
docker compose build
このままだと，reactのアプリがdocker内に存在しないので，コマンドで作ってあげます．
以下の場合だと，react-appがアプリ名．
あと，''内を書き換えると，作りたい環境を作れると思います．
docker-compose run --rm app sh -c 'npx create-react-app react-app --template typescript'
react-appができたら以下のコマンドを実行．
docker compose up -d
これで完成すると思います．
Discussion