0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@yoshi-sa

【初心者・CloudFront入門】第3回：CloudFrontのキャッシュを操る！TTLの理解とInvalidation（キャッシュ無効化）

0
Last updated at Posted at 2026-03-15

※本記事はAIが書いて、人間がファクトチェック中です。
不備があったらコメントでご指摘いただけると幸いです。

連載構成案「手を動かして学ぶ！Amazon CloudFront完全マスター」

【第1回】CloudFrontの基本と、安全な静的ウェブサイトホスティング

  • 学習内容: CDN（コンテンツ配信ネットワーク）の仕組みとメリット、CloudFrontの基本用語（ディストリビューション、オリジン、エッジロケーション）。OAC（Origin Access Control）を用いたセキュアなS3連携のベストプラクティス。
  • ハンズオン (約45分):
    1. Amazon S3バケットを作成し、簡単なHTMLファイルをアップロードする。
    2. CloudFrontディストリビューションを作成する。
    3. OACを設定し、「S3バケットへの直接アクセスを禁止し、CloudFront経由でのみアクセス可能」にする設定を行う。
    4. ブラウザからCloudFrontのURLにアクセスして表示を確認する。

【第2回】独自ドメインとHTTPS化（SSL/TLS通信）

  • 学習内容: カスタムドメインの重要性、AWS Certificate Manager (ACM) の役割、Route 53との連携。
  • ハンズオン (約45分):
    (※事前準備としてRoute 53で管理されたドメインがあることを前提とします)
    1. ACM (バージニア北部リージョン) で無料のSSL/TLS証明書を発行する。
    2. 発行した証明書を第1回で作成したCloudFrontにアタッチする。
    3. Route 53でエイリアスレコードを作成し、独自ドメインとCloudFrontを紐づける。
    4. 独自ドメインでHTTPSアクセスできることを確認する。

【第3回】キャッシュコントロールとキャッシュの無効化（Invalidation） （今回はここ！！）

  • 学習内容: CloudFrontのキャッシュ戦略。「Cache Policy」と「Origin Request Policy」の違い、TTL（Time To Live）の概念、キャッシュヒット率向上の考え方。
  • ハンズオン (約30分):
    1. S3のHTMLファイルを更新し、ブラウザで古いキャッシュが残っていることを確認する。
    2. マネジメントコンソールからキャッシュの無効化（Invalidation）を実行し、最新ファイルが反映されることを確認する。
    3. カスタムのCache Policyを作成し、「特定のクエリ文字列のみキャッシュキーに含める」設定を試す。

【第4回】CloudFrontのセキュリティ強化（AWS WAFと地理的制限）

  • 学習内容: エッジでのセキュリティ対策。AWS WAFの基本機能、DDoS対策（AWS Shield Standard）、Geo-Restriction（地理的制限）。
  • ハンズオン (約45分):
    1. CloudFrontの標準機能である「地理的制限」機能を使い、日本以外からのアクセスをブロックする設定を行う（VPN等があれば動作確認）。
    2. AWS WAF Web ACLを作成し、CloudFrontにアタッチする。
    3. マネージドルール（例：IPレピュテーションリストやSQLi対策）を適用し、テスト的に自身のIPアドレスをブロックしてみて、403エラーが出ることを確認する。

【第5回】複数オリジンのルーティング（動的コンテンツと静的コンテンツの振り分け）

  • 学習内容: ビヘイビア（Behaviors）の概念。パスパターンに応じたオリジンの振り分け（例：画像はS3、APIはALB/API Gatewayなど）。
  • ハンズオン (約60分):
    1. ダミーの動的レスポンスを返すAPI Gateway（または簡易なLambda関数URL）を作成する。
    2. CloudFrontに2つ目のオリジンとしてAPIを追加する。
    3. ビヘイビアを設定し、/api/* へのリクエストはAPI側へ、それ以外（Default (*)）はS3へルーティングされるように設定する。
    4. Postmanやブラウザで、パスによって異なるバックエンドが応答することを確認する。

【第6回】エッジコンピューティング入門（CloudFront Functions）

  • 学習内容: エッジでコードを実行するメリット。CloudFront FunctionsとLambda@Edgeの違いと使い分け。
  • ハンズオン (約45分):
    1. CloudFront Functionsを作成する。
    2. ハンズオン課題：レスポンスヘッダにセキュリティヘッダ（Strict-Transport-SecurityやX-Frame-Optionsなど）を動的に追加するコード（JavaScript）を記述する。
    3. テスト機能を使って動作確認を行い、ディストリビューションにPublishする。
    4. ブラウザの開発者ツールで、ヘッダが追加されていることを確認する。

【第7回】最新機能キャッチアップと運用監視

  • 学習内容: 最近のCloudFrontのアップデート（Continuous DeploymentやVPC Originsなど）の紹介。CloudFrontのメトリクス監視とログ出力設定。
  • ハンズオン (約45分):
    1. VPC Originsの体験 (※最新機能): VPC内のプライベートなALBにCloudFrontから直接ルーティングする「VPC Origins」の設定を確認・構築する。
    2. CloudFrontの標準モニタリングダッシュボードで、キャッシュヒット率やエラー率を確認する方法を学ぶ。

はじめに

「手を動かして学ぶ！Amazon CloudFront完全マスター」の第3回です。
前回は、独自ドメインとHTTPS化を行い、本格的なウェブサイトの配信環境が整いました。

今回は、CDNの最大の強みである 「キャッシュ」 に焦点を当てます。「S3のファイルを更新したのに、ブラウザで見ると古いまま…」というCloudFrontあるあるの現象を意図的に発生させ、それを解決する方法（Invalidation）や、キャッシュのルール（Cache Policy）を学んでいきましょう！

本日のゴール

  • キャッシュとTTL（Time To Live）の概念を理解する
  • キャッシュの無効化（Invalidation）を手動で実行し、最新コンテンツを反映させる
  • Cache Policyを作成し、クエリ文字列でキャッシュを分ける設定を体験する

所要時間とコスト

  • 所要時間：約30分
  • コスト：無料枠内（Invalidationは月に1,000パスまで無料です）

1. 座学：CloudFrontのキャッシュ戦略（約5分）

キャッシュとTTLとは？

CloudFrontは、オリジン（S3など）から取得したデータを世界中のエッジロケーションに一時保存（キャッシュ）します。これにより、2回目以降のアクセスが爆速になります。
このキャッシュを「どのくらいの期間保持するか」を決めるのが TTL（Time To Live） です。デフォルトでは24時間（86400秒）に設定されています。

Cache PolicyとOrigin Request Policyの違い

CloudFrontの設定画面には、似たようなポリシーが2つあります。

  1. Cache Policy（キャッシュポリシー）: エッジでキャッシュを保存する際の「キー（条件）」を決めるルールです。（例：「URLが同じでも、スマホとPCで別のキャッシュを持たせるか？」など）
  2. Origin Request Policy（オリジンリクエストポリシー）: キャッシュになく、オリジン（S3等）へデータを取りに行く際に「どんな情報を一緒に送るか」を決めるルールです。

今回は「Cache Policy」をいじって、キャッシュの挙動を変えてみます。

2. ハンズオン：キャッシュの更新と無効化（約15分）

ステップ1：S3のコンテンツを更新して「古いキャッシュ」を確認する

まずは、S3のファイルを更新して、CloudFrontのキャッシュが効いていることを確認します。

  1. ローカルPCで、第1回で作成した index.html の内容を少し書き換えます。 
    <h1>CloudFrontからの配信に成功しました！（第3回更新版）</h1>
<p>キャッシュのテスト中です。</p>
  2. AWSマネジメントコンソールのS3を開き、バケットにこの新しい index.html をアップロード（上書き）します。
  3. ブラウザを開き、CloudFrontのURL（または前回設定した独自ドメイン）にアクセスします。
    👉 【結果】表示が「（第3回更新版）」に変わらず、古いままになっているはずです！ これがキャッシュが効いている証拠です。

【💡 Tips: 画面が変わらない時は？】
この後CloudFrontのキャッシュを削除しても画面が古いままの場合、お使いのブラウザ（Chromeなど）が手元に古いデータを記憶（ローカルキャッシュ）している可能性が高いです。検証時は、 「スーパーリロード（Ctrl+F5 または Cmd+Shift+R）」 を行うか、シークレットウィンドウで開くクセをつけましょう！

ステップ2：Invalidation（キャッシュの無効化）の実行

TTLの期限（24時間）を待たずに、今すぐ最新のファイルを見せたい場合は「Invalidation（無効化）」を行います。

  1. マネジメントコンソールでCloudFrontを開き、対象のディストリビューションを選択します。
  2. 「キャッシュ削除（Invalidations）」 タブを開き、「キャッシュ削除を作成」をクリックします。
  3. オブジェクトパス: /* と入力します。
    • （※特定のファイルだけ消したい場合は /index.html のように指定しますが、今回は全消しを意味するワイルドカードを使います。実務では、サイト全体を無効化すると一時的にオリジン（S3）へのアクセスが集中して負荷がかかるため、更新したファイルだけをピンポイントで指定するのがベストプラクティスです。）
  4. 「キャッシュ削除を作成」をクリックします。
    (※ステータスが「進行中」から「完了」になるまで1〜2分待ちます)
  5. 完了後、再度ブラウザをリロード（またはスーパーリロード）します。
    👉 【結果】今度は「（第3回更新版）」という新しい内容が表示されました！

3. ハンズオン：Cache Policyのカスタマイズ（約10分）

デフォルトの設定では、URLの末尾に ?version=1 のようなパラメータ（クエリ文字列）をつけても無視され、同じキャッシュが返されます。これを「パラメータごとに別のキャッシュを返す」ように変更してみましょう。

ステップ1：カスタムCache Policyの作成

  1. CloudFrontコンソールの左側メニューから 「ポリシー」 を選択し、「キャッシュ」タブの「キャッシュポリシーを作成」をクリックします。
  2. 名前: QueryStringCachePolicy などと入力します。
  3. キャッシュキーの設定:
    • クエリ文字列: 「すべて（All）」を選択します。（これにより、パラメータが違えば別のコンテンツとしてキャッシュされます）
  4. 画面最下部の「作成」をクリックします。

ステップ2：ビヘイビアへの適用

作成したポリシーをディストリビューションに適用します。

  1. ディストリビューションの画面に戻り、 「ビヘイビア（Behaviors）」 タブを開きます。
  2. デフォルトのビヘイビア（Default (*)）を選択し、「編集」をクリックします。
  3. キャッシュキーとオリジンリクエストのセクションで、以下のように設定します。
    • キャッシュポリシー: プルダウンから先ほど作成した QueryStringCachePolicy を選択します。
  4. 「変更を保存」をクリックします。（※デプロイ完了まで数分待ちます）

ステップ3：動作確認

  1. ブラウザで https://あなたのドメイン/index.html?ver=A にアクセスします。

    （※S3はURL末尾の ?ver=A などのクエリ文字列を無視して大元の index.html を返す仕様になっています。そのため、S3側に index.html?ver=A という新しいファイルを作る必要はありません！）

  2. S3の index.html を再度「ver=B用に更新」と書き換えてアップロードします。
  3. ブラウザで https://あなたのドメイン/index.html?ver=B にアクセスします。
    👉 【結果】Invalidationをしていないのに、新しい内容が表示されます！
    （※元の ?ver=A にアクセスすると、古いキャッシュがそのまま返ってきます）

4. お片付け（リソースを元に戻す）

今後の連載のために、少し特殊な設定にしたCache Policyを標準に戻しておきましょう。

  1. ディストリビューションの「ビヘイビア」から「編集」をクリックします。
  2. キャッシュポリシーを、AWS管理ポリシーである CachingOptimized に戻して保存します。
  3. （任意）左側メニューの「ポリシー」から、作成した QueryStringCachePolicy を削除します。

おわりに

今回は、CDN運用のキモである「キャッシュコントロール」と「Invalidation」について手を動かして学びました。
キャッシュは強力な武器ですが、設定を間違えると「更新したのに反映されない！」というトラブルの元になります。今日学んだ仕組みをしっかり覚えておきましょう。

次回（第4回）は、エッジでのセキュリティ対策です。AWS WAFを使って、特定の国からのアクセスをブロックしたり、悪意のある攻撃を防いだりする設定に挑戦します！お楽しみに！

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?