Cloudfront кэширует страницы веб-сайта react, несмотря на использование управления версиями файлов

#amazon-s3 #amazon-cloudfront #browser-cache

#amazon-s3 #amazon-cloudfront #браузер-кэш

Вопрос:

Итак, чтобы объяснить проблему, у меня есть статический веб-сайт, размещенный на s3, и CloudFront в качестве CDN. Я использовал create-react-app (CRA) для создания пакета react для моего веб-сайта. CRA по умолчанию выполняет управление версиями файлов сборки webpack, и версии также видны в корзине s3. Тем не менее, когда я выполняю развертывание, последние изменения не появляются (я ждал даже день, надеясь, что это произойдет). Я не уверен, что вызывает эту проблему. Кто-нибудь может, пожалуйста, помочь.

Я добавил скриншоты моей вкладки поведения cloudfront и файлов корзины s3, имеющих версии сборки.

PS, если это касается кэша браузера, как я могу отключить его, чтобы мои клиенты всегда видели самую последнюю версию моего веб-сайта.

Снимок экрана с поведением облачного интерфейса

Файлы с версиями S3

Комментарии:

1. Вы уверены, что ваш HTML-код не кэшируется, насколько я вижу, это все уникальные объекты, поэтому новые объекты не должны кэшироваться

2. @ChrisWilliams Но мои компоненты react отображают html. Возможно ли, что отображаемый HTML-код также может быть кэширован?

3. По-прежнему будет страница, которая вызывает библиотеки react или включает в себя, это то, что потенциально будет кэшироваться. Если вы проверите ответ вашей страницы, у нее будут заголовки кэша, включая максимальный возраст. Они будут кэшироваться в браузере пользователя, если они установлены

4. @ChrisWilliams Можете ли вы помочь мне с тем, как найти «ответ страницы» и заголовки кэша. Я не настраивал какие-либо заголовки для отправки с s3 и использую кэширование пользовательских объектов (как показано на первом рисунке)

5. В вашем браузере вы должны иметь возможность проверять сетевой трафик, например, в chrome: developers.google.com/web/tools/chrome-devtools/network .

Ответ №1:

Привет, вы должны аннулировать кэш на вкладке настроек распространения. В идеале я делаю недействительным весь кэш, передавая / * или вы также можете указать папку или файл, чтобы очистить кэширование. пример: /index.html

Даже в строке пулов CI / CD вы можете попросить deploy agent аннулировать кэш, передав идентификатор дистрибутива и путь