AWS CloudFrontのキャッシュをクリアしてS3の静的サイトを更新させる

June 07, 2019

最近個人的なプロジェクトでS3を触っています。ちゃんと触るのは初めてなので色々調べながらやっています。

S3で公開している静的サイトを更新しようとファイルアップロードしてもなかなか更新されなかったのを解決した備忘録です。

Amazon CloudFront とは - Amazon CloudFront

Amazon CloudFront は、ユーザーへの静的および動的ウェブコンテンツ (.html、.css、.js、イメージファイルなど) の配信を高速化するウェブサービスであり、CloudFront ではエッジロケーションと呼ばれるデータセンターの世界規模のネットワークを通じてコンテンツが配信されます。

要するにCDNですね。これのキャッシュが効いていてコンテンツが更新されなかったのが原因のようでした。

キャッシュクリアする方法

CloudFrontでInvalidationを作成することでキャッシュをクリアできます。

CloudFrontの管理画面にアクセスし、IDをクリックしてDistributionの詳細画面に入ります。

スクリーンショット 2019-06-07 9.41.30.png

Distributionの詳細画面にて、Create Invalidationをクリックします。

スクリーンショット 2019-06-07 9.41.41.png

Invalidationの作成画面にて、Object Pathsにキャッシュクリアしたパスを入力します。今回はワイルドカードを使って全てクリアしたいので/*を入力します。

スクリーンショット 2019-06-07 9.41.52.png

Invalidationが作成され、StatusがCompletedになれば削除完了です。

スクリーンショット 2019-06-07 9.42.17.png

S3にファイルをアップロードしてもなかなか更新されなかったのはCloudFrontのキャッシュが原因でした。