Обновление приложения Angular на AWS S3 + Cloudfront

Question

Я развернул рабочее приложение Angular 9 на облачном сервере S3 +. Он работает очень хорошо, но каждый раз, когда я выпускаю новое обновление приложения, возникают проблемы. Я прочитал много статей:

• https://medium.com/@sumn2u / response -gressive-web-app-s3-and-cloudfront-6c890fa873fb
• https://medium.com/driven-by-code/on-the-importance-of-correct-headers-and-metadata-in-s3-origins-for-aws-cloudfront-50da2f9370ae

Я установил правильное кеширование для index. html и ngsw-worker. js, чтобы они не кешировались из cloudFront. Каждое развертывание Angular сохраняется на S3 в новой папке с номером сборки, например:

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

После этого я изменяю имя каталога CloudFront, чтобы указать на новое местоположение. К сожалению, это создает ряд проблем для клиентов, у которых есть предыдущая версия приложения. Фактически, если сервисный работник не получил обновление, когда пользователь загружает приложение, если пользователь загружает некоторую часть приложения, которая не была кэширована раньше, я получаю сообщение об ошибке загрузки фрагмента (потому что он больше не существует на S3 ).

Поэтому мне интересно, как лучше всего развернуть приложение Angular на AWS S3 + CloudFront. Должен ли я загружать все файлы в одну папку? Разве это не слишком неэффективно (очень скоро у меня будут тысячи файлов)? Любые подсказки приветствуются.

Answer 1

Вы можете сделать следующее:

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

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

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