CDNの仕組みを理解してWebサイトを高速化する

Webサイトのパフォーマンスを劇的に向上させる技術として、CDN（Content Delivery Network）は欠かせない存在です。エッジサーバーを活用したコンテンツ配信により、世界中のユーザーに高速なアクセス体験を提供できます。

この記事では、CDNの基本概念からエッジサーバーの仕組み、オリジンサーバーとの関係、主要CDNプロバイダー（Cloudflare、AWS CloudFront、Fastly）の比較、そして静的サイトホスティングでの実践的な活用方法まで体系的に解説します。

この記事で学べること

• CDNの基本概念とコンテンツ配信の仕組み
• エッジサーバーとオリジンサーバーの役割分担
• CDNキャッシュ戦略の設計パターン
• Cloudflare、AWS CloudFront、Fastlyの特徴比較
• 静的サイトホスティングでのCDN活用例

前提知識と実行環境

この記事を理解するために必要な前提知識と実行環境は以下の通りです。

期待される結果として、CDNを導入することでWebサイトの読み込み速度が向上し、オリジンサーバーの負荷軽減とコスト削減が実現できます。

CDNとは

CDN（Content Delivery Network）は、世界中に分散配置されたサーバー群（エッジサーバー）を通じて、コンテンツをユーザーに効率的に配信するネットワークインフラです。ユーザーに最も近いエッジサーバーからコンテンツを配信することで、レイテンシを最小化し、Webサイトの高速化を実現します。

CDNがない場合の課題

CDNを使用しない従来のアーキテクチャでは、すべてのリクエストがオリジンサーバーに直接到達します。

flowchart LR
    subgraph Users["世界中のユーザー"]
        U1[日本のユーザー]
        U2[アメリカのユーザー]
        U3[ヨーロッパのユーザー]
    end
    
    subgraph Origin["オリジンサーバー（東京）"]
        O[Webサーバー]
    end
    
    U1 -->|100ms| O
    U2 -->|200ms| O
    U3 -->|250ms| O
    
    style O fill:#ffcdd2

この構成では以下の問題が発生します。

CDN導入後のアーキテクチャ

CDNを導入すると、エッジサーバーがユーザーとオリジンサーバーの間に入り、コンテンツをキャッシュして配信します。

flowchart LR
    subgraph Users["世界中のユーザー"]
        U1[日本のユーザー]
        U2[アメリカのユーザー]
        U3[ヨーロッパのユーザー]
    end
    
    subgraph CDN["CDNエッジサーバー"]
        E1[東京エッジ]
        E2[バージニアエッジ]
        E3[フランクフルトエッジ]
    end
    
    subgraph Origin["オリジンサーバー"]
        O[Webサーバー]
    end
    
    U1 -->|10ms| E1
    U2 -->|15ms| E2
    U3 -->|12ms| E3
    
    E1 -.->|キャッシュミス時| O
    E2 -.->|キャッシュミス時| O
    E3 -.->|キャッシュミス時| O
    
    style E1 fill:#c8e6c9
    style E2 fill:#c8e6c9
    style E3 fill:#c8e6c9

CDN導入により得られるメリットは以下の通りです。

• レイテンシ削減: ユーザーに最も近いエッジサーバーから配信
• 負荷分散: リクエストが複数のエッジサーバーに分散
• 帯域幅拡大: グローバルネットワークの大容量帯域を活用
• 高可用性: 複数のエッジサーバーによる冗長構成

エッジサーバーの仕組みとコンテンツ配信フロー

エッジサーバーは、CDNの中核を担うサーバーです。ユーザーからのリクエストを受け取り、キャッシュからコンテンツを返すか、オリジンサーバーから取得して配信します。

コンテンツ配信の詳細フロー

sequenceDiagram
    participant User as ユーザー
    participant DNS as DNS
    participant Edge as エッジサーバー
    participant Origin as オリジンサーバー
    
    User->>DNS: example.comを解決
    DNS-->>User: エッジサーバーのIPアドレス
    User->>Edge: GET /image.png
    
    alt キャッシュヒット
        Edge-->>User: キャッシュから即座に返却
    else キャッシュミス
        Edge->>Origin: GET /image.png
        Origin-->>Edge: image.png + Cache-Controlヘッダー
        Note over Edge: コンテンツをキャッシュに保存
        Edge-->>User: image.png
    end

エッジロケーションとPOP

CDNプロバイダーは世界中にPOP（Point of Presence）と呼ばれるデータセンターを配置しています。各POPにはエッジサーバーが設置され、ユーザーに最も近いPOPが自動的に選択されます。

エニーキャストルーティング

多くのCDNはエニーキャストルーティングを採用しています。同じIPアドレスを複数のエッジサーバーが共有し、ネットワーク的に最も近いサーバーにルーティングされます。

flowchart TB
    subgraph Anycast["エニーキャストIP: 203.0.113.1"]
        E1[東京POP]
        E2[シンガポールPOP]
        E3[シドニーPOP]
    end
    
    U1[日本のユーザー] -->|BGPで最短経路| E1
    U2[タイのユーザー] -->|BGPで最短経路| E2
    U3[オーストラリアのユーザー] -->|BGPで最短経路| E3

オリジンサーバーとCDNの関係

オリジンサーバーは、コンテンツの「正本」を保持するサーバーです。CDNのエッジサーバーは、オリジンサーバーからコンテンツを取得（オリジンフェッチ）し、キャッシュに保存します。

オリジンフェッチの最適化

オリジンフェッチを最適化することで、オリジンサーバーの負荷を軽減し、コスト削減と安定性向上を実現できます。

flowchart LR
    subgraph Edge["エッジ層"]
        E1[エッジPOP 1]
        E2[エッジPOP 2]
        E3[エッジPOP 3]
    end
    
    subgraph Shield["シールド層（オプション）"]
        S[リージョナルキャッシュ]
    end
    
    subgraph Origin["オリジン"]
        O[オリジンサーバー]
    end
    
    E1 --> S
    E2 --> S
    E3 --> S
    S --> O
    
    style S fill:#fff3e0

Origin Shield（リージョナルキャッシュ） は、AWS CloudFrontなどが提供する機能で、エッジサーバーとオリジンサーバーの間に追加のキャッシュ層を設けます。これにより、オリジンへのリクエストが集約され、負荷が大幅に軽減されます。

オリジンの冗長化

CDNはオリジンフェイルオーバー機能を提供し、プライマリオリジンが応答しない場合にバックアップオリジンへ自動的に切り替えます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

# CloudFrontオリジングループの設定例
OriginGroups:
  Quantity: 1
  Items:
    - Id: myOriginGroup
      Members:
        Quantity: 2
        Items:
          - OriginId: PrimaryS3Origin
          - OriginId: BackupS3Origin
      FailoverCriteria:
        StatusCodes:
          Quantity: 4
          Items:
            - 500
            - 502
            - 503
            - 504

CDNキャッシュ戦略の設計

CDNキャッシュ戦略は、Webサイトのパフォーマンスとコンテンツの鮮度のバランスを取る重要な設計要素です。

キャッシュキーの理解

キャッシュキーは、CDNがキャッシュを識別するための一意な識別子です。デフォルトではURL全体がキャッシュキーとなりますが、カスタマイズが可能です。

Cache-Controlヘッダーによる制御

オリジンサーバーからのレスポンスに含めるCache-Controlヘッダーで、CDNのキャッシュ動作を制御します。

1
2
3
4
5
6
7
8

# 静的アセット: 1年間キャッシュ
Cache-Control: public, max-age=31536000, immutable

# API レスポンス: CDNで5分、ブラウザで1分
Cache-Control: public, s-maxage=300, max-age=60

# 動的コンテンツ: キャッシュしない
Cache-Control: private, no-store

コンテンツタイプ別のキャッシュ戦略

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

コンテンツを更新した際、CDNキャッシュを即座に無効化する必要があります。

1
2
3
4
5

# Cloudflare API でのキャッシュパージ
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -H "Authorization: Bearer {api_token}" \
  -H "Content-Type: application/json" \
  --data '{"files":["https://example.com/style.css"]}'

1
2
3
4

# AWS CloudFront でのキャッシュ無効化
aws cloudfront create-invalidation \
  --distribution-id E1234567890ABC \
  --paths "/images/*" "/css/*"

主要CDNプロバイダーの比較

Webサイトの要件に応じて、最適なCDNプロバイダーを選択することが重要です。ここでは、Cloudflare、AWS CloudFront、Fastlyの3つを比較します。

Cloudflare

Cloudflareは、CDNとセキュリティ機能を統合したプラットフォームです。無料プランが充実しており、個人サイトから大規模サービスまで幅広く利用されています。

主な特徴

設定例: Cloudflare Pagesでの静的サイト配信

1
2
3
4
5
6

# wrangler.toml
name = "my-static-site"
compatibility_date = "2026-01-01"

[site]
bucket = "./public"

AWS CloudFront

AWS CloudFrontは、AWSエコシステムと緊密に統合されたCDNサービスです。S3、EC2、Lambda@Edgeとの連携が容易で、エンタープライズ向けの高度な機能を提供します。

主な特徴

設定例: CloudFormationでのCloudFront構成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

Resources:
  CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          - Id: S3Origin
            DomainName: !GetAtt S3Bucket.RegionalDomainName
            S3OriginConfig:
              OriginAccessIdentity: ""
            OriginAccessControlId: !Ref OAC
        DefaultCacheBehavior:
          TargetOriginId: S3Origin
          ViewerProtocolPolicy: redirect-to-https
          CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6
        Enabled: true
        DefaultRootObject: index.html

Fastly

Fastlyは、リアルタイム性と柔軟なエッジコンピューティングに強みを持つCDNです。VCL（Varnish Configuration Language）による高度なカスタマイズが可能です。

主な特徴

設定例: Fastly VCLでのキャッシュ制御

sub vcl_fetch {
  # 画像は1週間キャッシュ
  if (req.url ~ "\.(jpg|jpeg|png|gif|webp)$") {
    set beresp.ttl = 7d;
    set beresp.http.Cache-Control = "public, max-age=604800";
  }
  
  # HTMLは5分キャッシュ
  if (req.url ~ "\.html$" || req.url ~ "/$") {
    set beresp.ttl = 5m;
    set beresp.http.Cache-Control = "public, max-age=300";
  }
}

プロバイダー比較表

選定ガイドライン

Cloudflareを選ぶべきケース

• コストを抑えたい（無料プランで開始）
• セキュリティ機能（DDoS、WAF）を手軽に導入したい
• 静的サイトをPages でホスティングしたい

AWS CloudFrontを選ぶべきケース

• AWSインフラを既に利用している
• S3やALBとの緊密な連携が必要
• エンタープライズ向けの高度な機能が必要

Fastlyを選ぶべきケース

• 即時キャッシュパージが必須（ニュースサイト等）
• 高度なキャッシュロジックのカスタマイズが必要
• リアルタイムログ解析を行いたい

静的サイトホスティングでのCDN活用

静的サイトジェネレーター（Hugo、Next.js、Gatsby等）で生成したサイトをCDNで配信する構成は、高速性と低コストを両立できます。

構成パターン

flowchart LR
    subgraph Build["ビルド環境"]
        B[CI/CD]
    end
    
    subgraph Storage["ストレージ"]
        S[S3 / R2 / GCS]
    end
    
    subgraph CDN["CDN"]
        C[CloudFront / Cloudflare]
    end
    
    subgraph Users["ユーザー"]
        U[ブラウザ]
    end
    
    B -->|デプロイ| S
    S -->|オリジン| C
    C -->|配信| U

Cloudflare Pages での静的サイトホスティング

Cloudflare Pagesは、GitHubリポジトリと連携して自動デプロイを行い、グローバルCDNで配信します。

1
2
3
4
5
6
7

# Hugoサイトの場合: netlify.tomlまたはwrangler.toml
[build]
command = "hugo --minify"
publish = "public"

[build.environment]
HUGO_VERSION = "0.140.0"

ビルド設定（Cloudflare Pagesダッシュボード）

AWS S3 + CloudFront での静的サイトホスティング

S3バケットをオリジンとし、CloudFrontで配信する構成です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

# S3バケットへのデプロイ
aws s3 sync ./public s3://my-static-site-bucket \
  --delete \
  --cache-control "max-age=31536000"

# HTMLファイルのキャッシュ設定を短くする
aws s3 cp ./public/index.html s3://my-static-site-bucket/index.html \
  --cache-control "max-age=0, must-revalidate"

# CloudFrontキャッシュの無効化
aws cloudfront create-invalidation \
  --distribution-id E1234567890ABC \
  --paths "/*"

キャッシュ戦略のベストプラクティス

静的サイトでは、コンテンツタイプに応じたキャッシュ戦略が重要です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

# Nginx設定例（オリジンサーバー）
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

location ~* \.html$ {
    expires 0;
    add_header Cache-Control "no-cache, must-revalidate";
}

ハッシュ付きファイル名（例: style.a1b2c3d4.css）を使用することで、アセットファイルを長期間キャッシュしながら、更新時には新しいファイル名で即座に反映できます。

エッジコンピューティングの活用

現代のCDNは、単なるキャッシュ配信を超えて、エッジでのコンピューティング機能を提供しています。

ユースケース

Cloudflare Workers の例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// ユーザーの国に応じたリダイレクト
export default {
  async fetch(request) {
    const country = request.cf.country;
    
    if (country === 'JP') {
      return Response.redirect('https://example.com/ja/', 302);
    } else if (country === 'US') {
      return Response.redirect('https://example.com/en/', 302);
    }
    
    return fetch(request);
  }
};

Lambda@Edge の例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// CloudFront Lambda@Edge: ビューワーリクエストでの認証
exports.handler = async (event) => {
  const request = event.Records[0].cf.request;
  const headers = request.headers;
  
  // Authorizationヘッダーの検証
  if (!headers.authorization || !headers.authorization[0]) {
    return {
      status: '401',
      statusDescription: 'Unauthorized',
      body: 'Authentication required',
    };
  }
  
  // トークン検証ロジック（省略）
  
  return request;
};

パフォーマンス測定と最適化

CDN導入の効果を測定し、継続的に最適化することが重要です。

測定指標

キャッシュヒット率の改善

flowchart TD
    A[キャッシュヒット率が低い] --> B{原因分析}
    B -->|クエリ文字列| C[不要なパラメータを除外]
    B -->|Cookie| D[静的アセットからCookieを除外]
    B -->|TTLが短い| E[適切なTTL設定]
    B -->|コンテンツが動的| F[動的コンテンツの分離]
    
    C --> G[キャッシュキーの最適化]
    D --> G
    E --> G
    F --> G

開発者ツールでの確認

ブラウザの開発者ツールでCDNキャッシュの動作を確認できます。

まとめ

CDNは、Webサイトの高速化とグローバル配信に不可欠なインフラです。この記事で解説した内容を振り返ります。

CDNを適切に設計・導入することで、ユーザー体験の向上、サーバーコストの削減、可用性の向上を同時に実現できます。まずは無料プランのあるCloudflareや、AWSの無料枠を活用して、小規模なサイトから導入を始めてみてください。

参考リンク

• Cloudflare公式ドキュメント
• Amazon CloudFront デベロッパーガイド
• Fastly公式ドキュメント
• MDN Web Docs - HTTP キャッシュ
• web.dev - コンテンツ配信ネットワーク（CDN）