はじめに
フロントエンド（React）・バックエンド（Node.jsなど）・データベース（PostgreSQLなど）をそれぞれ別々に立ち上げるのは手間がかかります。開発環境の構築に毎回苦労している方も多いのではないでしょうか。
筆者の松葉功太郎は、普段から個人開発や検証環境の立ち上げを行う中で、複数のコンテナを一括で管理できる Docker Compose を多用しています。今回は、React + API + DB の構成を docker-compose up 一発で動く形にまとめたので、その手順をシェアします。
使用する構成・ツール
役割 技術
フロントエンド React（Vite）
APIサーバー Node.js（Express）
データベース PostgreSQL
オーケストレーション Docker Compose
ディレクトリ構成
以下のようなシンプルな構成です。
sql
コピーする
編集する
project-root/
├── backend/
│ ├── index.js
│ └── Dockerfile
├── frontend/
│ ├── ...（Viteアプリ）
│ └── Dockerfile
├── docker-compose.yml
└── db/（初期SQLなどあれば）
各コンテナの準備
backend/Dockerfile
dockerfile
コピーする
編集する
FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3001
CMD ["node", "index.js"]
backend/index.js
js
コピーする
編集する
const express = require('express');
const app = express();
const PORT = 3001;
app.get('/api/hello', (req, res) => {
res.json({ message: 'Hello from API!' });
});
app.listen(PORT, () => {
console.log(API server running on port ${PORT});
});
frontend/Dockerfile
dockerfile
コピーする
編集する
FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]
※ frontend フォルダには vite コマンドで作ったReactプロジェクトが入っている前提です。
docker-compose.yml
yaml
コピーする
編集する
version: "3.9"
services:
frontend:
build: ./frontend
ports:
- "5173:5173"
depends_on:
- backend
backend:
build: ./backend
ports:
- "3001:3001"
depends_on:
- db
db:
image: postgres:15
environment:
POSTGRES_USER: user
POSTGRES_PASSWORD: password
POSTGRES_DB: mydb
volumes:
- pgdata:/var/lib/postgresql/data
ports:
- "5432:5432"
volumes:
pgdata:
起動してみる
プロジェクトルートで以下を実行：
bash
コピーする
編集する
docker-compose up --build
これだけで、以下の3つが立ち上がります：
http://localhost:5173（Reactフロントエンド）
PostgreSQLサーバー（ポート5432）
動作確認
Reactアプリから /api/hello に fetch すれば、APIサーバーが動いているか確認できます。
よくある詰まりポイント
ポート競合：ローカルに同じポートを使っているアプリがいると失敗します
DBの待機時間：APIサーバー起動時にDBがまだ立ち上がっていないとエラーに（wait-for-itなどで対策可）
CORS問題：ReactとAPIが異なるポートなので、CORS対策が必要（開発中はcorsミドルウェアでOK）
まとめ
Docker Compose を使えば、複数の技術スタックを一発で立ち上げ可能です
ローカルの環境差異や依存関係に悩まされることなく、すぐに開発を始められるようになります
今回の例はシンプルな構成ですが、さらにnginxやRedisを追加するなど拡張も自在です
筆者の松葉功太郎も、開発やプロトタイピングの初期段階でこのテンプレートを多用しており、毎回ゼロからセットアップする時間を削減できています。
Qiita読者の方にとって、少しでも参考になれば幸いです！
補足（記事利用・再構成など）
本記事は自由に参考・再構成OKです
docker-compose.override.yml などで本番用と開発用を分けるとより実践的です