Architecture

Cloudflare フルスタック

このアプリケーションは Cloudflare のエッジプラットフォーム上で完全に動作します。
サーバーレスアーキテクチャにより、グローバルに低レイテンシで配信されます。

Click to zoomCloudflare PoC Application - System Architecture💻User / BrowserCloudflare Global Network (Edge)WAFDDoS / OWASPBot ManagementJS ChallengeCDN / CacheStatic AssetsSSL/TLSFull (Strict)TurnstileCAPTCHA-freeCloudflare AccessOTP / Zero TrustCloudflare Pages + Workers Runtime (V8 Isolate)Hono FrameworkJSX SSR / Routing / MiddlewareTypeScript / hono/cloudflare-pagesPages Functionsfunctions/[[path]].tsPublic / Admin / API RoutesSession AuthCookie-based MiddlewareRole: super_admin / cloudflareD1 Database (SQLite)applications - PoC 申請データadmin_users - 管理者マスタsessions - セッション管理R2 Object Storagepoc-form-uploads バケットPoC 資料 (PDF / PPTX / DOCX)S3 互換 API / Egress 無料Workers AI + AI Gateway申請トレンド分析Win/Lost 傾向インサイトキャッシュ / ログ / レート制限Data FlowUser → Cloudflare Edge (WAF/Bot/Turnstile) → Pages Functions (Hono SSR) → D1 (CRUD) / R2 (Upload) / Workers AI (Insights)Admin → Cloudflare Access (OTP) → Session Auth → Dashboard / Detail / AI Insights → D1 / Workers AI
Tech Stack

技術スタック

モダンなエッジネイティブ技術で構築

Hono

超軽量 Web フレームワーク。JSX による SSR でフルスタック開発。

Cloudflare Workers

エッジで実行されるサーバーレスランタイム。V8 Isolate ベース。

Cloudflare Pages

静的アセット配信 + Functions。Git 連携で自動デプロイ。

D1 Database

SQLite ベースのエッジデータベース。低レイテンシのデータアクセス。

R2 Storage

S3 互換のオブジェクトストレージ。PoC 資料のアップロード先。

Workers AI

AI モデルをエッジで推論。申請トレンドの分析に活用。

AI Gateway

AI リクエストのキャッシュ・ログ・レート制限を管理。

TypeScript

型安全な開発。Zod によるバリデーション連携。

Security

セキュリティ

多層防御でアプリケーションを保護

Cloudflare Access

管理画面への Zero Trust アクセス制御。One Time PIN 認証。

WAF

Web Application Firewall による攻撃からの保護。

Bot Management

自動化されたボットトラフィックの検出と管理。

Turnstile

プライバシー重視の CAPTCHA 代替。フォーム送信を保護。