CI/CD & デプロイフロー図

[shuji-bonji]

CI/CD & デプロイフロー図

1. PR作成時のCIフロー

graph TB
    subgraph "開発者"
        A[Feature Branch作成] --> B[コード変更]
        B --> C[git push]
    end
    
    subgraph "GitHub"
        C --> D[Pull Request作成]
        D --> E{CI Workflow<br/>起動}
    end
    
    subgraph "GitHub Actions - CI"
        E --> F[並列実行開始]
        
        F --> G[build]
        F --> H[type-check]
        F --> I[lint]
        F --> J[unit-tests]
        
        G --> K{全ジョブ成功?}
        H --> K
        I --> K
        J --> K
        
        K -->|Yes| L[✅ CI Status: Success]
        K -->|No| M[❌ CI Status: Failed]
    end
    
    subgraph "PR Status"
        L --> N[マージ可能]
        M --> O[マージ不可]
    end
    
    style A fill:#e1f5fe
    style D fill:#fff3e0
    style L fill:#c8e6c9
    style M fill:#ffcdd2
    style N fill:#a5d6a7
    style O fill:#ef9a9a

Loading

2. mainブランチマージ時のデプロイフロー

graph TB
    subgraph "開発フロー"
        A[PR承認] --> B[mainブランチへマージ]
    end
    
    subgraph "GitHub Actions - Deploy"
        B --> C[Deploy Workflow起動]
        
        C --> D[Checkout Code]
        D --> E[Setup Node.js 20]
        E --> F[npm ci<br/>依存関係インストール]
        F --> G[npm run build<br/>静的サイト生成]
        
        G --> H{ビルド成功?}
        H -->|Yes| I[Upload Pages Artifact<br/>buildディレクトリ]
        H -->|No| J[❌ ビルド失敗]
        
        I --> K[Deploy Job起動]
        K --> L[GitHub Pages デプロイ]
        L --> M[✅ デプロイ完了]
    end
    
    subgraph "公開サイト"
        M --> N[https://shuji-bonji.github.io/<br/>websocket-practical-guide/]
    end
    
    style A fill:#e1f5fe
    style B fill:#fff3e0
    style M fill:#c8e6c9
    style J fill:#ffcdd2
    style N fill:#bbdefb

Loading

3. 全体的なワークフロー

flowchart LR
    subgraph "開発"
        A[ローカル開発] --> B[Feature Branch]
        B --> C[Push]
    end
    
    subgraph "CI/CD Pipeline"
        C --> D[Pull Request]
        D --> E{CI Tests}
        E -->|Pass| F[Code Review]
        E -->|Fail| G[Fix & Retry]
        G --> C
        F -->|Approved| H[Merge to main]
        H --> I[Deploy Workflow]
        I --> J[Build Static Site]
        J --> K[Deploy to Pages]
    end
    
    subgraph "環境"
        K --> L[Production<br/>GitHub Pages]
    end
    
    style A fill:#e3f2fd
    style H fill:#fff9c4
    style K fill:#c8e6c9
    style L fill:#a5d6a7

Loading

4. CI並列実行の詳細

graph TB
    A[GitHub Actions Runner] --> B[CI Workflow Start]
    
    B --> C[環境準備]
    C --> D[Node.js 20 Setup]
    D --> E[npm ci]
    
    E --> F{並列ジョブ実行}
    
    F -->|Job 1| G[build<br/>npm run build]
    F -->|Job 2| H[type-check<br/>npm run check]
    F -->|Job 3| I[lint<br/>npm run lint]
    F -->|Job 4| J[unit-tests<br/>npm run test:run]
    
    G --> K[build artifacts upload]
    H --> L[TypeScript結果]
    I --> M[ESLint/Prettier結果]
    J --> N[Vitest結果]
    
    K --> O{全ジョブ完了?}
    L --> O
    M --> O
    N --> O
    
    O -->|Success| P[✅ CI Success]
    O -->|Failure| Q[❌ CI Failed]
    
    style F fill:#fff3e0
    style P fill:#c8e6c9
    style Q fill:#ffcdd2

Loading