web-dev-qa-db-ja.com

Amazon Cloudfront Cache-Control：no-cacheヘッダーは24時間後に効果がありません

S3で静的なWebサイトをホストし、Cloudfrontを使用してファイルをキャッシュしています。基本的に、次のヘッダーを持つ3つのファイルがあります。

  • index.html（キャッシュ制御：キャッシュなし）
  • app.js（キャッシュ制御：max-age = 63072000、パブリック）
  • style.css（キャッシュ制御：max-age = 63072000、パブリック）

私のhtmlファイルは、cssまたはjsファイルを更新するたびに更新されるクエリ文字列パラメーターを使用します。これらのパラメーターを渡すようにs3を構成し、キャッシュされたリソースを無効にするように機能することを確認しました。 index.htmlファイルは次のようになります。

<html>
    <head>
        ...
        <link rel="stylesheet" href="app.css?v=14113e2c764">
    </head>
    <body>
        ...
        <script src="app.js?v=14113e2c764"></script>
    </body>
</html>

終日更新をプッシュするのでうまくいくようですが、翌朝に来て次の変更をプッシュすると、index.htmlファイルは古くなっています。正しい？v =パラメーターを使用する代わりに、古いパラメーターを使用します！修正する唯一の方法は、htmlファイルを手動で無効にすることです。その後、すべてがその日の残りのために機能します。翌日、私は再び同じ問題を抱えています。

何が起きてる？

cachingamazon-web-servicesamazon-s3amazon-cloudfront
26
Adam

CloudFrontディストリビューションのMinimum TTLが0に設定されていることを確認します。他の値に設定されている場合、CloudFrontはno-cacheヘッダーを尊重せず、Minimum TTLのファイルをキャッシュします。キャッシングディレクティブの詳細については、次を参照してください。

http://docs.aws.Amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html

それでも解決しない場合は、index.htmlの実際のHTTPリクエストをデバッグし、ここに応答ヘッダーを投稿してみてください。

また、index.htmlファイルにno-cacheを使用する代わりに、

public, must-revalidate, proxy-revalidate, max-age=0

これにより、CloudFrontはファイルをEdgeロケーションに保存できますが、リクエストごとにOriginで強制的に再検証します。ファイルが変更されていない場合、CloudFrontはファイルのコンテンツ全体をOriginから転送する必要はありません。これにより、特に大きなファイルの場合、応答時間を短縮できます。

42
dcro