# バッチ設計書 10-build-preview

## 概要

本ドキュメントは、Decap CMSプロジェクトにおけるbuild-previewバッチのバッチ設計書である。package.jsonのscripts.build-previewで定義された、全パッケージビルド後にプレビュー用ビルドを実行するバッチ処理について記述する。

### 本バッチの処理概要

本バッチは、Decap CMSの全パッケージをビルドした後、decap-cmsパッケージのプレビュー用ビルドを実行するバッチである。`npm run build && nx run decap-cms:build-preview --output-style=stream`コマンドにより、まず全パッケージの通常ビルドを実行し、その後decap-cmsパッケージでWebpack Dev Serverを起動してプレビュー確認を行う。

**業務上の目的・背景**：Decap CMSの開発・レビュー時に、ビルド成果物をブラウザで即座に確認するためのプレビュー環境が必要である。本バッチはproductionモードでビルドした上でWebpack Dev Serverを起動し、ブラウザを自動的に開くことで、リリース前のビルド成果物の動作確認を容易にする。通常のdevelopモード（npm run develop）とは異なり、productionビルドの動作確認に特化している。

**バッチの実行タイミング**：手動実行（npm run build-preview）により開発者が必要に応じて実行する。

**主要な処理内容**：
1. npm run build（全パッケージのESM+UMDビルド、No.7の処理全体）
2. nx run decap-cms:build-preview（decap-cmsパッケージのWebpack Dev Server起動 + ブラウザ自動オープン）

**前後の処理との関連**：No.7（build）を内部で呼び出す。本バッチは開発者向けのプレビュー用であり、後続のバッチは存在しない。Nxの--output-style=streamオプションにより、Webpack Dev Serverの出力がストリーミング表示される。

**影響範囲**：packages/配下の全パッケージにビルド成果物が生成される。Webpack Dev Serverがローカルで起動し、ブラウザが自動的に開かれる。

## バッチ種別

ビルド（プレビュー用ビルド - 開発者向け動作確認）

## 実行スケジュール

| 項目 | 内容 |
|-----|------|
| 実行頻度 | 随時（手動実行） |
| 実行時刻 | 該当なし |
| 実行曜日 | 該当なし |
| 実行日 | 該当なし |
| トリガー | npm run build-preview（手動） |

## 実行条件

### 前提条件

| 条件 | 説明 |
|-----|------|
| Node.js実行環境 | Node.js（22.x以上推奨）がインストールされていること |
| npm依存関係 | npm ciまたはnpm installが完了していること |
| ポートの空き | Webpack Dev Serverのデフォルトポートが利用可能であること |

### 実行可否判定

特別な実行可否判定ロジックは存在しない。npm run build-previewコマンドの実行により即座に処理が開始される。

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | デフォルト値 | 説明 |
|-------------|-----|-----|-------------|------|
| NODE_ENV | 環境変数 | No | production（cross-envで設定） | ビルドモード。build-previewではproductionに固定される |

### 入力データソース

| データソース | 形式 | 説明 |
|-------------|------|------|
| packages/*/src/ | TypeScript/JavaScript | 全パッケージのソースコード |
| packages/decap-cms/webpack.config.js | JavaScript | decap-cmsパッケージのWebpack設定 |
| scripts/webpack.js | JavaScript | 共通のWebpackビルド設定 |

## 出力仕様

### 出力データ

| 出力先 | 形式 | 説明 |
|-------|------|------|
| packages/*/dist/ | JavaScript | 全パッケージのビルド成果物（buildの出力） |
| Webpack Dev Server | HTTP | ローカルサーバーで配信されるプレビューサイト |
| ブラウザ | 自動オープン | プレビューサイトがブラウザで自動的に開かれる |

### 出力ファイル仕様

| 項目 | 内容 |
|-----|------|
| ファイル名 | packages/*/dist/配下のビルド成果物（buildの出力） |
| 出力先 | packages/*/dist/ + Webpack Dev Serverによるインメモリ配信 |
| 文字コード | UTF-8 |
| 区切り文字 | 該当なし |

## 処理フロー

### 処理シーケンス

```
1. npm run build
   ├─ npm run build:esm（全パッケージのESMビルド）
   └─ nx run-many -t build（全パッケージのUMDビルド）
2. nx run decap-cms:build-preview --output-style=stream
   └─ decap-cmsパッケージのbuild-previewタスクを実行
       └─ cross-env NODE_ENV=production webpack serve --open
           ├─ productionモードでWebpack Dev Serverを起動
           └─ --openオプションでブラウザを自動的に開く
3. Webpack Dev Serverが起動中（プロセスが継続）
   └─ 開発者がCtrl+Cで停止するまでサーバーが稼働
```

### フローチャート

```mermaid
flowchart TD
    A[npm run build-preview] --> B[npm run build]
    B --> C[npm run build:esm: ESMビルド]
    C --> D[nx run-many -t build: UMDビルド]
    D --> E{ビルド成功?}
    E -->|失敗| F[ビルドエラー]
    E -->|成功| G[nx run decap-cms:build-preview]
    G --> H[cross-env NODE_ENV=production webpack serve --open]
    H --> I[Webpack Dev Server起動]
    I --> J[ブラウザ自動オープン]
    J --> K[プレビュー表示中: サーバー稼働継続]
    K --> L[開発者がCtrl+Cで停止]
```

## データベース操作仕様

### 操作別データベース影響一覧

本バッチではデータベース操作は行わない。

| 処理 | 対象テーブル | 操作種別 | 概要 |
|-----|-------------|---------|------|
| 該当なし | 該当なし | 該当なし | 該当なし |

### テーブル別操作詳細

該当なし

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | ビルドエラー | npm run buildが失敗した場合 | No.7（build）のエラー処理に従う |
| - | ポート競合 | Webpack Dev Serverのポートが既に使用中の場合 | 競合するプロセスを停止するか、ポート設定を変更する |
| - | メモリ不足 | Webpackビルド時にメモリが不足した場合 | NODE_OPTIONSで--max-old-space-sizeを増加させる |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | 自動リトライなし |
| リトライ間隔 | 該当なし |
| リトライ対象エラー | 該当なし |

### 障害時対応

ビルド・起動失敗時は以下の手順で対応する：
1. ビルドエラーの場合はNo.7（build）の障害時対応に従う
2. ポート競合の場合は競合プロセスを終了する
3. npm run cleanでクリーンな状態にしてから再実行する

## トランザクション仕様

| 項目 | 内容 |
|-----|------|
| トランザクション範囲 | 該当なし（ファイルシステム操作のみ） |
| コミットタイミング | 該当なし |
| ロールバック条件 | npm run cleanで全ビルド成果物を削除可能 |

## パフォーマンス要件

| 項目 | 内容 |
|-----|------|
| 想定処理件数 | 全パッケージのビルド + decap-cmsパッケージのDev Server起動 |
| 目標処理時間 | 明示的な上限なし（ビルド5-15分 + サーバー起動数秒） |
| メモリ使用量上限 | decap-cmsパッケージではmax_old_space_size=4096が設定されている |

## 排他制御

明示的な排他制御は設定されていない。Webpack Dev Serverがポートをバインドするため、同一ポートでの複数起動は不可能である。

## ログ出力

| ログ種別 | 出力タイミング | 出力内容 |
|---------|--------------|---------|
| ビルドログ | npm run build実行中 | No.7（build）と同じビルドログ |
| Dev Serverログ | webpack serve実行中 | Webpack Dev Serverのコンパイル状況、ポート情報 |
| ストリーム出力 | --output-style=stream | Nxタスクの出力がリアルタイムでストリーミング表示される |
| エラーログ | エラー発生時 | ビルドエラーまたはサーバーエラーの詳細 |

## 監視・アラート

| 監視項目 | 閾値 | アラート先 |
|---------|-----|----------|
| ビルド成功/失敗 | 失敗時 | コンソール出力 |

## 備考

- decap-cmsパッケージのbuild-previewスクリプトは`cross-env NODE_ENV=production webpack serve --open`を実行する
- NODE_ENV=productionが設定されるため、Webpackはproductionモードで動作する（minification等の最適化が適用される）
- --openオプションによりデフォルトブラウザが自動的に開かれる
- Nxの--output-style=streamオプションにより、Dev Serverのログがリアルタイムでストリーム表示される
- decap-cmsパッケージのwebpackスクリプトでは--max_old_space_size=4096が設定されており、メモリ上限が4GBに拡張されている
- Webpack Dev Serverはプロセスが継続するため、開発者がCtrl+Cで手動停止する必要がある
- 通常のdevelop（npm run develop）はホットリロード付きの開発モードだが、build-previewはproductionビルドの確認用である
