S3バケットでCloudFrontキャッシュindex.htmlを作成する方法

Question

S3バケットにホストされているReactアプリがあります。コードはyarn build（これは作成反応型アプリベースのアプリ）を使用して縮小されています。私は（更新するmain.*.jsに六角サフィックスを引き起こす）コードを更新した場合、私が上で拾うために、ユーザの次の訪問を必要とするので、私は、index.htmlがキャッシュされたくない

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 

：buildフォルダには、何かのように見えます<script src>index.htmlが更新されたコードを指すように変更されました。

CloudFrontでは、パスを除外しているように見えますが、「/」を除いても正しく動作していないようです。コードを変更したところで奇妙な動作が発生しています。リフレッシュすると表示されますが、Chromeを終了して元に戻った場合、何らかの理由で古いコードが表示されます。

（CodeBuildを介して）すべてのコードリリースで無効化をトリガーする必要はありません。別の方法がありますか？私は挑戦の1つは、React Routerを使用するアプリなので、エラー文書をindex.htmlに設定して、403の代わりにHTTPステータス200を強制することでトリッキーな作業をしなければならないと思います。

Answer 1

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

あなたは長い有効期限の時間を設定し、手動でCloudFrontのキャッシュを無効にしたい場合は、あなたの無効化パス（あなたが言及しているようではない/）として*または/*を使用することができます。ただし、世界中のすべてのCloudFrontエッジノードがオリジナルの変更を反映するのに15分かかることがあります。