CDNの仕組み - コンテンツ配信を高速化する技術

CDNとは

CDN（Content Delivery Network）は、世界中に分散配置されたサーバーネットワークを通じて、ユーザーに最も近い場所からコンテンツを配信する仕組みです。

なぜ必要か: オリジンサーバーが日本にある場合、アメリカのユーザーはデータが太平洋を往復する時間だけ待たされます。CDNを使えば、アメリカのエッジサーバーからコンテンツを取得でき、レイテンシを大幅に削減できます。

CDNの基本構成

flowchart TB
    subgraph Tokyo["東京リージョン"]
        U1["ユーザー（東京）"]
        E1["エッジサーバー（東京）"]
    end

    subgraph NY["ニューヨークリージョン"]
        U2["ユーザー（NY）"]
        E2["エッジサーバー（NY）"]
    end

    subgraph Origin["オリジン"]
        O["オリジンサーバー（US）"]
    end

    U1 --> E1
    E1 -.->|キャッシュミス時| O
    U2 --> E2
    E2 -.->|キャッシュミス時| O

• エッジサーバー: 世界各地に配置されたキャッシュサーバー
• オリジンサーバー: 元のコンテンツを保持するサーバー
• PoP（Point of Presence）: エッジサーバーが設置されているデータセンター

CDNの動作フロー

キャッシュヒット

sequenceDiagram
    participant U as ユーザー
    participant E as CDNエッジ
    U->>E: リクエスト
    Note over E: キャッシュあり
    E->>U: 即座に応答

キャッシュミス

sequenceDiagram
    participant U as ユーザー
    participant E as CDNエッジ
    participant O as オリジンサーバー
    U->>E: 1. リクエスト
    Note over E: キャッシュなし
    E->>O: 2. 取得
    O->>E: 3. コンテンツ返却
    Note over E: 4. キャッシュに保存
    E->>U: 5. 応答

キャッシュ制御

Cache-Controlヘッダー

# 1時間キャッシュ
Cache-Control: public, max-age=3600

# キャッシュしない
Cache-Control: no-store

# 再検証が必要
Cache-Control: no-cache

# CDNでのみキャッシュ
Cache-Control: s-maxage=86400

キャッシュキー

同じURLでも、以下の要素でキャッシュを分けることができます。

キャッシュ無効化（パージ）

コンテンツを更新した際に、古いキャッシュを削除する方法です。

即時パージ

# Cloudflare API例
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -H "Authorization: Bearer {token}" \
  -d '{"files":["https://example.com/image.jpg"]}'

キャッシュバスティング

ファイル名にバージョンやハッシュを含めます。

<!-- バージョン番号 -->
<script src="/app.js?v=1.2.3"></script>

<!-- コンテンツハッシュ -->
<script src="/app.a1b2c3d4.js"></script>

CDNの主な機能

DDoS対策

flowchart TB
    A["攻撃トラフィック"] --> B["CDNエッジ<br/>（吸収・フィルタリング）"]
    B --> C["正常トラフィックのみ"]
    C --> D["オリジンサーバー"]

SSL/TLS終端

CDNでHTTPS接続を処理し、オリジンへの接続を最適化します。

flowchart LR
    U["ユーザー"] -->|HTTPS| CDN["CDN"]
    CDN -->|HTTP/最適化| O["オリジン"]

画像最適化

flowchart TD
    A["オリジナル: image.jpg (2MB)"] --> B["CDNで自動変換"]
    B --> C["WebP: image.webp (400KB)"]
    B --> D["AVIF: image.avif (300KB)"]
    B --> E["リサイズ: 必要なサイズに縮小"]

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

CDNのエッジでコードを実行し、ユーザーに近い場所で処理を行います。

// Cloudflare Workers の例
export default {
  async fetch(request) {
    const url = new URL(request.url);

    // A/Bテスト
    const variant = Math.random() > 0.5 ? 'A' : 'B';
    url.pathname = `/variant-${variant}${url.pathname}`;

    return fetch(url);
  }
}

主要なCDNプロバイダー

CDNを使うべきケース

適している

• 静的アセット（画像、CSS、JavaScript）
• 動画ストリーミング
• グローバルに展開するWebサイト
• トラフィックスパイクへの対応
• セキュリティ強化

注意が必要

• 頻繁に更新されるコンテンツ
• パーソナライズされたコンテンツ
• リアルタイム性が求められるAPI

まとめ

CDNは、Webサイトのパフォーマンスとセキュリティを向上させる重要なインフラです。適切なキャッシュ戦略を設計し、コンテンツの特性に応じてCDNを活用することで、ユーザー体験を大幅に改善できます。