Cloudflare SE Blog Platform アーキテクチャ

概要

本ブログは 100% Cloudflare スタック で構築されています。
フロントエンドからバックエンド、AI、ストレージ、認証まですべてが Cloudflare のエッジ上で動作するフルサーバーレス構成です。

---

技術スタック

レイヤー	技術	用途
フレームワーク	Remix v2 + Hono	SSR / UI + API レイヤー
データベース	D1 (SQLite)	記事・ユーザー・テンプレート管理
ORM	Drizzle ORM	タイプセーフなクエリ
ストレージ	R2	画像アップロード（S3 互換）
AI	Workers AI	Llama 3.3 70B — ドラフト生成 / Chat Q&A
検索	Vectorize	Embedding ベースの関連記事推薦
認証	Cloudflare Access	Zero Trust / SSO
セッション	KV	セッション / キャッシュ
セキュリティ	WAF + Bot Management	OWASP Top 10 / DDoS 防御

---

システム構成図

flowchart TD
    subgraph Internet
        Client["クライアント (Browser)"]
    end

    subgraph CF["Cloudflare Edge"]
        WAF["WAF / Bot Management"]
        Access["Cloudflare Access\n(Zero Trust 認証)"]
        Pages["Pages + Workers\n(Remix + Hono)"]
    end

    subgraph Services["Cloudflare Services"]
        D1[("D1\nSQLite Database")]
        R2[("R2\nObject Storage")]
        AI["Workers AI\nLlama 3.3 70B"]
        KV["KV\nSession / Cache"]
        Vec["Vectorize\nEmbedding Search"]
    end

    Client -->|HTTPS| WAF
    WAF -->|"Public ルート"| Pages
    WAF -->|"Protected ルート"| Access
    Access -->|JWT 検証済み| Pages
    Pages --> D1
    Pages --> R2
    Pages --> AI
    Pages --> KV
    AI --> Vec