web-dev-qa-db-ja.com

CloudFrontがS3バケットでindex.htmlをキャッシュしないようにする方法

React S3バケットでホストされているアプリです。コードはyarn build（create-react-appベースのアプリです）を使用して縮小されます。buildフォルダーは何かのようなもの：

build
├── asset-manifest.json
├── favicon.ico
├── images
│   ├── map-background.png
│   └── robot-icon.svg
├── index.html
├── js
│   ├── fontawesome.js
│   ├── packs
│   │   ├── brands.js
│   │   ├── light.js
│   │   ├── regular.js
│   │   └── solid.js
│   └── README.md
├── service-worker.js
└── static
    ├── css
    │   ├── main.bf27c1d9.css
    │   └── main.bf27c1d9.css.map
    └── js
        ├── main.8d11d7ab.js
        └── main.8d11d7ab.js.map

index.htmlをキャッシュしたくないのは、コードを更新する場合（main.*.jsの16進数の接尾辞を更新する場合）、<script src>の変更を取得するためにユーザーが次にアクセスする必要があるためです。 index.htmlで、更新されたコードを指します。

CloudFrontでは、パスのみを除外しているように見えますが、「/」を除外しても正しく機能しないようです。コードを変更するという奇妙な動作をしており、リフレッシュを押すと表示されますが、Chromeを終了して戻ると、何らかの理由で非常に古いコードが表示されます。

すべてのコードリリース（CodeBuild経由）で無効化をトリガーする必要はありません。他の方法はありますか？チャレンジの1つは、これがReact Routerを使用するアプリであるため、エラードキュメントをindex.htmlに設定し、HTTPステータスを強制することにより、いくつかのトリックを行う必要があることだと思います403の代わりに200。

amazon-web-servicesamazon-s3amazon-cloudfront
35
ffxsam

index.htmlをキャッシュするには、Cache-Control: max-age=0ファイルのヘッダーのみ。 CloudFrontはeveryリクエストでOrigin S3バケットにリクエストを返しますが、これは望ましい動作のようです。

より長い有効期限を設定し、CloudFrontキャッシュを手動で無効にしたい場合は、*または/*無効化パスとして（/あなたが言及したように）。ただし、世界中のすべてのCloudFront EdgeノードがOriginの変更を反映するには、最大15分かかります。

33
Luke Peterson

CloudFront構成に基づくソリューション：

CloudFrontディストリビューションの[動作]タブで、新しい動作を作成します。次の値を指定します。

  • パスパターン：index.html
  • オブジェクトキャッシング：カスタマイズ
  • 最大TTL：0（または別の非常に小さな値）
  • デフォルトTTL：0（または別の非常に小さな値）

この構成を保存します。

CloudFrontはキャッシュしませんindex.htmlもう。

16
seza443

新しいファイルをs3にアップロードしてCloudfrontを無効にした後、index.htmlファイルにcache-controlを設定するために実行したコマンドは次のとおりです。

aws s3 cp s3://bucket/index.html s3://bucket/index.html --metadata-directive REPLACE --cache-control max-age=0
10
chadhamre