MTG DeckForge

Appearance

インフラ設計 ​

概要 ​

高速化を実現するための7層アーキテクチャを採用し、各層が連携してレスポンス時間200ms以下を実現します。

環境一覧 ​

環境用途URL / 接続先
開発環境開発・動作確認localhost:3000
ステージング環境検証・テストstg.mtg-deck.example.com
本番環境運用mtg-deck.example.com

システム構成図 ​

mermaid
graph TB
    subgraph "1️⃣ CDN Layer"
        CF[Cloudflare<br>Brotli圧縮・HTTP/3<br>DDoS保護・WAF]
    end

    subgraph "2️⃣ Frontend Layer"
        Next[Next.js 14<br>App Router + PPR<br>Image最適化]
    end

    subgraph "3️⃣ API Layer"
        tRPC[tRPC<br>Edge Functions<br>型安全API]
    end

    subgraph "4️⃣ Cache Layer"
        Redis[(Redis/Upstash<br>3段階キャッシュ)]
    end

    subgraph "5️⃣ Search Layer"
        Algolia[(Algolia<br>瞬間検索)]
    end

    subgraph "6️⃣ AI Layer"
        LLM[GPT-4/Claude]
        Pinecone[(Pinecone<br>Vector DB)]
    end

    subgraph "7️⃣ Data Layer"
        DB[(PostgreSQL<br>Supabase)]
        External[外部API<br>TCGPlayer/Hareruya<br>Scryfall/MTGTOP8]
        Storage[Cloudinary<br>画像ストレージ]
    end

    User[ユーザー] --> CF
    CF --> Next
    Next --> tRPC
    tRPC --> Redis
    tRPC --> Algolia
    tRPC --> LLM
    LLM --> Pinecone
    tRPC --> DB
    tRPC --> External
    tRPC --> Storage

7層アーキテクチャ詳細 ​

1️⃣ CDN Layer (Cloudflare) ​

役割: 全世界への高速コンテンツ配信

機能詳細
圧縮Brotli圧縮（gzip比30%軽量）
プロトコルHTTP/3（QUIC）
最適化Auto Minify（HTML/CSS/JS）
セキュリティDDoS保護、WAF、レート制限

キャッシュ戦略:

コンテンツTTL
静的アセット30日
API レスポンス5分
画像7日

2️⃣ Frontend Layer (Next.js 14) ​

役割: 超高速なユーザーインターフェース

技術用途
App Routerファイルベースルーティング
PPRPartial Prerendering
Image最適化AVIF/WebP自動変換
Bundle分割Tree Shaking
Service WorkerPWA対応

状態管理:

ライブラリ担当
Zustandグローバル状態（ユーザー、デッキ、UI）
React Queryサーバー状態 + 自動キャッシュ
Framer Motion60FPSアニメーション

3️⃣ API Layer (tRPC + Edge Functions) ​

役割: 型安全な高速API

特徴詳細
ランタイムEdge Runtime（Vercel Edge）
分散配置東京 / サンフランシスコ / フランクフルト
型安全自動型生成でランタイムエラー0

4️⃣ Cache Layer (Redis/Upstash) ​

役割: 超高速データアクセス

3段階キャッシュ戦略:

層データTTL
Hot Dataユーザーセッション24時間
Hot Data人気カード1時間
Warm Dataカード詳細6時間
Warm Dataデッキ統計1時間
Cold Data検索結果5分
Cold Data価格履歴1時間

5️⃣ Search Layer (Algolia) ​

役割: 瞬間カード検索

項目詳細
検索速度平均50ms以下
インデックスカード名、テキスト、タイプ
ファセット色、マナコスト、フォーマット
検索機能タイポ許容、シノニム

6️⃣ AI Layer ​

役割: インテリジェントなコンボ・メタ分析

コンポーネント用途
GPT-4 / Claude自然言語でのデッキ相談、改善提案
Pineconeベクトル検索によるカード類似度計算

AI機能:

  • リアルタイムコンボ提案
  • メタゲーム分析
  • デッキ強化提案
  • 自然言語Q&A

7️⃣ Data Layer ​

役割: 堅牢なデータ管理

コンポーネント用途
PostgreSQL (Supabase)メインDB、リアルタイム同期
Cloudinary画像ストレージ、変換

外部API連携:

API用途
Scryfallカード情報、画像
TCGPlayer米国価格
Hareruya日本価格
MTGTOP8大会結果

データフロー例：カード検索 ​

mermaid
sequenceDiagram
    participant User as ユーザー
    participant CDN as Cloudflare
    participant FE as Next.js
    participant API as tRPC
    participant Cache as Redis
    participant Search as Algolia

    User->>CDN: 検索入力
    CDN->>FE: リクエスト転送
    FE->>FE: Debounce (300ms)
    FE->>API: 検索クエリ
    API->>Cache: キャッシュ確認 (5ms)
    alt キャッシュヒット
        Cache-->>API: 結果返却
    else キャッシュミス
        API->>Search: Algolia検索 (50ms)
        Search-->>API: 検索結果
        API->>Cache: 結果キャッシュ
    end
    API-->>FE: レスポンス
    FE-->>CDN: HTML/JSON
    CDN-->>User: 画面表示
    Note over User,CDN: 総時間 < 100ms

パフォーマンス指標 ​

項目目標値測定方法
初回ロード< 1.5秒Lighthouse
ページ遷移< 0.3秒Core Web Vitals
カード検索< 100msAlgolia Analytics
API応答< 200msVercel Analytics
画像読込< 500msReal User Monitoring

監視・アラート ​

ツール用途
Vercel Analyticsパフォーマンス監視
Sentryエラートラッキング
Upstash ConsoleRedisモニタリング
Supabase DashboardDB監視

スケーリング戦略 ​

層戦略
CDN自動スケール（Cloudflare）
Frontendサーバーレス自動スケール（Vercel）
APIEdge Functions 自動スケール
CacheRedis Cluster 自動スケール（Upstash）
DBConnection Pooling + Read Replica