Architecture

System
Architecture

構成

Reliability Demo APIを中心に、公開ページ、API、監視、CI/CD、Issue運用のつながりと障害点を整理します。 公開ページ・API・監視・CI/CDの関係と障害点を整理します。

Current scope

Pages · Workers · Grafana · GitHub Design intent / failure points

System Overview

役割

05 components

01

Cloudflare Pages

静的なポートフォリオ画面を配信し、API・運用ドキュメント・GitHub上の証跡への入口になります。ポートフォリオ画面を配信し、APIや運用ドキュメントへの入口になります。

02

Cloudflare Workers

Reliability Demo APIを提供し、ヘルスチェック・遅延・意図的なエラー・fallback・statusを扱います。Reliability Demo APIを提供し、ヘルスチェックや遅延デモを扱います。

03

Grafana Cloud

Synthetic MonitoringとAlertingを担当し、APIの状態確認と異常検知の起点になります。外形監視とアラートを担当し、APIの異常検知につなげます。

04

GitHub Actions

CI、デプロイ、Production Checkを自動化し、Pull Requestから本番反映までの変更経路を管理します。CI、デプロイ、本番確認を自動化し、変更経路を管理します。

05

GitHub Issues

アラート、障害対応、改善タスクを記録し、運用上の判断や対応履歴をIssue / PR単位で追跡します。アラート、障害対応、改善タスクをIssueとして記録します。

Design Rationale

設計意図

Why this architecture

軽量な公開構成

採用評価向けポートフォリオとして、常時稼働コストを抑えながら、公開ページ、API、監視、CI/CDのつながりを説明できる構成にしています。

運用証跡をGitHubに集約

設計、Runbook、Incident、Postmortem、CI/CDの証跡をGitHubに残し、Issue / PR単位で改善履歴を追えるようにしています。

APIを小さく保つ

Reliability Demo APIは、信頼性運用を説明するための題材です。機能を増やすより、SLO、監視、障害対応、改善ループを説明できることを優先しています。

Request Flow

リクエストの流れ

Frontend to API

  1. 01Visitor

    公開サイトにアクセスします。

  2. 02Cloudflare Pages

    静的HTML/CSSを配信します。

  3. 03Workers API

    Reliability Demo APIへリクエストします。

  4. 04JSON response

    ヘルス状態やデモ応答を返します。

Failure Points

障害点と切り分け

Where to look first

Pages配信の問題

公開サイトだけが表示できない場合は、Cloudflare Pagesのdeploy状態、latest commit、HTML/CSSの変更差分を確認します。

Workers APIの問題

/api/healthや/api/statusが失敗する場合は、Worker deploy、直近のAPI変更、post-deploy check、Cloudflare側の状態を確認します。

監視・通知の問題

APIは正常でも通知が来ない場合は、Grafana Synthetic Monitoring、Alert rule、webhook、Issue化処理を順に確認します。

CI/CDの問題

main反映やWorker deployが止まる場合は、GitHub Actionsの失敗ステップ、Secrets、wrangler設定、required file checkを確認します。

Monitoring / Alert Flow

監視とアラートの流れ

Synthetic check to Issue

  1. 01Grafana Synthetic Monitoring

    /api/health や /api/status を外形監視します。

  2. 02Alert rule

    失敗や遅延悪化を条件として検知します。

  3. 03Worker webhook

    Grafana通知を受け取り、Issue化に必要な情報を整えます。

  4. 04GitHub Issue

    アラート内容を運用タスクとして記録します。

  5. 05Runbook

    確認手順、切り分け、復旧判断へつなげます。

CI/CD Flow

変更反映の流れ

PR to production

  1. 01Pull Request

    変更内容をレビュー可能な単位に分けます。

  2. 02GitHub Actions CI

    静的チェックや検証を実行します。

  3. 03Worker deploy

    Cloudflare Workersへ反映します。

  4. 04Production check

    本番APIの基本応答を確認します。

  5. 05Production verification

    本番反映後の状態を記録します。

Technology Choices

技術選定

Current stack

Cloudflare Pages / Workers

公開ポートフォリオとデモAPIを低コストで運用し、SLO、監視、CI/CD、障害対応の流れを説明しやすくするために使用しています。

Grafana Cloud

外形監視とアラート設計を見せるために使用しています。SLOや障害対応の入口として扱います。

GitHub Actions / Issues

変更管理、CI/CD、アラート記録、改善タスク管理をGitHub上に集約します。

Future Expansion

今後の拡張候補

Not current

AWS / Terraform

将来的なインフラ構成の実演候補です。現在のArchitectureページでは、既存のCloudflare中心構成の説明に限定します。

ECS / EKS

将来的なコンテナ基盤の実演候補です。現在の実装済み範囲には含めません。

OpenTelemetry tracing

分散トレースは今後の拡張候補です。現在はSLO、外形監視、CI/CD、運用証跡を中心に扱います。