AWS CloudFrontでサイト高速化｜CDN設定からキャッシュ戦略まで実践解説

「Webサイトの表示が遅い」「画像の読み込みに時間がかかる」――ページ速度の遅さは、ユーザー離脱率の上昇やSEO評価の低下に直結する深刻な問題です。

AWS CloudFrontは、世界中のエッジロケーションからコンテンツを配信するCDN（Content Delivery Network）サービスです。この記事では、CloudFrontの設定手順からキャッシュ戦略、セキュリティ対策まで、サイト高速化を実現するための実践的なノウハウを解説します。

CDNとCloudFrontの基本｜なぜサイトが速くなるのか

CDN（Content Delivery Network）とは、世界各地に分散配置されたサーバー（エッジロケーション）からコンテンツを配信する仕組みです。ユーザーに最も近いエッジロケーションからコンテンツを返すことで、表示速度を大幅に改善します。

CDNの基本概念については、CDNとは？初心者向け解説で詳しく紹介しています。

CloudFrontの仕組み

CloudFrontのコンテンツ配信の流れは以下の通りです。

1. ユーザーがWebサイトにアクセスすると、DNSにより最寄りのエッジロケーションにルーティングされる
2. エッジロケーションにキャッシュがあれば、即座にレスポンスを返す（キャッシュヒット）
3. キャッシュがなければ、オリジンサーバー（S3やALB）からコンテンツを取得してキャッシュに保存し、レスポンスを返す（キャッシュミス）
4. 次回以降の同じリクエストは、キャッシュから高速に配信される

CloudFrontの導入効果

指標	導入前	導入後	改善率
ページ読み込み時間（東京）	2.5秒	0.8秒	68%改善
ページ読み込み時間（海外）	5.0秒	1.2秒	76%改善
オリジンサーバーの負荷	100%	20〜30%	70〜80%削減
転送コスト	基準値	基準値の40〜60%	40〜60%削減

特に画像・CSS・JavaScriptなどの静的コンテンツが多いサイトほど、CloudFrontの効果は顕著です。

CloudFrontディストリビューションの作成

CloudFrontの設定は「ディストリビューション」という単位で管理します。ここでは、S3バケットをオリジンとしたディストリビューションの作成手順を解説します。

S3オリジンの設定（OAC方式）

S3をオリジンとする場合、OAC（Origin Access Control）を使用して、CloudFront経由でのみS3にアクセスできるようにします。従来のOAI（Origin Access Identity）は非推奨です。

# OACの作成
aws cloudfront create-origin-access-control \
  --origin-access-control-config '{
    "Name": "mycompany-s3-oac",
    "Description": "OAC for S3 origin",
    "SigningProtocol": "sigv4",
    "SigningBehavior": "always",
    "OriginAccessControlOriginType": "s3"
  }'

ディストリビューションの作成

aws cloudfront create-distribution \
  --distribution-config '{
    "CallerReference": "mycompany-prod-2026",
    "Comment": "Production CDN",
    "Enabled": true,
    "DefaultCacheBehavior": {
      "TargetOriginId": "S3-mycompany-prod-assets",
      "ViewerProtocolPolicy": "redirect-to-https",
      "CachePolicyId": "658327ea-f89d-4fab-a63d-7e88639e58f6",
      "Compress": true,
      "AllowedMethods": ["GET", "HEAD"],
      "CachedMethods": ["GET", "HEAD"]
    },
    "Origins": {
      "Quantity": 1,
      "Items": [
        {
          "Id": "S3-mycompany-prod-assets",
          "DomainName": "mycompany-prod-assets-ap-northeast-1.s3.ap-northeast-1.amazonaws.com",
          "S3OriginConfig": {
            "OriginAccessIdentity": ""
          },
          "OriginAccessControlId": "EXXXXXXXXXX"
        }
      ]
    },
    "DefaultRootObject": "index.html",
    "HttpVersion": "http2and3",
    "PriceClass": "PriceClass_200"
  }'

重要な設定項目を解説します。

• ViewerProtocolPolicy: redirect-to-https：HTTPアクセスを自動的にHTTPSにリダイレクト
• Compress: true：gzip/Brotli圧縮を有効にして転送量を削減
• HttpVersion: http2and3：HTTP/2およびHTTP/3を有効にして高速化
• PriceClass_200：アジア・北米・欧州のエッジロケーションを使用（コストとカバレッジのバランス）

ALBオリジンの設定

ECS/Fargateなどのアプリケーションサーバーの前段にCloudFrontを配置する場合は、ALBをオリジンに設定します。

{
  "Id": "ALB-mycompany-prod",
  "DomainName": "mycompany-prod-alb-123456789.ap-northeast-1.elb.amazonaws.com",
  "CustomOriginConfig": {
    "HTTPPort": 80,
    "HTTPSPort": 443,
    "OriginProtocolPolicy": "https-only",
    "OriginSslProtocols": {
      "Quantity": 1,
      "Items": ["TLSv1.2"]
    }
  }
}

キャッシュ戦略の設計｜キャッシュポリシーの使い分け

CloudFrontの効果を最大化するには、コンテンツの種類に応じた適切なキャッシュ戦略が不可欠です。

コンテンツ種類別のキャッシュ戦略

コンテンツ種類	TTL（キャッシュ有効期間）	キャッシュキー	理由
画像（JPG, PNG, WebP）	30日（2592000秒）	パスのみ	変更頻度が低い
CSS/JavaScript	1年（31536000秒）	パスのみ	ファイル名にハッシュを含める前提
HTMLページ	5分〜1時間	パスのみ	コンテンツ更新を反映させるため
APIレスポンス	0秒（キャッシュなし）	パス + クエリ文字列	リアルタイム性が必要
フォント	1年（31536000秒）	パスのみ	変更されることがほとんどない

ビヘイビア（パスパターン）での設定

CloudFrontでは、パスパターンごとに異なるキャッシュ設定を適用できます。

# 静的ファイル用のキャッシュポリシーを作成
aws cloudfront create-cache-policy \
  --cache-policy-config '{
    "Name": "StaticAssets-LongTTL",
    "Comment": "Long TTL for static assets",
    "DefaultTTL": 2592000,
    "MaxTTL": 31536000,
    "MinTTL": 86400,
    "ParametersInCacheKeyAndForwardedToOrigin": {
      "EnableAcceptEncodingGzip": true,
      "EnableAcceptEncodingBrotli": true,
      "HeadersConfig": {
        "HeaderBehavior": "none"
      },
      "CookiesConfig": {
        "CookieBehavior": "none"
      },
      "QueryStringsConfig": {
        "QueryStringBehavior": "none"
      }
    }
  }'

ビヘイビアの設定例です。

• /assets/*：静的ファイル用。長いTTL、Cookie・クエリ文字列をキャッシュキーに含めない
• /api/*：APIリクエスト用。キャッシュなし、すべてのヘッダーとクエリ文字列をオリジンに転送
• デフォルト（*）：HTMLページ用。短いTTL

キャッシュの無効化（Invalidation）

コンテンツを更新した際に、キャッシュを即座に無効化する方法です。

# 特定のパスのキャッシュを無効化
aws cloudfront create-invalidation \
  --distribution-id E1234567890 \
  --paths '/index.html' '/about/*'

# 全キャッシュの無効化（コストに注意）
aws cloudfront create-invalidation \
  --distribution-id E1234567890 \
  --paths '/*'

無効化のベストプラクティスは以下の通りです。

• 月間1,000パスまで無料、それ以降は1パスあたり$0.005
• 静的ファイルにはファイル名にハッシュを含める（例：app.a1b2c3d4.js）ことで、無効化の必要性をなくす
• HTMLファイルのみ短いTTLを設定し、定期的にオリジンに確認させる

カスタムドメインとSSL/TLS証明書の設定

CloudFrontに独自ドメインを設定し、HTTPS通信を実現する手順を解説します。

ACMで証明書を取得する

CloudFrontで使用する証明書は、必ずus-east-1（バージニア北部）リージョンのACM（AWS Certificate Manager）で取得する必要があります。

# us-east-1リージョンで証明書をリクエスト
aws acm request-certificate \
  --domain-name "www.example.com" \
  --subject-alternative-names "example.com" \
  --validation-method DNS \
  --region us-east-1

DNSバリデーションの場合、ACMが指定するCNAMEレコードをDNSに追加することで、ドメインの所有権を証明します。証明書は自動更新されるため、手動での更新作業は不要です。

ディストリビューションにカスタムドメインを設定

aws cloudfront update-distribution \
  --id E1234567890 \
  --distribution-config '{
    "Aliases": {
      "Quantity": 2,
      "Items": ["www.example.com", "example.com"]
    },
    "ViewerCertificate": {
      "ACMCertificateArn": "arn:aws:acm:us-east-1:123456789012:certificate/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
      "SSLSupportMethod": "sni-only",
      "MinimumProtocolVersion": "TLSv1.2_2021"
    }
  }'

セキュリティのため、MinimumProtocolVersionはTLSv1.2_2021以上を設定してください。古いTLSバージョンには既知の脆弱性があります。

セキュリティ対策｜WAFとアクセス制御

CloudFrontは単なるCDNではなく、セキュリティの最前線としても機能します。

AWS WAFとの連携

AWS WAF（Web Application Firewall）をCloudFrontに関連付けることで、SQLインジェクションやXSSなどの攻撃を防御できます。

# AWS管理ルールグループを使用したWeb ACLの例
{
  "Name": "mycompany-waf",
  "Scope": "CLOUDFRONT",
  "DefaultAction": { "Allow": {} },
  "Rules": [
    {
      "Name": "AWSManagedRulesCommonRuleSet",
      "Priority": 1,
      "OverrideAction": { "None": {} },
      "Statement": {
        "ManagedRuleGroupStatement": {
          "VendorName": "AWS",
          "Name": "AWSManagedRulesCommonRuleSet"
        }
      },
      "VisibilityConfig": {
        "SampledRequestsEnabled": true,
        "CloudWatchMetricsEnabled": true,
        "MetricName": "CommonRuleSet"
      }
    },
    {
      "Name": "AWSManagedRulesSQLiRuleSet",
      "Priority": 2,
      "OverrideAction": { "None": {} },
      "Statement": {
        "ManagedRuleGroupStatement": {
          "VendorName": "AWS",
          "Name": "AWSManagedRulesSQLiRuleSet"
        }
      },
      "VisibilityConfig": {
        "SampledRequestsEnabled": true,
        "CloudWatchMetricsEnabled": true,
        "MetricName": "SQLiRuleSet"
      }
    }
  ]
}

レスポンスヘッダーポリシーの設定

セキュリティヘッダーを追加して、ブラウザ側の防御を強化します。

aws cloudfront create-response-headers-policy \
  --response-headers-policy-config '{
    "Name": "SecurityHeaders",
    "Comment": "Security response headers",
    "SecurityHeadersConfig": {
      "StrictTransportSecurity": {
        "Override": true,
        "AccessControlMaxAgeSec": 31536000,
        "IncludeSubdomains": true,
        "Preload": true
      },
      "ContentTypeOptions": {
        "Override": true
      },
      "FrameOptions": {
        "Override": true,
        "FrameOption": "DENY"
      },
      "XSSProtection": {
        "Override": true,
        "Protection": true,
        "ModeBlock": true
      },
      "ReferrerPolicy": {
        "Override": true,
        "ReferrerPolicy": "strict-origin-when-cross-origin"
      }
    }
  }'

これらのヘッダーにより、以下の防御が有効になります。

• HSTS：ブラウザにHTTPS接続を強制
• X-Content-Type-Options：MIMEタイプスニッフィングを防止
• X-Frame-Options：クリックジャッキング攻撃を防止
• X-XSS-Protection：ブラウザのXSSフィルターを有効化

CloudFrontのモニタリングとコスト管理

CloudFrontの運用では、パフォーマンスとコストの継続的な監視が重要です。

主要メトリクスの監視

CloudWatch で以下のメトリクスを定期的に確認しましょう。

• CacheHitRate：キャッシュヒット率。80%以上が目標
• OriginLatency：オリジンからの応答時間
• 4xxErrorRate / 5xxErrorRate：エラー率
• BytesDownloaded：配信データ量

# キャッシュヒット率を確認
aws cloudwatch get-metric-statistics \
  --namespace AWS/CloudFront \
  --metric-name CacheHitRate \
  --dimensions Name=DistributionId,Value=E1234567890 Name=Region,Value=Global \
  --start-time 2026-03-21T00:00:00Z \
  --end-time 2026-03-22T00:00:00Z \
  --period 3600 \
  --statistics Average

コスト最適化のポイント

1. PriceClassの選択：全世界に配信する必要がなければ、PriceClass_200（アジア・北米・欧州）で十分
2. 圧縮の有効化：gzip/Brotli圧縮で転送量を30〜70%削減
3. キャッシュヒット率の向上：不必要なクエリ文字列やCookieをキャッシュキーから除外
4. オリジンシールドの活用：リージョン間のキャッシュ共有でオリジンへのリクエストを削減

# オリジンシールドの有効化
{
  "OriginShield": {
    "Enabled": true,
    "OriginShieldRegion": "ap-northeast-1"
  }
}

オリジンシールドは、エッジロケーション間のキャッシュの集約点として機能し、オリジンサーバーへのリクエスト数を大幅に削減します。特に多数のエッジロケーションから同じコンテンツがリクエストされる場合に効果的です。

まとめ｜CloudFrontでサイトの表示速度とセキュリティを向上させる

AWS CloudFrontは、サイトの高速化とセキュリティ強化を同時に実現できるサービスです。本記事のポイントを振り返りましょう。

• CDNの導入効果：ページ読み込み時間を60〜80%改善、オリジン負荷を70〜80%削減
• OAC方式：S3オリジンへのアクセスをCloudFront経由に限定
• キャッシュ戦略：コンテンツ種類に応じたTTLとキャッシュキーの設計
• HTTPS対応：ACMで無料のSSL/TLS証明書を取得し、TLS 1.2以上を強制
• セキュリティ：WAFとレスポンスヘッダーポリシーで多層防御
• コスト管理：圧縮・PriceClass・オリジンシールドでコストを最適化

CloudFrontは、S3に保存した静的ファイルの配信はもちろん、ECS/Fargate上のアプリケーションやRDSを使った動的サイトの前段にも配置できます。まずは静的ファイルの配信から始めて、段階的に適用範囲を広げていきましょう。Lambda@Edgeを使えば、エッジでの動的な処理も可能になります。