CDNとエッジコンピューティング

ストーリー

高

高橋アーキテクト

SpeedShopが海外展開を始めた。東京のサーバーからアメリカのユーザーにコンテンツを配信すると、ネットワーク遅延だけで200msかかる

高橋アーキテクトが世界地図を示した。

高

高橋アーキテクト

CDNを使えば、世界中のエッジサーバーにコンテンツをキャッシュして、ユーザーに最も近い場所から配信できる。さらにエッジコンピューティングでは、処理自体をエッジで行うことも可能だ

CDN（Content Delivery Network）

仕組み

graph TD
    Origin["オリジンサーバー<br/>東京 (ap-northeast-1)"]

    Origin --> E1["エッジ: 東京"]
    Origin --> E2["エッジ: 大阪"]
    Origin --> E3["エッジ: シンガポール"]
    Origin --> E4["エッジ: ソウル"]
    Origin --> E5["エッジ: 台北"]
    Origin --> E6["エッジ: シドニー"]
    Origin --> E7["エッジ: ロンドン"]
    Origin --> E8["エッジ: NY"]
    Origin --> E9["エッジ: サンフランシスコ"]

    E1 --> JP["日本ユーザー<br/>5ms"]
    E2 --> JP
    E4 --> ASIA["アジアユーザー<br/>20-50ms"]
    E5 --> ASIA
    E3 --> ASIA
    E6 --> ASIA
    E7 --> WEST["欧米ユーザー<br/>20-80ms"]
    E8 --> WEST
    E9 --> WEST

CDNの設定例

// CDN設定（CloudFront の概念的な設定）
const cdnConfig = {
  origins: {
    // 静的アセット → S3
    static: {
      domain: 'speedshop-assets.s3.amazonaws.com',
      path: '/assets/*',
    },
    // API → ALB
    api: {
      domain: 'api.speedshop.internal',
      path: '/api/*',
    },
  },

  behaviors: {
    // 静的アセット: 長期キャッシュ
    '/assets/*': {
      ttl: 86400 * 365,
      compress: true,
      allowedMethods: ['GET', 'HEAD'],
      cachedMethods: ['GET', 'HEAD'],
    },

    // 画像: 最適化付きキャッシュ
    '/images/*': {
      ttl: 86400,
      compress: true,
      imageOptimization: {
        webp: true,
        resize: true,
      },
    },

    // API: 短期キャッシュ or キャッシュなし
    '/api/products/*': {
      ttl: 60,
      compress: true,
      queryStringCaching: true,
    },
    '/api/cart/*': {
      ttl: 0,            // キャッシュしない
      forwardCookies: true,
    },
  },
};

エッジコンピューティング

CDNのエッジサーバーで処理を実行する技術です。

// Cloudflare Workers の例
export default {
  async fetch(request: Request): Promise<Response> {
    const url = new URL(request.url);

    // 1. 地域に応じたコンテンツの出し分け
    const country = request.headers.get('CF-IPCountry') || 'JP';
    if (url.pathname === '/api/promotions') {
      return getRegionalPromotions(country);
    }

    // 2. A/Bテスト
    if (url.pathname.startsWith('/landing')) {
      const variant = getABTestVariant(request);
      return fetchVariant(request, variant);
    }

    // 3. APIレスポンスの変換・集約
    if (url.pathname === '/api/dashboard') {
      const [users, orders, revenue] = await Promise.all([
        fetch('https://api.internal/users/count'),
        fetch('https://api.internal/orders/today'),
        fetch('https://api.internal/revenue/today'),
      ]);

      return new Response(JSON.stringify({
        users: await users.json(),
        orders: await orders.json(),
        revenue: await revenue.json(),
      }));
    }

    // 4. キャッシュ + Stale-While-Revalidate
    const cache = caches.default;
    const cached = await cache.match(request);
    if (cached) return cached;

    const response = await fetch(request);
    const cloned = response.clone();
    cache.put(request, cloned);
    return response;
  },
};

エッジコンピューティングの主要プラットフォーム

サービス	プロバイダ	特徴
CloudFront Functions	AWS	軽量、JavaScript、レイテンシ最小
Lambda@Edge	AWS	Node.js/Python、柔軟な処理
Cloudflare Workers	Cloudflare	V8エンジン、グローバル展開が容易
Vercel Edge Functions	Vercel	Next.jsとの統合
Deno Deploy	Deno	TypeScript/Denoネイティブ

エッジで実行すべき処理

適している	適していない
リダイレクト、URL書き換え	複雑なビジネスロジック
ヘッダーの追加・変更	データベース操作
A/Bテスト	大量のメモリを使う処理
地域に応じたコンテンツ出し分け	長時間実行する処理
認証トークンの検証	トランザクション処理
レスポンスの軽量な変換

CDN導入の効果

// SpeedShopでの測定結果（例）
const cdnImpact = {
  before: {
    ttfb_tokyo: '50ms',
    ttfb_osaka: '80ms',
    ttfb_usa: '250ms',
    ttfb_europe: '300ms',
    monthlyBandwidth: '5TB',
    originLoad: '100%',
  },
  after: {
    ttfb_tokyo: '10ms',    // 80%改善
    ttfb_osaka: '15ms',    // 81%改善
    ttfb_usa: '30ms',      // 88%改善
    ttfb_europe: '25ms',   // 92%改善
    monthlyBandwidth: '500GB', // オリジンの帯域90%削減
    originLoad: '20%',     // オリジンへのリクエスト80%削減
  },
};

まとめ

ポイント	内容
CDN	コンテンツをユーザーに近いエッジから配信
設定のポイント	アセット種類ごとにTTLと挙動を最適化
エッジコンピューティング	エッジで軽量な処理を実行
効果	グローバルなレイテンシの大幅改善
注意点	キャッシュ無効化の設計が重要

チェックリスト

CDNの仕組みとメリットを説明できる
コンテンツ種類に応じたCDN設定を設計できる
エッジコンピューティングの適用範囲を理解した
CDN導入による効果を把握した

次のステップへ

次は演習です。フロントエンドのパフォーマンスを総合的に改善するミッションに挑みましょう。

推定読了時間: 30分