実施条件
- macOS
- Node.js
- npm または yarn
- React プロジェクトがすでに作成済みであること
- GitHubにpush可能な状態であること
- Docker Desktop（v4.32以降を推奨）がインストールされていること
環境
| ツール | バージョン |
|---|---|
| Node.js | 22.5.1 |
| npm | 10.8.2 |
| React | 19.1.0 |
| TypeScript | 5.x.x |
| Docker | 26.1.3 |
概要
- macOS環境において、ReactアプリをDockerコンテナ内で起動・開発できるようにする手順を記載
- ホットリロード対応、node_modules分離構成
導入手順: 既存ReactプロジェクトをDockerで開発する
1. ディレクトリ構造の確認と準備
既存のReactプロジェクトは以下のような構成：
my-react-app/
├── app/
│ ├── src/
│ ├── public/
│ ├── package.json
│ └── ...（Reactのソースコード一式）
今回作成するファイルを含めた完成構成は次の通り：
my-react-app/
├── docker-compose.yml ← 作成
├── app/
│ ├── Dockerfile ← 作成
│ ├── .dockerignore ← 作成
│ ├── package.json
│ ├── public/
│ ├── src/
│ └── ...（その他Reactのファイル）
2. Dockerfile の作成
cd my-react-app/app
touch Dockerfile
内容：
Dockerfile
# Build stage
## 1. Node.js の公式イメージを使う（18バージョン）
FROM node:18
## 2. 作業ディレクトリを作成（この中にファイルを配置）
WORKDIR /app
## 3. パッケージ情報を先にコピー（キャッシュを活かせる）
COPY package*.json ./
## 4. 依存関係をインストール
RUN npm install
# Production stage
## 1. 残りのソースコードをすべてコピー
COPY . .
## 2. ポート3000を開ける（Reactの開発サーバ用）
EXPOSE 3000
## 3. React 開発サーバを起動
CMD ["npm", "start"]
| 行 | 説明 |
|---|---|
FROM |
Node.js の実行環境をベースにします（公式イメージ） |
WORKDIR |
作業ディレクトリを /app に設定します |
COPY package*.json . |
依存関係ファイルだけを先にコピーして、キャッシュを効かせます |
RUN npm install |
必要なパッケージをインストールします |
COPY . . |
残りのアプリケーションコードをすべてコピー |
EXPOSE 3000 |
React の開発サーバが使うポート |
CMD |
コンテナ起動時に npm start を実行します |
3. .dockerignore を作成（推奨）
touch .dockerignore
内容：
node_modules
build
dist
4. docker-compose.yml を作成
cd .. # my-react-app/ に戻る
touch docker-compose.yml
内容：
docker-compose.yml
version: '3'
services:
react-app:
build:
context: ./app
ports:
- "3000:3000"
volumes:
- ./app:/usr/src/app
- /usr/src/app/node_modules
stdin_open: true
tty: true
| 行 | 説明 |
|---|---|
version: '3' |
Compose ファイルのバージョン（v3形式で記述） |
services: |
コンテナの構成を定義するセクション（今回は react-app の1サービス） |
react-app: |
react-app という名前のサービスを定義 |
build: |
Docker イメージをビルドするための設定開始 |
context: ./app |
./app ディレクトリをビルドのコンテキスト（= Dockerfileがある場所）に指定 |
ports: |
ホストとコンテナ間のポートのマッピング設定 |
- "3000:3000" |
ホストの3000番ポート → コンテナの3000番ポートをマッピング |
volumes: |
ホスト ↔ コンテナ間のディレクトリ同期設定 |
- ./app:/usr/src/app |
ホスト側の ./app をコンテナ内 /usr/src/app にマウント（ホットリロード対応） |
- /usr/src/app/node_modules |
node_modules をボリューム化し、ホストとの干渉を防止 |
stdin_open: true |
コンテナに標準入力（例: 対話的シェル）を開放 |
tty: true |
仮想端末（TTY）を割り当て、Ctrl + C などを有効に（開発中の対話操作に必要） |
5. Docker Dsktopを起動する
FinderのアプリケーションからDocker Dsktopを起動する
または
docker ps
6. Docker イメージのビルドと起動
docker-compose up --build
- 初回は数分かかります
- 起動後、
http://localhost:3000にアクセス
7. ホットリロード確認
-
app/src/App.tsxなどに変更を加えて保存すると、ブラウザが自動更新されればOK
8. 停止とクリーンアップ
# 停止
Ctrl + C
# 停止後、コンテナを削除
docker-compose down
GitHub へプルリクエストする
1. ブランチを作成
git checkout -b feature/dockerize-react
2. ファイルをコミット
git add Dockerfile docker-compose.yml .dockerignore
git commit -m "Add Docker support for React app"
3. GitHub へプッシュ
git push origin feature/dockerize-react
4. GitHub 上でPR作成
- PRタイトル例:
Dockerize React app for local development - 対象ブランチ:
mainまたはdevelop
localhostで起動する
Docker起動中に http://localhost:3000 にアクセスして動作確認