Почему мне нужно очистить кеш, чтобы увидеть актуальные модули в моем приложении Angular?

#angular #caching #amazon-cloudfront #cache-control

#angular #кэширование #amazon-cloudfront #управление кэшем

Вопрос:

У нас есть приложение Angular 10, которое каждый раз, когда мы выполняем развертывание в AWS или даже в среде разработки (через ngnix), нам нужно очищать кеш (CTRL F5, это решаемая задача). Мы попробовали в проекте Angular следующие мета-теги:

 <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, precheck=0">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">  

Еще одна идея, которую мы пробовали, — это чередование имен файлов путем развертывания. Один раз выполняется без хэша, а в следующий раз — с хэшем. Для примера:

 6-es5.js -> changes to -> 6-es5.b0d27b410e5c019afd47.js
  

В AWS S3 (через Amazon Cloudfront) мы попытались настроить

 Minimum TTL 0
Maximum TTL 0
Default TTL 0
  

На данный момент мы не знаем, какие еще идеи могут быть возможны или что мы делаем неправильно. Любые идеи были бы полезны. Спасибо, ребята!

ОБНОВИТЬ РЕДАКТИРОВАТЬ:

Метатеги не были добавлены, как я сказал, во всех компонентах. Мы уже добавили его в index.html (мы пропустили включение их в этот файл), и теперь он работает как ожидалось, но мы не уверены, что это просто временное решение на данный момент.

Ответ №1:

Вы можете выполнить следующие шаги :

  1. Непосредственно разверните папку сборки в корзину S3.
  2. Не требуется кэшировать index.html файл
  3. Всякий раз, когда вы развертываете или загружаете сборку в S3, выполните следующий шаг
  4. Перейдите в cloudfront
  5. Сделать недействительными объекты
  6. Создать запись /*

введите описание изображения здесь

Сценарий развертывания

Для непрерывного развертывания вы можете написать скрипт с помощью boto3 aws для автоматического аннулирования кэширования после успешной загрузки папки.