【AWS】CloudFront 運用ガイド | S3 連携・キャッシュ対策・VPC Origin と実践 Tips

  • URLをコピーしました!
目次

はじめに

Amazon CloudFront は、コンテンツを高速かつ安全に配信するための CDN(コンテンツ配信ネットワーク)サービスであり、Amazon S3 と組み合わせた Web サイトホスティングなどの構成で広く利用されています。

しかし、実際の運用フェーズに入ると、「コストを最適化するための料金クラス(Price Class)の選定」や「意図しないキャッシュミス(Miss from cloudfront)の解消」、さらには「VPC 内のバックエンドリソースとの安全な通信」といった、一歩踏み込んだ課題に直面することが少なくありません。

本記事では、S3 連携をベースとした CloudFront の基本構成から、運用者が押さえておくべきキャッシュ対策や「CloudFront VPC Origin」について解説します。また、実践的な運用 Tips として、CloudFront Functions を用いてサブディレクトリへのアクセス時に index.html を自動補完する設定手順も併せて紹介します。

この記事でわかること
  • S3 と CloudFront の連携構成と料金クラス(Price Class)の選び方
  • キャッシュミス(Miss from cloudfront)の主な原因と対策
  • 「CloudFront VPC Origin」を利用したバックエンドとの連携手法
  • 【実践】CloudFront Functions を用いた index.html の自動補完手順

CloudFront と S3 の連携構成と料金クラス(Price Class)

Amazon CloudFront を導入する上で最も一般的なユースケースが、Amazon S3 をオリジン(コンテンツの取得元)とする静的 Web サイトの配信構成です。CloudFront を経由させることで、世界中のエッジロケーションからコンテンツを高速に配信できるだけでなく、SSL/TLS 証明書(HTTPS 通信)の適用や、オリジンへの直接アクセスを遮断する強固なセキュリティ制御(OAC: Origin Access Control)が可能になります。

また、CloudFront の前段に AWS WAF(Web Application Firewall)を配置することで、悪意のある攻撃から S3 バケットを保護するセキュアな構成を構築できます。詳細な手順については以下の記事をご参照ください。

コスト最適化のための「料金クラス(Price Class)」の選定

CloudFront のデータ転送料金は、配信される地域(エッジロケーション)によって異なります。運用コストを最適化するために重要なのが「料金クラス(Price Class)」の適切な選定です。

Price Class All(すべて)

世界中のすべてのエッジロケーションを使用し、最高のパフォーマンスを提供します(デフォルト設定)

Price Class 200

北米、欧州、アジア、中東、アフリカのエッジロケーションを使用します。

Price Class 100

最も安価な地域である北米と欧州のエッジロケーションのみを使用します。

例えば、ターゲットとなるユーザー層が日本国内やアジア圏に限られている場合は、南米やオーストラリアなどの高価なエッジを含まない「Price Class 200」へ変更することで、パフォーマンスを損なわずにコストを抑制できる可能性があります。

キャッシュミス(Miss from cloudfront)の原因と対策

CloudFront を運用する中で、「想定通りにキャッシュが効いていない(オリジンへの通信量や負荷が減らない)」という事象が発生することがあります。

ブラウザの開発者ツールやcurlコマンド等でHTTPレスポンスヘッダーを確認した際、x-cache: Miss from cloudfront という値が返ってきている場合、CloudFront のエッジロケーションに有効なキャッシュが存在せず、都度オリジン(S3 や ALB など)へデータを取りに行っている状態を示しています。

※キャッシュが効いている場合は Hit from cloudfront となります。

キャッシュヒット率を低下させる主な原因と対処法

初回アクセスや TTL(キャッシュの有効期限)切れによるキャッシュミスは正常な動作ですが、恒常的に Miss となる場合は、CloudFront の「キャッシュポリシー」の設定を見直す必要があります。

最も多い原因は、不要なクエリ文字列(Query Strings)や HTTP ヘッダー、Cookie をキャッシュキーに含めてしまっているケースです。 例えば、トラッキング用のランダムなクエリ文字列(?utm_source=...?session_id=... など)をベースにキャッシュを生成する設定になっていると、URL が実質的に毎回異なるものと判定され、結果としてすべてのリクエストでキャッシュミスが発生します。

対策

CloudFront のビヘイビア(Behaviors)設定にあるキャッシュポリシーを確認し、オリジンへ転送する必要のないクエリ文字列やヘッダーは「キャッシュキーに含めない(None)」設定に変更することで、キャッシュヒット率を大幅に改善することができます。

バックエンドとの安全な連携(CloudFront VPC Origin)

CloudFrontはS3のような静的コンテンツの配信だけでなく、動的なWebアプリケーションのフロントエンドとしても利用されます。この際、近年注目を集めているのが「CloudFront VPC Origin」という機能です。

従来、CloudFrontからVPC(Virtual Private Cloud)内のリソース(ALB や EC2 など)へリクエストを転送する場合、それらのリソースをパブリックサブネットに配置してインターネット経由で通信させるか、複雑なプロキシ構成を組む必要がありました。

しかし、CloudFront VPC Originを利用することで、CloudFrontから直接、VPCのプライベートサブネット内にあるリソースへ安全にルーティングすることが可能になります。これにより、バックエンドシステムをインターネットから完全に隔離(パブリックIPの付与を廃止)でき、セキュリティの向上とアーキテクチャの簡素化を同時に実現できます。

【実践 Tips】CloudFront Functions による index.html の自動補完

動的なバックエンドとの連携において VPC Origin が有効な一方で、S3 をオリジンとした静的 Web サイトの配信においても、運用上よく直面する特有の課題があります。それが「サブディレクトリへのアクセス時に index.html が表示されない」という問題です。

S3 を直接「静的ウェブサイトホスティング」として公開している場合は自動で補完されますが、セキュリティを高めるために OAC(Origin Access Control)等を用いて CloudFront 経由でのみアクセスを許可する構成(S3 の REST API エンドポイントを使用)にしている場合、https://example.com/test/ にアクセスしても、自動的に https://example.com/test/index.html を読みに行ってはくれません。

これを解決し、URL に index.html を入力させずに目的のページを表示させるには、「CloudFront Functions」を使用します。

関数の作成

CloudFrontコンソールの左ペインから「関数」を選択し、「関数を作成」をクリックします。

任意の名前(例:test)を入力して作成後、以下のコードを入力して「変更を保存」します。

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // Check whether the URI is missing a file name.
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    }
    // Check whether the URI is missing a file extension.
    else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }

    return request;
}

関数の発行(※重要)

コードを保存したら、必ず「発行」タブから「関数を発行」をクリックしてください。この発行処理を忘れたまま後述の紐づけ作業を行うと、以下のエラーが発生して設定が完了しません。

The parameter FunctionAssociationArn is invalid; test was not found or is not published.

ビヘイビアへの紐づけ(関連付け)

最後に対象のディストリビューションを開き、「ビヘイビア」タブから対象のパスパターンを選択して「編集」をクリックします。

画面下部の「関数の関連付け(Function associations)」セクションにて、以下の通り設定して変更を保存します。

  • ビューワーリクエスト(Viewer request):関数タイプに「CloudFront Functions」を選択
  • 関数 ARN / 名前:先ほど作成・発行した関数名(例:test)を選択

設定がディストリビューションに反映(デプロイ)されると、サブディレクトリへのアクセス時に自動で index.html が補完されて表示されるようになります。

まとめ

本記事では、Amazon CloudFront の運用において直面しやすい課題とその解決策について解説しました。

  • S3 連携等の基本構成において、配信地域に応じた Price Class の選定がコスト最適化に繋がる。
  • Miss from cloudfront が多発する場合は、キャッシュポリシー(クエリ文字列等の設定)を見直す。
  • CloudFront VPC Origin により、プライベートサブネット内のリソースと安全かつ直接連携できる。
  • S3 オリジン環境での index.html 補完は、CloudFront Functions のビューワーリクエストを利用する。

以上、最後までお読みいただきありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

インフラ(クラウド/NW/仮想化)から Web 開発まで、技術領域を横断して活動するエンジニア💻 コンシューマー向けエンタメ事業での新規開発・運営経験を活かし、実戦的な技術ノウハウを発信中

[ Certs ] CCIE Lifetime Emeritus / VCAP-DCA ✒️ [ Life ] 技術書・ビジネス書愛好家📖 / 小・中学校で卓球コーチ👟

目次