世界中に届く前に、キャッシュを使いこなす

手順に迷ったときや、用語の意味を確かめたいときに開きましょう。

※ リンク切れの場合は、ページタイトルで検索してください。

同じCloudFrontディストリビューション・同じオリジンのまま、キャッシュ無効化を実行する前後で、表示される内容がどう変わるかを比較します。

※ オリジンのS3バケットの内容は、Before・Afterどちらも同じ（更新後）です。違いはCloudFront側のキャッシュ状態だけです。

以下の要件を満たし、「古いまま」→「無効化」→「最新に切り替わる」という変化を確認してください。

「オリジンを作る」→「CloudFront配信を作る」→「古いキャッシュを確認する」→「無効化して切り替える」という順番で進めます。

1. フェーズ1 — シンプルなオリジンを用意する

2. マネジメントコンソールにサインインし、リージョンを合わせる

   ブラウザで AWS マネジメントコンソールにサインインし、画面右上のリージョンが「アジアパシフィック（東京）ap-northeast-1」になっていることを確認します。

3. S3バケットを作成し、シンプルなページを公開する

   S3コンソールでバケットを1つ作成します（名前は一意に、例：cf-cache-demo-yourname）。「パブリックアクセスをブロック」を解除し、index.html（例：見出しだけのシンプルなHTML）をアップロードして、s3:GetObjectをPrincipal: *に許可するバケットポリシーを設定します。

   学習目的の一時的な公開設定

   今回はCloudFrontのキャッシュ動作に焦点を当てるため、オリジンの公開設定はシンプルにしています。検証が終わったら、後片づけでバケットごと削除します。

4. フェーズ2 — CloudFront配信を作る

5. CloudFrontディストリビューションを作成する

   CloudFrontコンソールで「ディストリビューションを作成」を選び、オリジンに手順2のバケットを指定します。オリジンアクセスは「パブリック」のままで構いません（OACは設定しません）。キャッシュビヘイビアのキャッシュポリシーはデフォルト（CachingOptimizedなど）のままにします。

6. デプロイ完了を待ち、表示を確認する

   ディストリビューションのステータスが「デプロイ済み」になったら、表示されているドメイン名（例：d111111abcdef8.cloudfront.net）にアクセスし、ページが表示されることを確認します。

7. フェーズ3 — 古いキャッシュが残る様子を確認する

8. index.htmlの内容を書き換えて再アップロードする

   ローカルでindex.htmlの見出しなどの文言を変更し、同じファイル名でS3に再アップロードします。

9. CloudFront経由でアクセスし、古い内容のままであることを確認する

   CloudFrontのドメイン名にもう一度アクセスします。ブラウザのシークレットウィンドウや別のブラウザで開いても、更新前の内容のまま表示されることを確認します。

   ブラウザのキャッシュではない

   シークレットウィンドウや別のブラウザで開いても古いままなのは、ブラウザ側のキャッシュではなく、CloudFrontのエッジロケーション側にまだ古いバージョンがキャッシュされているためです。S3バケットへ直接アクセスすれば最新の内容が見られることでも確認できます。

10. フェーズ4 — キャッシュを無効化して切り替える

11. キャッシュ無効化リクエストを作成する

    CloudFrontコンソールのディストリビューション詳細で「無効化」タブを開き、「無効化を作成」を選びます。オブジェクトパスに/*を指定して作成します。

12. 無効化の完了を待ち、最新の内容を確認する

    無効化リクエストのステータスが「完了」になったら、もう一度CloudFrontのドメイン名にアクセスします。

    これがゴール

    さきほど古いまま表示されていたページが、今度は最新の内容で表示される——この変化を確認できたら、このハンズオンの目的は達成です。

初学者がよく引っかかる箇所を先回りでまとめました。答えそのものは載せていませんが、「どこを見直すか」の手がかりとして使ってください。

要件の再確認ではなく、画面のどこを見れば達成を確認できるかをまとめました。次を順に確かめましょう。

• CloudFrontのドメイン名にアクセスでき、最初のページが表示される。
• index.html更新後、無効化前は古い内容のまま表示される（シークレットウィンドウなど複数の方法で確認済み）。
• 無効化リクエストのステータスが「完了」になっている。
• 無効化後にアクセスすると、最新の内容が表示される。

手を動かすことに加えて、次の問いに自分の言葉で答えられるようにしておくと、理解がより深まります。

1. キャッシュという仕組みがなく、CloudFrontが毎回オリジンに問い合わせる構成だったら、どんな問題が起きそうでしょうか。
   ヒント

   オリジンへのアクセスが増えることで生じる、応答速度やオリジン側の負荷について考えてみましょう。「キャッシュがあることで何が省略されているか」がヒントです。
2. ファイル名を変える方式（バージョニング）と、キャッシュ無効化、それぞれどんな場面に向いているでしょうか。
   ヒント

   無効化には料金がかかる場合があり、反映にも数分かかります。頻繁に更新するファイルと、まれにしか更新しないファイルで、向き不向きがどう変わるか考えてみましょう。
3. 本番運用で、無効化のリクエスト回数を減らす（コストを抑える）には、どのような工夫が考えられるでしょうか。
   ヒント

   個別のファイルを指定して無効化する方法と、ワイルドカード（/*）で広い範囲を無効化する方法では、料金の数え方にどんな違いがあるか調べてみましょう。

作成したリソースを順番に削除します。

1. CloudFrontディストリビューションを無効化する：ディストリビューションを選び、「無効化」を実行します（削除の前に無効化が必要です）。
2. 無効化が完了したらディストリビューションを削除する：状態が「無効」になったら削除します。
3. S3バケットを空にして削除する：バケットの中のオブジェクトをすべて削除してから、バケット本体を削除します。