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

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

В этом блоге я предполагаю, что вы уже знаете, как развернуть приложение angular на AWS S3 и Cloudfront. Кроме того, вы используете angular-cli.

Создать производственную сборку

Чтобы развернуть любое приложение Angular / Reactjs или Vuejs, нам необходимо сгенерировать сборку. Если вы используете angular-CLI, убедитесь, что вы создаете производственную сборку.

ng build --prod

Это установит ряд флагов, включая - output-hashing = all, который требуется для создания файлов сборки с уникальными хешами. Результат вашей сборки будет выглядеть так.

chunk {0} runtime.a5b5fc6b303bf4f57659.js (runtime) 2.48 kB [entry] [rendered]
chunk {1} 1.3eaffe77af2f5cf5cc60.js () 34.8 kB [rendered]
chunk {2} 2.54d0561213a13f87c70f.js () 46.7 kB [rendered]
chunk {3} main.4cd54d2a590c84799c74.js (main) 1.65 MB [initial] [rendered]
chunk {4} polyfills.cc0f1f379c61ac8668fe.js (polyfills) 45.5 kB [initial] [rendered]
chunk {5} polyfills-es5.fff1babb6b2975155bf2.js (polyfills-es5) 125 kB [initial] [rendered]
chunk {6} styles.cf3925058aa87715475d.css (styles) 9.13 kB [initial] [rendered]
chunk {7} 7.e18d700696420270428d.js () 1.43 kB [rendered]
chunk {8} 8.3ab11e7762b9eb57c76d.js () 70.3 kB [rendered]
chunk {9} 9.8cee7738482c27030a64.js () 9.49 kB [rendered]
chunk {10} 10.556452c0206871534497.js () 1.49 kB [rendered]
chunk {11} 11.a8474834281dac537636.js () 1.98 kB [rendered]
chunk {12} 12.b6b6e88016581aed72cb.js () 68.4 kB [rendered]
chunk {13} 13.e3cd5edabd462e8a6eee.js () 41.8 kB [rendered]
chunk {14} 14.7648624922bf971c0c67.js () 2.17 kB [rendered]
chunk {15} 15.8583c1e99a953a50803c.js () 1.42 kB [rendered]

Обратите внимание, что в нашей папке dist все файлы имеют уникальные хэши в именах, кроме одного файла, index.html.

Теперь, чтобы развернуть эту сборку, мы обычно загружаем папку dist в корзину s3, а затем создаем распространение в CloudFront и устанавливаем источник, указывающий на нашу корзину s3.

Всякий раз, когда кто-то посещает ваш веб-сайт, запрос отправляется в CDN, и, поскольку мы развернули новую сборку с новым именем файла, для этих файлов в CDN будет пропущен кеш, и они будут извлечены из корзины s3 origin. Но это будет попадание в кеш на стороне CDN для index.html. Таким образом, это не будет получено из вашей исходной корзины s3. Таким образом, ваши пользователи не смогут увидеть последнюю обновленную версию вашего приложения.

Создайте поведение в вашем распределении CloudFront

Нам нужно создать поведение, чтобы сообщить CloudFront, что он никогда не должен кэшировать index.html.

Установите минимальный TTL, максимальный TTL и TTL по умолчанию равным 0. Проверьте снимок экрана конфигурации ниже.

Итак, таким образом мы справились с перебором кеша на стороне CloudFront. Но все же нам нужно очистить кеш в браузере пользователя.

Обновите Index.html

Добавьте метатег с информацией об управлении кешем в index.html

<meta http-equiv=”Cache-Control” content=”no-cache, no-store, must-revalidate” />
<meta http-equiv=”Pragma” content=”no-cache” />
<meta http-equiv=”Expires” content=”0" />

Это гарантирует, что index.html никогда не кэшируется в браузере пользователя. Так что теперь, когда мы выпускаем релиз, пользователи будут получать только последнюю версию.

Вот и все. Спасибо за чтение.