Raspberry Pi（Debian 13 Trixie, arm64）で Docker を使い、ReactJS（Vite + TypeScript）の開発／本番環境を構築した手順をまとめます。ホストに Node.js を入れず、すべて Docker コンテナだけで完結させるのがポイントです。
1. 概要
- 目的: ホストに Node.js を直接インストールせず、Docker コンテナのみで React 開発環境を構成する
- スタック: React 18 + TypeScript + Vite 5
- 構成: 開発モード（Vite HMR）と本番モード（nginx 静的配信）を分離
-
プロジェクトパス:
/home/pi/dev/react-app
2. 前提条件の確認
docker --version # Docker 29.5.2
docker compose version # Docker Compose v5.1.4
docker ps # sudo なしで実行可能（pi ユーザーが docker グループ所属）
ホストには Node.js をインストールしていません。ビルド・実行はすべてコンテナ内部で行います。
3. プロジェクトのディレクトリ構成
~/dev/react-app/
├── src/
│ ├── main.tsx # エントリーポイント
│ ├── App.tsx # メインコンポーネント
│ ├── App.css
│ ├── index.css
│ └── vite-env.d.ts
├── index.html
├── package.json # React 18 + Vite 5 の依存関係
├── vite.config.ts # host 0.0.0.0 バインド（コンテナ外部アクセス用）
├── tsconfig.json
├── Dockerfile.dev # 開発用（Vite 開発サーバー）
├── Dockerfile # 本番用（マルチステージビルド + nginx）
├── nginx.conf # SPA ルーティング + 静的アセットのキャッシュ
├── docker-compose.yml # dev / prod サービス定義
├── .dockerignore
└── .gitignore
4. 主要な設定ファイル
4-1. vite.config.ts
コンテナ外部（LAN）からアクセスできるよう host: true（0.0.0.0）でバインドし、ボリュームマウント環境でファイル変更を検知できるよう usePolling を有効化しています。
server: {
host: true,
port: 5173,
strictPort: true,
watch: { usePolling: true },
}
4-2. Dockerfile.dev（開発用）
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
EXPOSE 5173
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
4-3. Dockerfile（本番用・マルチステージ）
1 段目で Vite による静的ファイルのビルドを行い、2 段目で nginx イメージに成果物だけをコピーして軽量イメージを作ります。
# 1段目: ビルド
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# 2段目: nginx 配信
FROM nginx:alpine AS production
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
4-4. docker-compose.yml
services:
dev:
build:
context: .
dockerfile: Dockerfile.dev
container_name: react-dev
ports:
- "5173:5173"
volumes:
- .:/app # ソースをリアルタイム反映
- /app/node_modules # コンテナ内部のモジュールを保持
environment:
- CHOKIDAR_USEPOLLING=true
restart: unless-stopped
prod:
build:
context: .
dockerfile: Dockerfile
target: production
container_name: react-prod
ports:
- "8080:80"
restart: unless-stopped
profiles:
- prod
volumesで.:/appとしてソースをマウントしつつ、/app/node_modulesを匿名ボリュームで上書きすることで、ホストに node_modules が無くてもコンテナ内部のモジュールをそのまま使えます。
5. ビルドと実行
開発モード（ホットリロード）
cd ~/dev/react-app
docker compose up -d --build dev
- 初回実行時に
node:20-alpineイメージを取得しnpm installを実行（約 20 秒） - Vite 開発サーバーが 5173 ポートで起動
- アクセス:
http://192.168.1.18:5173 -
src/のファイルを編集すると自動リロード（HMR）
本番モード（ビルド + nginx）
cd ~/dev/react-app
docker compose up -d --build prod
- アクセス:
http://192.168.1.18:8080
6. 動作確認
docker compose ps # コンテナの状態
docker compose logs -f dev # Vite のログ
curl -I http://localhost:5173/ # HTTP 200 を確認
実際の確認結果:
VITE v5.4.21 ready in 824 ms
➜ Local: http://localhost:5173/
localhost:5173 -> HTTP 200
7. よく使うコマンド
| 操作 | コマンド |
|---|---|
| 開発サーバー起動（バックグラウンド） | docker compose up -d dev |
| 開発サーバーのログ | docker compose logs -f dev |
| 停止とクリーンアップ | docker compose down |
| 本番ビルド・実行 | docker compose up -d --build prod |
| イメージ再ビルド | docker compose build --no-cache |
| 依存追加後の反映 | docker compose up -d --build dev |
8. アクセス情報まとめ
| モード | URL | サーバー |
|---|---|---|
| 開発(dev) | http://192.168.1.18:5173 | Vite (HMR) |
| 本番(prod) | http://192.168.1.18:8080 | nginx |
まとめ
Raspberry Pi（arm64）でも、Docker を使えばホストを汚さずに React 開発環境を構築できます。開発時は Vite の HMR、本番時は nginx による静的配信と、用途に応じてコンテナを分けられるのが利点です。Portainer などの管理 UI と組み合わせると、コンテナの状態を視覚的に確認できてさらに便利です。