Comment faire CloudFront ne cache jamais index.html sur le compartiment S3

Question

J'ai une application React hébergée sur un compartiment S3. Le code est réduit à l'aide de yarn build (il s'agit d'une application basée sur create-react-app). Le dossier build ressemble à:

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 

Je ne veux index.html être mis en cache, parce que si je mets à jour le code (ce qui provoque le suffixe hexagonal dans main.*.js mise à jour), je dois la prochaine visite de l'utilisateur de revenir sur la <script src> modifiez index.html pour pointer vers le code mis à jour. Dans CloudFront, je peux seulement sembler exclure des chemins, et exclure "/" ne semble pas fonctionner correctement. Je reçois un comportement étrange où je change le code, et si je frappe l'actualisation, je le vois, mais si je quitte Chrome et reviens, je vois le code très obsolète pour une raison quelconque.

Je ne veux pas avoir à déclencher une invalidation sur chaque version de code (via CodeBuild). Y a-t-il un autre moyen? Je pense que l'un des défis est que, comme il s'agit d'une application utilisant React Router, je dois faire un truc en réglant le document d'erreur à index.html et en forçant un statut HTTP 200 au lieu de 403.

Answer 1

Si vous ne voulez jamais index.html pour être mis en cache, définissez l'en-tête Cache-Control: max-age=0 sur ce fichier uniquement. CloudFront fera une demande de retour à votre origine S3 seau sur chaque demande, mais il semble que ce soit le comportement souhaité.

Si vous êtes désireux de mettre plus temps d'expiration et invalider le cache CloudFront manuellement, vous pouvez utiliser un * ou /* comme chemin de infirmation (non / comme vous l'avez mentionné). Cela peut prendre jusqu'à 15 minutes pour tous les nœuds périphériques CloudFront à travers le monde pour refléter les changements de votre origine.