63 votes

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

J'ai une Réagir application hébergée sur un compartiment S3. Le code est minimisé à l'aide de yarn build (c'est créer-réagir-application, en fonction de l'app). L' build le dossier ressemble à quelque chose comme:

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 plus jamais index.html à être mis en cache, parce que si je mettre à jour le code (provoquant l'hex suffixe main.*.js de mise à jour), j'ai besoin de l'utilisateur d'une prochaine visite à revenir sur l' <script src> variation en index.html de point pour la mise à jour du code.

Dans CloudFront, je ne peux que semblent exclure des chemins, et à l'exclusion "/" ne semble pas fonctionner correctement. Je suis arriver comportement étrange où je changer le code, et si j'ai cliquer sur "actualiser", je le vois, mais si je quitte Chrome et revenir en arrière, je vois très désuet code pour une raison quelconque.

Je ne veux pas déclencher une invalidation pour tous les communiqué de code (via CodeBuild). Est-il un autre moyen? Je pense que l'un des défis est que puisque c'est une application à l'aide de Réagir Routeur, je vais devoir faire une ruse que par la mise en au document d'erreur de index.html et en forçant un statut HTTP 200 au lieu de 403.

59voto

seza443 Points 448

Une solution basée sur la configuration CloudFront:

Accédez à votre distribution CloudFront, sous l'onglet "Comportement" et créez un nouveau comportement. Spécifiez les valeurs suivantes:

  • Modèle de chemin: index.html
  • Mise en cache d'objets: personnaliser
  • TTL maximum: 0 (ou une autre très petite valeur)
  • TTL par défaut: 0 (ou une autre très petite valeur)

Enregistrez cette configuration.

CloudFront ne cache plus index.html .

48voto

Luke Peterson Points 1639

Si vous ne souhaitez index.html à être mis en cache, jeu de l' Cache-Control: max-age=0 - tête sur ce fichier uniquement. CloudFront faire une demande de retour à votre point de départ S3 seau sur chaque demande, mais il semble que c'est le comportement désiré.

Si vous êtes désireux de définir plus le temps d'expiration et d'invalider la CloudFront cache manuellement, vous pouvez utiliser un * ou /* que votre invalidation chemin (pas / comme vous l'avez mentionné). Cela peut prendre jusqu'à 15 minutes pour tous les CloudFront nœuds de bordure autour du monde afin de refléter les changements dans votre origine, cependant.

25voto

chadhamre Points 76

Voici la commande que j'ai exécutée pour définir le contrôle du cache sur mon fichier index.html après avoir chargé de nouveaux fichiers sur s3 et invalidé Cloudfront:

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X