# インフラ設計書

## 概要

本ドキュメントは、Vue.js Core（vuejs/core）プロジェクトのインフラストラクチャ構成を記載する。本プロジェクトはOSSフロントエンドフレームワークであり、npmパッケージとして配布される特性上、従来のWebアプリケーションとは異なるインフラ構成を持つ。主にCI/CDパイプライン、静的サイトホスティング、パッケージレジストリを中心としたインフラで構成される。

## システム構成

### 全体構成

本プロジェクトのインフラは以下の4つの領域で構成される：

1. **開発環境**: Node.js + pnpm によるローカル開発環境
2. **CI/CD環境**: GitHub Actions による自動テスト・ビルド・リリースパイプライン
3. **パッケージ配布環境**: npm Registry を通じたパッケージ公開、CDN経由のグローバル配布
4. **ホスティング環境**: Netlify（ドキュメントサイト）、Vercel（SFC Playground）による静的サイト配信

### サーバー構成

| サーバー種別 | 役割 | スペック | 台数 |
| --- | --- | --- | --- |
| GitHub Actions Runner (Ubuntu) | CI/CDパイプライン実行（テスト・ビルド・リリース） | ubuntu-latest | オンデマンド |
| GitHub Actions Runner (Windows) | Windows互換性テスト（compiler, ssr） | windows-latest | オンデマンド |
| Netlify CDN | ドキュメントサイト配信 | マネージドサービス | 自動スケーリング |
| Vercel Edge Network | SFC Playground配信 | マネージドサービス | 自動スケーリング |
| npm Registry | パッケージホスティング | マネージドサービス（registry.npmjs.org） | 冗長構成 |

### ネットワーク構成

本プロジェクトは全てクラウドサービス・SaaSベースで構成されており、独自のネットワーク基盤は持たない。

- **GitHub → GitHub Actions**: GitHub内部ネットワーク（HTTPS）
- **GitHub Actions → npm Registry**: HTTPS（registry.npmjs.org）
- **npm Registry → CDN（jsDelivr, unpkg）**: CDNエッジキャッシュ経由で配布
- **GitHub → Netlify**: Webhookトリガーによる自動デプロイ（HTTPS）
- **GitHub → Vercel**: Git連携による自動デプロイ（HTTPS）
- **エンドユーザー → CDN/Netlify/Vercel**: HTTPS（TLS 1.2+）

## ミドルウェア

| ミドルウェア | バージョン | 用途 |
| --- | --- | --- |
| Node.js | 22.14.0 | ビルド・テスト実行ランタイム |
| pnpm | 10.28.2 | パッケージマネージャー・ワークスペース管理 |
| Rollup | ^4.57.0 | パッケージバンドル・本番ビルド |
| esbuild | ^0.27.2 | 高速トランスパイル |
| @swc/core | ^1.15.11 | 高速コンパイル |
| Vite | ^7.3.1 | 開発サーバー・SFC Playground |
| Vitest | ^3.2.4 | テストランナー |
| Puppeteer | ~24.36.1 | E2Eテスト（Chromium） |
| ESLint | ^9.39.2 | コード静的解析 |
| Prettier | ^3.8.1 | コードフォーマッター |
| TypeScript | ~5.6.2 | 型チェック・定義ファイル生成 |
| simple-git-hooks | — | Git Hooks管理（pre-commit, commit-msg） |

## 外部サービス連携

| サービス名 | 用途 | 接続方式 |
| --- | --- | --- |
| GitHub | ソースコード管理・CI/CD・Issue管理・Release管理 | Git（HTTPS）/ GitHub API |
| GitHub Actions | 自動テスト・ビルド・リリースパイプライン | GitHub内部トリガー（push, tag, PR） |
| npm Registry | パッケージ公開・配布 | HTTPS（registry.npmjs.org） |
| Netlify | ドキュメントサイトホスティング | Webhookデプロイ（netlify.toml設定） |
| Vercel | SFC Playgroundホスティング | Git連携自動デプロイ（vercel.json設定） |
| jsDelivr | CDN経由でのパッケージ配布 | CDNキャッシュ（npm連携） |
| unpkg | CDN経由でのパッケージ配布 | CDNキャッシュ（npm連携） |
| pkg-pr-new | PRベースのプレビューパッケージ公開 | GitHub Actions内実行 |

## スケーリング設計

本プロジェクトはnpmパッケージとして配布されるOSSフレームワークのため、従来のWebアプリケーションとは異なるスケーリング特性を持つ。

### CI/CDスケーリング
- **GitHub Actions**: ジョブ並列実行によるスケーリング。テストジョブは `unit-test`、`unit-test-windows`、`e2e-test`、`lint-and-test-dts` の4並列で実行
- **ビルド**: マルチパッケージ構成（15+パッケージ）を順次ビルド

### 配布スケーリング
- **npm Registry**: グローバルCDNによる自動スケーリング
- **Netlify**: エッジネットワークによる自動スケーリング・地理分散配信
- **Vercel**: エッジネットワークによる自動スケーリング、アセットに対する長期キャッシュ（max-age=31536000秒, immutable）

## 可用性設計

### ソースコード管理
- **GitHub**: SLA 99.9%以上。Git分散型管理により各開発者のローカルにも完全なコピーが存在

### パッケージ配布
- **npm Registry**: 冗長構成、グローバルCDN配布
- **jsDelivr / unpkg**: 複数CDNプロバイダーによる冗長化。npm Registryがダウンしても既存キャッシュから配信可能

### ホスティング
- **Netlify**: 自動フェイルオーバー、グローバルCDN
- **Vercel**: 自動フェイルオーバー、エッジネットワーク

### CI/CD
- **GitHub Actions**: GitHub側で冗長化。ジョブ失敗時は手動再実行が可能

## バックアップ設計

| 対象 | 方式 | 頻度 | 保持期間 |
| --- | --- | --- | --- |
| ソースコード | Git分散管理（GitHub + 各開発者ローカル） | リアルタイム（push毎） | 永続（Git履歴全体） |
| npmパッケージ | npm Registry永続保存 | リリース毎（タグトリガー） | 永続（unpublish制限あり） |
| ビルドアーティファクト | GitHub Actions Artifacts | CI実行毎 | 90日（GitHub既定） |
| ビルドサイズデータ | GitHub Actions Artifacts（size-data） | PR/push毎 | 90日（GitHub既定） |
| ドキュメントサイト | Netlifyデプロイ履歴 | デプロイ毎 | プラン依存 |
| SFC Playground | Vercelデプロイ履歴 | デプロイ毎 | プラン依存 |

## 監視設計

### CI/CDパイプライン監視
- **GitHub Actions ワークフロー**: 実行結果（成功/失敗）はGitHub UIおよびメール通知で確認
- **ビルドサイズ監視**: `size-report.yml` ワークフローにより、PRごとにビルドサイズの変動をPRコメントとしてレポート
- **エコシステムCI**: `ecosystem-ci-trigger.yml` により、Vue.jsエコシステム全体への影響を検証

### パッケージ配布監視
- **npm公開成功確認**: リリースワークフロー内で公開結果を確認
- **GitHub Release作成**: `yyx990803/release-tag` アクションによる自動Release作成

### セキュリティ監視
- **依存関係脆弱性**: GitHub Dependabot（推定）による自動スキャン
- **GitHub Actions権限**: 最小権限の原則に基づく権限設定
  - テスト: `contents: read`
  - リリース: `contents: write`, `id-token: write`（OIDC）
  - サイズレポート: `contents: read`, `pull-requests: write`, `issues: write`
- **エコシステムCIアクセス制御**: vuejs Organization メンバーシップ検証

### コード品質監視
- **pre-commit Hook**: `lint-staged` によるESLint・Prettier自動実行
- **commit-msg Hook**: コミットメッセージ規約の自動検証（`scripts/verify-commit.js`）

## 備考

### プロジェクト特性

本プロジェクトはnpmパッケージとして配布されるOSSフロントエンドフレームワーク（Vue.js Core）であるため、以下のインフラ要素は意図的に含まれていない：

- **Docker / Kubernetes**: コンテナ化は不要（ライブラリとして利用者側で統合）
- **Terraform / CloudFormation**: 独自インフラ基盤を持たないためIaCは不要
- **データベース**: フレームワーク自体はDBを使用しない
- **ロードバランサー / リバースプロキシ**: CDN/マネージドサービスに委譲
- **メッセージキュー**: 該当なし
- **環境変数ファイル (.env)**: OSSのため秘密情報管理はCI/CD側のSecrets機能で実施

### 開発環境要件

| 項目 | 要件 |
| --- | --- |
| Node.js | >=18.12.0（推奨: 22.14.0） |
| パッケージマネージャー | pnpm 10.28.2 |
| OS | macOS / Linux / Windows |
| エディタ | 特に制限なし |

### ワークスペース構成

```
packages/          # 公開パッケージ（15+パッケージ）
  ├── vue/
  ├── server-renderer/
  ├── compiler-sfc/
  ├── runtime-core/
  ├── runtime-dom/
  ├── reactivity/
  ├── compiler-dom/
  ├── compiler-ssr/
  └── ...
packages-private/  # 非公開・開発用パッケージ（8+パッケージ）
  ├── sfc-playground/
  └── ...
```

### ビルド出力形式

| 形式 | 用途 |
| --- | --- |
| esm-bundler | バンドラー（Webpack, Vite等）用ESM |
| esm-browser | ブラウザ直接読み込み用ESM |
| cjs | CommonJS（Node.js互換） |
| global | ブラウザグローバルスコープIIFE |
| esm-bundler-runtime | ランタイムのみESM（バンドラー用） |
| esm-browser-runtime | ランタイムのみESM（ブラウザ用） |
| global-runtime | ランタイムのみIIFE |
