実施条件
- Node.js + React 環境が構築済み
-
プロジェクトに
storybookが導入されているnpx storybook@latest init - Docker / Docker Compose が使える環境
環境
| ツール | バージョン |
|---|---|
| Node.js | 22.5.1 |
| npm | 10.8.2 |
| React | 19.1.0 |
| TypeScript | 5.x.x |
| Storybook | 最新安定版（9.0 時点） |
ディレクトリ構造
my-react-app/
├── docker-compose.yml
├── app/
│ ├── Dockerfile
│ ├── .dockerignore
│ ├── package.json
│ ├── public/
│ ├── src/
│ └── ...（その他Reactのファイル）
または
my-react-app/
├── docker-compose.yml
├── docker-compose.override.yml
├── app/
│ ├── Dockerfile
│ ├── .dockerignore
│ ├── package.json
│ ├── public/
│ ├── src/
│ └── ...（その他Reactのファイル）
Storybook専用環境の構築手順
1. Dockerfile を編集する
Reactアプリに合わせた Dockerfile に、Storybook起動用のCMDを指定
以下は一例です（既存のReactアプリ用DockerfileをStorybook用に書き換えたもの）。
Dockerfile
# Build stage
## 1. Node.js の公式イメージを使う（18バージョン）
FROM node:20
## 2. 作業ディレクトリを作成（この中にファイルを配置）
WORKDIR /app
## 3. パッケージ情報を先にコピー（キャッシュを活かせる）
COPY package*.json ./
## 4. 依存関係をインストール
RUN npm install
# Production stage
## 1. 残りのソースコードをすべてコピー
COPY . .
## 2. ポート6006を開ける（Storybook用サーバ）
EXPOSE 6006 ←Storybook起動用のポート
## 3. Storybookの起動コマンドを追加
CMD ["npm", "run", "storybook"] ←Storybook起動用のCMD
2. docker-compose.yml を編集する
cd .. # my-react-app/ に戻る
-
appサービスのcommandにnpm run storybookを指定 - ポート
6006を開放
docker-compose.yml
version: "3.8"
services:
app:
build: .
volumes:
- .:/app
- /app/node_modules
ports:
- "6006:6006" ←Storybook起動用のポート
command: npm run storybook ←Storybook起動用のcommand
3. Docker Compose でビルド＆起動
以下のコマンドを実行して、Storybookコンテナを起動
docker-compose up --build
4. アクセス確認
| サービス | URL |
|---|---|
| Storybook | http://localhost:6006 |
StorybookのUIが表示されれば成功！
開発・Storybook併用環境の構築手順
1. Dockerfile を編集する
Reactアプリ用として基本のCMDを npm start に設定しておき、Storybookは docker-compose.yml 側で command により切り替える運用にします。
Dockerfile
# Build stage
## 1. Node.js の公式イメージを使う（18バージョン）
FROM node:20
## 2. 作業ディレクトリを作成（この中にファイルを配置）
WORKDIR /poc-v02
## 3. パッケージ情報を先にコピー（キャッシュを活かせる）
COPY package*.json ./
## 4. 依存関係をインストール
RUN npm install
# Production stage
## 1. 残りのソースコードをすべてコピー
COPY . .
## 2. ポート3000を開ける（Reactの開発サーバ用）
EXPOSE 3000 ←React起動用のポート(デフォルト)
## 3. React 開発サーバを起動
CMD ["npm", "start"] ←React起動用のCMD(デフォルト)
2. docker-compose.yml を用意する
基本的なReact開発用設定を行い、command や ports を必要に応じて切り替えられるようにしておきます。
docker-compose.yml
version: "3.8"
services:
app:
build: .
volumes:
- .:/app
- /app/node_modules
ports:
- "3000:3000" ←React起動用のポート(デフォルト)
command: npm start ←React起動用のCMD(デフォルト)
3. docker-compose.override.yml を用意する（Storybook用）
Storybookを起動したいときは、以下の override ファイルを使って command と ports を上書きします。
docker-compose.override.yml
version: "3.8"
services:
app:
ports:
- "6006:6006" ←Storybook起動用のポート
command: npm run storybook ←Storybook起動用のCMD
4. Docker Compose でビルド＆起動
-
Reactアプリの起動（開発環境）
docker-compose -f docker-compose.yml up --build -
ReactアプリとStorybookの起動
→docker-compose upコマンドは自動的に両方のファイル（yml+override.yml）をマージして使うため、override.ymlのcommand: npm run storybookやports: 6006:6006が優先され、Reactアプリ（3000番）は起動しない。
= Storybookのみ起動docker-compose up --build -
Storybookの起動（override付き）
docker-compose -f docker-compose.yml -f docker-compose.override.yml up --build
5. アクセス確認
| サービス | URL |
|---|---|
| Reactアプリ | http://localhost:3000 |
| Storybook | http://localhost:6006 |
開発中アプリまたは、StorybookのUIが表示されれば成功！
補足
-
DockerfileのCMDとdocker-compose.ymlのcommandは上書き関係 -
Dockerfileに複数のCMDを書いても、最後の1つしか有効にならない -
docker-compose.ymlのcommand:を使うことで、環境に応じて柔軟に切り替えが可能 -
docker-compose.override.ymlは通常のdocker-compose upにも自動で読み込まれる
→Storybook専用起動用のコマンドを個別に使いたい場合は別名ファイル（例:-f override-storybook.yml）にするのが推奨 -
overrideファイルは上書き用であり、単体でサービス定義を完結させるものではない - 必ず
docker-compose.ymlとセットで使う必要がある