CloudFrontのキャッシュをすぐにクリアする方法


CloudFront + S3 で静的サイトを公開している場合、CDN でコンテンツがキャッシュされているのですぐには更新が反映されません。

ですが、更新作業の後などですぐに反映したい場合は困ってしまいます。

この記事では、CloudFront でキャッシュをすぐにクリアする方法をご紹介します。

CloudFront のデフォルト TTL は 86400 秒なので、24 時間コンテンツがキャッシュされます。

f:id:fnyablog:20181008090133p:plain

これでは、さすがに待っていられませんね。

まず、キャッシュクリア前の HTTP レスポンスヘッダーを確認します。

$ curl  -I https://xxxxx.jp
HTTP/2 200 
content-type: text/html
content-length: 54
date: Sun, 07 Oct 2018 23:27:08 GMT
last-modified: Sun, 07 Oct 2018 10:54:45 GMT
etag: "d5abbcb95eb47b2edf735ac821b16f26"
accept-ranges: bytes
server: AmazonS3
age: 298
x-cache: Hit from cloudfront
via: 1.1 04ba777c63c6b23a364cd79bc73abdd1.cloudfront.net (CloudFront)
x-amz-cf-id: e5eO9B-4Q8RyXFDyZ8XlvObnoSE4hcKRsenV68YWbxZLGp_ND1bwoQ==

x-cache: Hit from cloudfront となっているのでキャッシュを取得していることが分かります。

キャッシュを取得している確認が取れたので、キャッシュのクリアを行います。

Invalidations タブの「Create Invalidation」をクリックします。

f:id:fnyablog:20181008090200p:plain

キャッシュをすべてクリアするには、Object Paths に「/*」を入力して、「Invalidate」をクリックします。

f:id:fnyablog:20181008090215p:plain

一覧の Status が In Progress から Completed に変わったらキャッシュがクリアされています。

f:id:fnyablog:20181008090234p:plain

2、3分くらい時間がかかったでしょうか。Status が Completed になったので、HTTP レスポンスヘッダーを再度確認します。

$ curl  -I https://xxxxx.jp
HTTP/2 200 
content-type: text/html
content-length: 54
date: Sun, 07 Oct 2018 23:50:53 GMT
last-modified: Sun, 07 Oct 2018 10:54:45 GMT
etag: "d5abbcb95eb47b2edf735ac821b16f26"
accept-ranges: bytes
server: AmazonS3
x-cache: Miss from cloudfront
via: 1.1 646b6f21a2659c68f7a3822d035b97d3.cloudfront.net (CloudFront)
x-amz-cf-id: UvUEd5VNkDOtlHvQ61rvHv7gVhUQOBH8KEwxsTToO3r7MhG2MB1zeQ==

x-cache: Miss from cloudfrontとなっているので、キャッシュにヒットせず、コンテンツを直接読み込んだことが分かります。

これで簡単にキャッシュをクリアすることができますね。

なお、参考サイトによると無効化機能は回数が多いと課金されるようなので、ご注意ください。