AWS CloudFrontでエッジサーバのキャッシュを無効化する方法

AWS CloudFrontでエッジサーバのキャッシュを無効化する方法

CloudFront + S3という構成でウェブホスティングしているとします。CDNを利用すれば近くのエッジサーバにキャッシュされるので、ウェブブラウズが早くなりますが、要件によってキャッシュさせたくない場合があると思います。

CloudFrontでキャッシュ無効化する手順です。

S3でウェブホスティング

S3にindex.htmlでも配置してホスティングします。

キャッシュ無効化する際にS3のバケット自体のメタデータに以下を追加する必要があります。

ヘッダ
Cache-Control no-store

no-storeをメタデータで指定しておけば一切キャッシュしません。no-cacheではないので注意です。

実際はCloudBerry Explorerを使用しないとバケット単位にメタデータは設定できないのでオブジェクト(ここではindex.html)にメタデータを設定します。

AWS CloudFrontでエッジサーバのキャッシュを無効化する方法

CloudFrontの設定

CloudFrontの設定をします。S3と紐づけますが割愛します。

主にTTLを0にするという設定です。

AWS CloudFrontでエッジサーバのキャッシュを無効化する方法

最後に「Create Distribution」ボタンを押して作成します。※20分ほどかかります

AWS CloudFrontでエッジサーバのキャッシュを無効化する方法

上記画面のDomain Name欄のxxx.cloudfront.netをコピーして、xxx.cloudfront.net/index.htmlにブラウザからアクセスします。

AWS CloudFrontでエッジサーバのキャッシュを無効化する方法

こんな感じでアクセスできたらOKです。

キャッシュされていないことの検証

キャッシュされているかどうかは、ヘッダ情報のX-Cacheで判断ができます。

X-Cache 意味
Hit from cloudfront キャッシュされている
RefreshHit from cloudfront キャッシュされているがTTL切れ
Miss from cloudfront キャッシュされていない

参考サイト:CloudFront キャッシュ動作確認

$ curl –head http://d3gti842iotdf5.cloudfront.net/index.html
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 50
Connection: keep-alive
Date: Tue, 17 Dec 2019 11:54:13 GMT
Last-Modified: Tue, 17 Dec 2019 11:31:12 GMT
ETag: "38a2d183f196b2787fdcde102cc457fc"
Cache-Control: no-store
Accept-Ranges: bytes
Server: AmazonS3
X-Cache: Miss from cloudfront ← ここ
Via: 1.1 71c0bff02d86d03bc100194555d98854.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: NRT51-C2
X-Amz-Cf-Id: yXn1rYYVVlUHI5BsV9u0621-PO10DwX96xtDTDVl6JAZExklLq2a1w==

view raw
gistfile1.txt
hosted with ❤ by GitHub

curlコマンドを何度叩いてもMiss from cloudfrontであれば、キャッシュ無効化されていることの確認ができます。

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA