Кэш браузера не загружает новую версию одностраничного приложения ReactJS в Cloudfront - PullRequest
Новая
       14

Кэш браузера не загружает новую версию одностраничного приложения ReactJS в Cloudfront

0 голосов
/ 19 октября 2018

Каждый раз, когда мы внедряем новую версию SPA в корзину S3 с дистрибутивом Cloudfront, мы вынуждены вручную заставлять наши браузеры очищать кэш и перезагружать.

index.html не имеет установленного кэша, как показано ниже

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

И Cloudfront настроен на использование Origin Cache Headers

Ответы [ 3 ]

0 голосов
/ 01 марта 2019

Поскольку Cloudfront использует метаданные объекта S3, я бы рекомендовал делать это через интерфейс / клиент amazon вместо того, чтобы задавать его внутри html-файла, как вы это сделали.

Вы можете сделать это вручную, перейдя в корзину.в S3 и щелкнув раздел свойств вашего файла «index.html» и

установите ключ «Cache-control» в значение «max-age: 0, must-revalidate»

Я бы порекомендовал «max-age: 0, must-revalidate» вместо «no-cache», так как я обнаружил, что браузеры иногда не уважают заголовок no-cache.Однако это очень личное мнение, поэтому если вы знаете, что делаете с no-cache, вы можете продолжать делать это с помощью настроек метаданных объекта aws.

Я также могу рекомендовать использовать aws-cli после развертыванияс помощью этой команды отреагируйте на приложение S3, чтобы автоматизировать процесс.Команда ниже заменяет index.html на себя, включая заголовок управления кэшем: 

aws s3 cp s3://BUCKET_NAME/index.html s3://BUCKET_NAME/index.html --cache-control \"max-age=0, must-revalidate\" --metadata-directive REPLACE --acl public-read
0 голосов
/ 05 марта 2019

Также проверьте, правильно ли настроены ваши TTL в поведении Cache.если Min TTL настроен на другое значение, чем 0, он имеет предпочтение.https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html

Попробуйте Cache-control: no-store для index.html, если вы вообще не хотите кэшировать в CloudFront для этого конкретного index.html.

0 голосов
/ 19 октября 2018

Лучшее решение состоит в том, чтобы позволить cloudfront обрабатывать кэширование и делать его недействительным после развертывания: 

$ aws cloudfront create-invalidation --distribution-id YOUR_CF_DISTRIBUTION_ID --paths "/*"
$ aws cloudfront create-invalidation --distribution-id YOUR_WWW_CF_DISTRIBUTION_ID --paths "/*"

invalidate-the-cloudfront-cache

...