# インフラ構成図

## 全体構成図

```mermaid
graph TB
    subgraph Dev["開発環境"]
        direction TB
        DevLocal["ローカル開発マシン<br/>Node.js 22.14.0<br/>pnpm 10.28.2"]
        DevVite["Vite DevServer<br/>SFC Playground"]
        DevHooks["Git Hooks<br/>simple-git-hooks<br/>lint-staged"]
        DevLocal --> DevVite
        DevLocal --> DevHooks
    end

    subgraph GitHub["GitHub (vuejs/core)"]
        direction TB
        Repo["Git Repository<br/>ソースコード管理"]
        Issues["Issues / PRs<br/>タスク管理"]
        Secrets["GitHub Secrets<br/>NPM_TOKEN等"]
        Repo --- Issues
        Repo --- Secrets
    end

    subgraph CICD["CI/CD パイプライン (GitHub Actions)"]
        direction TB

        subgraph TestJobs["テストジョブ"]
            UnitTest["Unit Test<br/>ubuntu-latest<br/>Vitest"]
            WinTest["Windows Test<br/>windows-latest<br/>compiler, ssr"]
            E2ETest["E2E Test<br/>ubuntu-latest<br/>Puppeteer + Chromium"]
            LintTest["Lint & DTS Test<br/>ubuntu-latest<br/>ESLint, Prettier, tsc"]
        end

        subgraph BuildJobs["ビルドジョブ"]
            Build["Production Build<br/>pnpm build --withTypes<br/>Rollup + esbuild"]
            SizeReport["Size Report<br/>ビルドサイズ計測<br/>PR コメント通知"]
        end

        subgraph ReleaseJobs["リリースジョブ"]
            Release["Release<br/>pnpm release --publishOnly<br/>environment: Release"]
            PRPreview["PR Preview<br/>pkg-pr-new<br/>プレビュー公開"]
        end

        TestJobs --> BuildJobs
        BuildJobs --> ReleaseJobs
    end

    subgraph Publish["パッケージ配布"]
        direction TB
        NPM["npm Registry<br/>registry.npmjs.org<br/>15+ パッケージ"]
        GHRelease["GitHub Releases<br/>タグベースリリース<br/>Changelog"]
    end

    subgraph Hosting["ホスティング"]
        direction TB
        Netlify["Netlify<br/>ドキュメントサイト<br/>Node.js 22"]
        Vercel["Vercel<br/>SFC Playground<br/>アセットキャッシュ 1年"]
    end

    subgraph CDN["CDN 配布"]
        direction TB
        JSDelivr["jsDelivr<br/>グローバルCDN"]
        Unpkg["unpkg<br/>グローバルCDN"]
    end

    subgraph EndUsers["エンドユーザー"]
        direction TB
        Developers["フレームワーク利用者<br/>npm install vue"]
        BrowserUsers["ブラウザユーザー<br/>CDN経由利用"]
        DocUsers["ドキュメント閲覧者<br/>vuejs.org"]
    end

    Dev -->|"git push"| GitHub
    GitHub -->|"push/PR/tag トリガー"| CICD
    CICD -->|"npm publish"| NPM
    CICD -->|"release-tag action"| GHRelease
    GitHub -->|"Webhook"| Netlify
    GitHub -->|"Git連携"| Vercel
    NPM -->|"CDN キャッシュ"| JSDelivr
    NPM -->|"CDN キャッシュ"| Unpkg
    NPM -->|"npm install"| Developers
    CDN -->|"script src"| BrowserUsers
    Hosting -->|"HTTPS"| DocUsers
```

## CI/CD パイプライン詳細図

```mermaid
flowchart LR
    subgraph Trigger["トリガー"]
        Push["git push<br/>(全ブランチ)"]
        PR["Pull Request<br/>(main, minor)"]
        Tag["git tag<br/>(v* パターン)"]
        Comment["/ecosystem-ci run<br/>(PRコメント)"]
    end

    subgraph CI["ci.yml"]
        CITest["test ジョブ<br/>(release: 以外)"]
        CIRelease["continuous-release<br/>(本リポジトリのみ)"]
    end

    subgraph Test["test.yml (リユーザブル)"]
        UT["unit-test<br/>Ubuntu"]
        WT["unit-test-windows<br/>Windows"]
        E2E["e2e-test<br/>Puppeteer"]
        Lint["lint-and-test-dts<br/>ESLint/tsc"]
    end

    subgraph Release["release.yml"]
        RTest["テスト実行"]
        RPub["npm publish<br/>(environment: Release)"]
        RTag["GitHub Release<br/>作成"]
    end

    subgraph Size["size-report"]
        SData["size-data.yml<br/>サイズ計測"]
        SReport["size-report.yml<br/>PR コメント"]
    end

    subgraph Eco["ecosystem-ci"]
        EcoTrigger["トリガー検証<br/>(vuejs メンバー)"]
        EcoRun["エコシステム<br/>CI 実行"]
    end

    Push --> CI
    PR --> CI
    CI --> Test
    CIRelease -->|"pkg-pr-new"| PRPreview["PR Preview<br/>公開"]

    Tag --> Release
    RTest --> RPub
    RPub --> RTag

    Push --> SData
    PR --> SData
    SData --> SReport

    Comment --> EcoTrigger
    EcoTrigger --> EcoRun
```

## ネットワーク・通信フロー図

```mermaid
flowchart TB
    subgraph Internet["インターネット"]
        direction TB

        subgraph DevEnv["開発者"]
            Dev["開発マシン"]
        end

        subgraph GitHubCloud["GitHub Cloud"]
            GHRepo["Repository"]
            GHActions["Actions Runner<br/>(Ubuntu/Windows)"]
            GHSecrets["Secrets Store"]
        end

        subgraph NPMCloud["npm"]
            NPMReg["npm Registry<br/>registry.npmjs.org"]
        end

        subgraph CDNLayer["CDN"]
            JSDelivr2["jsDelivr"]
            Unpkg2["unpkg"]
        end

        subgraph HostingLayer["Hosting"]
            NetlifyCDN["Netlify CDN"]
            VercelEdge["Vercel Edge"]
        end

        subgraph Users["ユーザー"]
            FWUser["フレームワーク<br/>利用者"]
            WebUser["Webサイト<br/>閲覧者"]
        end
    end

    Dev -->|"HTTPS (git push)"| GHRepo
    GHRepo -->|"Internal trigger"| GHActions
    GHSecrets -->|"NPM_TOKEN"| GHActions
    GHActions -->|"HTTPS (npm publish)"| NPMReg
    GHRepo -->|"Webhook (HTTPS)"| NetlifyCDN
    GHRepo -->|"Git sync (HTTPS)"| VercelEdge
    NPMReg -->|"CDN cache sync"| JSDelivr2
    NPMReg -->|"CDN cache sync"| Unpkg2
    NPMReg -->|"npm install (HTTPS)"| FWUser
    JSDelivr2 -->|"HTTPS"| WebUser
    Unpkg2 -->|"HTTPS"| WebUser
    NetlifyCDN -->|"HTTPS"| WebUser
    VercelEdge -->|"HTTPS"| WebUser
```

## 権限・セキュリティ構成図

```mermaid
flowchart TB
    subgraph Permissions["GitHub Actions 権限管理"]
        direction TB

        subgraph TestPerm["テストワークフロー"]
            TP["permissions:<br/>contents: read"]
        end

        subgraph ReleasePerm["リリースワークフロー"]
            RP["permissions:<br/>contents: write<br/>id-token: write"]
            RE["environment: Release<br/>(デプロイメント保護)"]
        end

        subgraph SizePerm["サイズレポート"]
            SP["permissions:<br/>contents: read<br/>pull-requests: write<br/>issues: write"]
        end

        subgraph EcoPerm["エコシステムCI"]
            EP["アクセス制御:<br/>vuejs Org メンバー<br/>のみ実行可"]
        end
    end

    subgraph CodeQuality["コード品質ゲート"]
        PreCommit["pre-commit<br/>lint-staged + check"]
        CommitMsg["commit-msg<br/>verify-commit.js"]
        CICheck["CI テスト<br/>全テスト通過必須"]
    end

    PreCommit -->|"通過"| CommitMsg
    CommitMsg -->|"通過"| CICheck
    CICheck -->|"通過"| ReleasePerm
```
