Dockerfile
| 内容 |
説明 |
| 目的 |
Docker イメージを定義するための設計図 |
| 役割 |
React アプリの依存インストール・ビルド・起動方法を定義 |
| 使用例 |
npm install で依存を入れ、npm start で開発サーバを起動する |
よく使われる要素:
FROM node:18 # Node.js の公式ベースイメージ
WORKDIR /usr/src/app # 作業ディレクトリ
COPY package*.json ./ # パッケージ定義のみ先にコピー
RUN npm install # 依存関係をインストール
COPY . . # 残りのコードをコピー
EXPOSE 3000 # 開発サーバのポートを開放
CMD ["npm", "start"] # サーバ起動コマンド
.dockerignore
| 内容 |
説明 |
| 目的 |
Docker イメージ作成時に含めないファイル/フォルダを指定 |
| 役割 |
不要なファイル（例: node_modules, dist）のコピーを防ぎ、ビルド効率化と軽量化を実現 |
| 使用例 |
以下のようにファイルを指定： |
node_modules
dist
build
.git
.env
docker-compose.yml
| 内容 |
説明 |
| 目的 |
複数の Docker コンテナ構成をまとめて管理・起動するためのファイル |
| 役割 |
コンテナのビルドパス、ポート、ボリューム、依存関係を定義。開発用だけでなく将来的にDBやAPIも追加可能 |
| 使用例 |
docker-compose up で一発起動できるReactアプリ構成 |
よく使われる例:
services:
react-app:
build:
context: ./app
ports:
- "3000:3000"
volumes:
- ./app:/usr/src/app
- /usr/src/app/node_modules
tty: true
stdin_open: true
ディレクトリ構成
React プロジェクト全体は以下のような構造になります：
my-react-app/
├── docker-compose.yml # Composeによる統合設定ファイル（ホスト側）
├── app/ # Reactアプリ本体（Dockerビルド対象）
│ ├── Dockerfile # Docker イメージ設計ファイル
│ ├── .dockerignore # Dockerビルド時に除外するファイル指定
│ ├── package.json # npm依存・スクリプトなど定義
│ ├── package-lock.json # npmの依存固定ファイル
│ ├── tsconfig.json # TypeScript のコンパイル設定
│ ├── public/ # 静的ファイル（index.html, favicon等）
│ │ └── index.html # HTMLテンプレート（Reactがマウントされる）
│ ├── src/ # Reactアプリのメインコード（以下詳細）
│ │ ├── main.tsx # アプリのエントリーポイント
│ │ ├── App.tsx # アプリのルートコンポーネント
│ │ ├── index.css # グローバルCSS（またはreset）
│ │ ├── assets/ # 画像やフォントなどの静的アセット
│ │ ├── components/ # UIコンポーネント群（Button, Cardなど）
│ │ │ └── Button.tsx # 例：ボタンコンポーネント
│ │ ├── pages/ # 画面単位のコンポーネント（例: Home, About）
│ │ │ └── Home.tsx # 例：ホーム画面のコンポーネント
│ │ ├── styles/ # CSS, SCSS, Tailwindなどスタイル定義
│ │ │ └── global.css # 共通スタイル
│ │ ├── hooks/ # カスタムReactフック
│ │ │ └── useToggle.ts # 例：トグル用のカスタムフック
│ │ ├── utils/ # 汎用関数・共通処理（例：日付変換）
│ │ │ └── formatDate.ts # 日付フォーマッター
│ │ ├── types/ # 型定義ファイル（interface, enumなど）
│ │ │ └── User.ts # 例：ユーザー型
│ │ └── constants/ # アプリ内定数（URL, メッセージなど）
│ │ └── urls.ts # API URL 定義
│ └── ...
各ファイルの位置と役割まとめ
| パス |
役割 |
docker-compose.yml |
Reactアプリのビルド〜起動までの全体管理。複数コンテナにも対応可能 |
app/Dockerfile |
Reactアプリ用の Docker イメージを構築する設計図 |
app/.dockerignore |
Dockerイメージ作成時に除外するファイルを指定。無駄なコピーやビルドの失敗を防止 |
app/package.json |
Reactアプリの依存・スクリプト・基本設定 |
app/public/ |
静的ファイル（index.htmlなど） |
app/src/ |
Reactのロジックやコンポーネントなどの実装ソースコード |
app/src/index.css |
React のエントリーポイント（main.tsxやindex.tsx）で import される最小構成のCSS
- reset.cssやnormalize.css、bodyなどの基本定義 |
app/src/styles/global.css |
色・フォント・ボーダー・背景・ユーティリティクラスなど「再利用性の高い」共通スタイル
- Tailwind を使っていないプロジェクトでは特に多用される |
参考リンク
