こんにちは、フルスタックエンジニアのryuです。
今回の記事は、CloudFrontでキャッシュをクリアする方法を解説します。
S3のファイルを更新したのに、Webサイトでは古い画像やCSSが表示される。CloudFrontを使っていると、このようなことがあります。
キャッシュをすぐに削除したい場合は、Invalidationを作成して対象のパスを無効化します。
この記事では、AWSコンソールからキャッシュを削除する方法だけではなく、AWS CLIを使う方法や、キャッシュを削除しても表示が変わらない場合の確認ポイントまで解説します。
CloudFrontでキャッシュをクリアする方法解説！¶
今回の記事は、cloudfrontでキャッシュをクリアする方法を解説します。
キャッシュを消す方法は簡単で、「Create Invalidation」からキャッシュを削除できます。
設定手順を詳しく解説します！
そもそもCloudFrontのキャッシュとは？¶
CloudFrontは、HTML、CSS、JavaScript、画像などを利用者に近い場所から配信するCDNです。
一度取得したコンテンツをエッジロケーションにキャッシュすることで、表示を高速化できます。
ただし、キャッシュが残っている間にS3側のファイルを更新すると、利用者には古いファイルが返されることがあります。
たとえば、S3上の/css/style.cssを更新したのにWebサイトのデザインが変わらない場合です。
このようなときに使うのがInvalidationです。
CloudFrontへ古いキャッシュを無効にするよう指示するイメージです。
【関連記事】S3とCloudFrontを使ってWebサイトを公開する流れから確認したい方は、S3+CloudFrontを使って静的サイトをHTTPSで公開する方法も参考にしてください。
CloudFrontのCreate Invalidationからキャッシュクリアする¶
AWSコンソールからInvalidationを作成する¶
では、早速設定方法を解説します。
まず、cloudfrontのコンソール画面に行きます。
そしてタブの「Invalidations」を選択します。
CloudFrontを複数利用している場合は、対象のDistributionを間違えないようにしましょう。
削除するキャッシュのパスを指定する¶
Object Pathsに削除するキャッシュのパスを指定して完了です。
“*”を指定すると全てのキャッシュを削除することができます。
Statusが「In Progress」から「Completed」になれば完了です！
現在のCloudFrontでは、パスを指定するときに先頭の/を付けます。
たとえば、1つのCSSだけを対象にする場合は次のように指定します。
/css/style.css
画像ディレクトリ以下をまとめて対象にしたい場合は、末尾にワイルドカードを付けます。
/images/*
すべてのパスを対象にしたい場合は、次のように指定します。
/*
ワイルドカードを使う場合は、基本的にパスの末尾へ*を指定します。
使い分けを簡単にまとめると、次のようになります。
| 指定するパス | 対象 |
|---|---|
/index.html |
index.htmlだけ |
/css/style.css |
style.cssだけ |
/images/* |
images以下をまとめて対象 |
/* |
Distribution内のすべてのパス |
更新したファイルが分かっている場合は、必要なパスだけをInvalidationする方法もあります。
AWS CLIからCloudFrontのキャッシュを削除する¶
CI/CDでデプロイしている場合は、AWS CLIからInvalidationを作成すると自動化しやすくなります。
create-invalidationコマンドを使う¶
AWS CLIでは、次のコマンドを利用します。
aws cloudfront create-invalidation \
--distribution-id E1234567890ABC \
--paths "/index.html"
E1234567890ABCの部分は、自分のCloudFront Distribution IDへ変更してください。
すべてのパスを対象にする場合は次のように実行できます。
aws cloudfront create-invalidation \
--distribution-id E1234567890ABC \
--paths "/*"
シェル上では*が別の意味で展開されることがあるため、"/*"のように引用符で囲んでおくのがポイントです。
複数のファイルを指定することもできます。
aws cloudfront create-invalidation \
--distribution-id E1234567890ABC \
--paths "/index.html" "/css/style.css" "/js/app.js"
S3へのデプロイと組み合わせれば、更新作業を自動化できます。
【関連記事】AWSでデプロイを自動化したい方は、CodePipelineの使い方を解説！CodeBuildと連携してS3にデプロイするも参考にしてください。
CloudFrontのキャッシュ削除で注意したいポイント¶
Invalidationは便利ですが、更新頻度が高いサイトではファイル名やCache-Controlも含めて考えると運用しやすくなります。
Invalidationには料金が発生する場合がある¶
CloudFrontでは、従量課金の利用方法では毎月一定数までInvalidationのパスを無料で利用でき、それを超えると料金が発生します。
そのため、大量のファイルを毎回1つずつ指定するより、必要に応じてワイルドカードを利用したり、そもそもInvalidationを頻繁に実行しなくて済む構成を考えることも大切です。
たとえば、CSSやJavaScriptのファイル名を更新ごとに変更する方法があります。
app.abc123.js
app.def456.js
新しいファイル名になれば、CloudFrontから見ても別のオブジェクトとして扱えるため、古いキャッシュを毎回無効化しなくても新しいファイルを配信しやすくなります。
Cache-Controlも確認する¶
CloudFrontでどれくらいコンテンツをキャッシュするかは、Cache Policyやオリジンから返されるCache-Controlなどの設定も関係します。
頻繁に更新するHTMLを長期間キャッシュすると、更新が反映されにくくなります。
反対に、ほとんど変わらない画像やバージョン付きのJavaScriptまで短時間で期限切れにすると、キャッシュのメリットを活かしにくくなります。
キャッシュを削除する方法だけではなく、どのファイルをどれくらいキャッシュするかまで考えるとCloudFrontを使いやすくなります。
キャッシュクリアしてもキャッシュが残っている場合の対処法¶
最後にcloudfrontのキャッシュクリアしても、まだキャッシュが残っている場合の対処方法を解説します。
それは、現在使用しているブラウザを閉じて、新しくシークレットブラウザでアクセスすることです。
ブラウザにキャッシュが残ってしまい、cloudfrontでクリアしても変更されない場合は、ブラウザを一度消しましょう。そして、キャッシュが保存されないシークレットモードでアクセスすることをお勧めします。
ただし、シークレットモードで変わらない場合は、CloudFront以外も確認してみましょう。
S3側のファイルが本当に更新されているか確認する¶
まず確認したいのは、オリジン側のファイルです。
CloudFrontのキャッシュを消しても、S3に古いファイルが置かれていれば、再び古いコンテンツが取得されます。
S3へアップロードしたファイル名や更新日時が正しいか確認してください。
Invalidationのパスが正しいか確認する¶
次に、Invalidationで指定したパスを確認します。
たとえば実際には/assets/css/style.cssなのに、/css/style.cssをInvalidationしても対象にはなりません。
StatusがCompletedだから必ず目的のファイルが削除された、というわけではない点に注意しましょう。
ブラウザの開発者ツールでも確認する¶
Chromeなどの開発者ツールを使い、Networkタブから実際にどのURLへアクセスしているのか確認する方法もあります。
思っていたファイルとは別のURLを読み込んでいることもあります。
キャッシュの問題は、CloudFront、ブラウザ、オリジンのどこに古いデータが残っているのかを一つずつ切り分けると分かりやすいです。
【関連記事】S3とCloudFrontで別ドメインへ転送したい場合は、S3とCloudFrontを使ってHTTPSでリダイレクトする方法も参考にしてください。
AWSを実際に操作しながら学習する¶
CloudFrontでは、S3、DNS、HTTPS、キャッシュなど、さまざまなインフラ知識がつながります。
InfraAcademyでは、Linux、ネットワーク、AWSを実際に操作しながら学習できます。
Linuxの基本操作から学習したい方は、Linux入門講座をご覧ください。
CloudFrontを理解するうえでも重要なIPアドレス、DNS、ルーティングなどは、ネットワーク講座で学習できます。
AWSを基礎から学習したい方は、AWS講座も用意しています。
CloudFrontでキャッシュをクリアする方法まとめ¶
ここまで、cloudfrontでキャッシュをクリアする方法を解説しました。
「Create Invalidation」から削除するキャッシュのパスを指定して、削除します。簡単ですね。
S3+CloudFrontで静的サイトを公開している場合、新しいファイルをデプロイしてもCloudFrontに古いキャッシュが残っていると、すぐに変更が表示されないことがあります。
その場合は、Invalidationsから対象のパスを指定してキャッシュを無効化してみましょう。
/index.html
/css/*
/*
AWS CLIを使う場合は、次のように実行できます。
aws cloudfront create-invalidation \
--distribution-id E1234567890ABC \
--paths "/*"
それでも表示が変わらない場合は、ブラウザキャッシュだけではなく、S3のファイル、Invalidationのパス、実際にアクセスしているURLも確認してください。
CloudFrontのキャッシュは表示を高速化するための便利な仕組みです。
単に毎回削除するのではなく、Cache-Controlやファイル名のバージョニングも含めて使い分けると、より運用しやすくなります。
