System Architecture - Cloudflare + Vercel + Supabase

👤

ユーザー

ブラウザからアクセス（HTTPS）

全リクエストがここを通る

☁️

Cloudflare

セキュリティ・ログ・配信

前段 ― 守りの壁

CDN

画像・CSS・JSを世界中のエッジから高速配信。ユーザーに最も近いサーバーから返す

WAF

不正アクセス・攻撃を自動ブロック。IPや国単位のアクセス制限ルールも設定可能

DDoS 防御

大量アクセス攻撃を自動で検知・遮断。設定不要で最初から有効

Analytics

アクセス数・国別・パス別・時間帯別のログを自動記録。ダッシュボードで確認

Security Events

ブロックされた攻撃の詳細ログ。攻撃元IP・国・手法をリアルタイムで確認

Workers（定期実行）

Cron Triggerで毎日バックアップを自動取得し、R2に保存する処理を実行

安全なリクエストだけ通す

▲

Vercel

アプリケーション

アプリ本体

Next.js

フロントエンド（React）とAPI Routesを動かすアプリケーション基盤

サーバーレス

サーバー管理不要。デプロイするだけで自動スケール

TLS 暗号化通信

⚡

Supabase

データベース

データ管理

PostgreSQL

メインのデータベース。ユーザー情報・コンテンツ等を保存

通信暗号化（自動）

アプリ↔DB間はTLS/SSLで暗号化。盗聴されても読めない

ディスク暗号化（自動）

保存データはAES-256で暗号化。物理ディスクを盗まれても安全

カラム暗号化（任意）

pgcryptoで機密データ（カード番号等）を個別に暗号化。DB管理者にも見えない

毎日自動バックアップ

🪣

Cloudflare R2

バックアップ保管庫

長期保存

日次バックアップ

Supabaseのデータを毎日自動で保存。90日分を保持し古いものは自動削除

エグレス無料

復元時のダウンロードが無料。AWS S3と違い取り出しにお金がかからない

低コスト

10GBの保存で月約$0.15。S3より安く、転送料も無料

データの流れ

🌐

アクセス

ユーザー → Cloudflare → Vercel → Supabase

📊

ログ記録

Cloudflare が全リクエストを自動記録（Analytics）

🛡️

防御

Cloudflare WAF が不正アクセスをVercelに届く前にブロック

🔒

暗号化

通信 = TLS / 保存 = AES-256 / 機密カラム = pgcrypto

💾

バックアップ

Workers Cron が毎日 Supabase → R2 に自動保存

対応する順番

1

Cloudflare にドメイン登録

ネームサーバーを変更するだけ。ログ・監視・DDoS防御が即有効に

かんたん

2

WAF ルール設定

アクセス制限ルールをダッシュボードから追加。コード変更不要

かんたん

3

R2 バケット作成 + バックアップ設定

R2バケットを作り、Workers Cron Triggerで毎日バックアップを自動化

ふつう

4

機密カラムの暗号化（必要に応じて）

カード番号等の高機密データがあればpgcryptoで個別に暗号化

ふつう

コスト目安（月額）

$0

Cloudflare Free

CDN・WAF・Analytics

$20

Vercel Pro

アプリホスティング

$25

Supabase Pro

DB + API バックアップ

~$1

R2 + Workers

バックアップ保管