Быстрое и безопасное обслуживание фронтенда с помощью AWS CloudFront CDN

Современные фронтенды отличаются молниеносной скоростью и отзывчивостью. Более того, для их масштабного обслуживания требуются специализированные инструменты и платформы. Одной из таких платформ является AWS CloudFront, CDN (сеть доставки контента), обладающая широкими возможностями настройки.

Итак, в этой статье я расскажу вам о 6 лучших практиках оптимизации CloudFront для быстрого и безопасного обслуживания фронтенда. Давайте начнем.


1. Кэширование активов фронтенда с помощью CDN

AWS CloudFront CDN действует как посредник между вашим хостингом фронтенда и пользователями. С помощью CloudFront вы можете кэшировать HTML, CSS, JavaScript и изображения. Поскольку кэш находится ближе к пользователю, контент будет доставлен с минимальной задержкой.

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

И самое главное преимущество заключается в том, что AWS CloudFront изначально поддерживает интеграцию с Amazon S3, где вы можете размещать свои фронтенд-артефакты. Кроме того, вы можете разместить свой фронтенд где угодно и продолжать обслуживать его через AWS CloudFront.

Для получения более подробной информации обратитесь к статье AWS об использовании CloudFront для обслуживания статических веб-сайтов.


2. Использование аннулирования кэша при новых развертываниях

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

AWS CloudFront теперь поддерживает быстрое аннулирование кэша, позволяя вам мгновенно развертывать обновления для вашего SPA, сохраняя при этом преимущества CDN-кэширования.

Примечание: В качестве практики вы можете аннулировать только те файлы, которые изменяются в процессе развертывания. Например, если вы используете Webpack с конфигурацией по умолчанию, вам нужно будет аннулировать только index.html, поскольку каждый измененный JS и CSS будет иметь новые имена файлов.

Вы также можете использовать AWS Amplify для упрощения развертывания и кэширования недействительных файлов с помощью встроенных оптимизаций.


3. Используйте частные ведра S3 и идентификацию доступа Origin для обеспечения безопасности

Если вы используете ведро Amazon S3 в качестве источника для дистрибутива CloudFront, необходимо ограничить публичный доступ к S3.

Ограничение доступа не позволит кому-то обойти CloudFront и получить доступ к содержимому, которое вы хотите сохранить в безопасности, через URL Amazon S3.

Вы спросите, почему это имеет значение, ведь именно фронтенд-активы должны быть общедоступными? Причина в том, что обслуживание через AWS CloudFront предоставляет больше контроля, где вы можете установить правила Web Application Firewall (WAF) и другие ограничения на ваш контент для обеспечения безопасности.


4. Для URL без хэша используйте Lambda@Edge

Lambda@Edge позволяет перехватывать HTTP-запросы, проходящие через CloudFront. Эти функции выполняются в локации CloudFront Edge ближе к пользователю, что позволяет быстрее реагировать или действовать в отношении контента при его передаче.

Некоторые распространенные случаи использования Lamda@Edge следующие,

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

Если вам необходимо узнать больше о Lamda@Edge, вы можете изучить документацию, предоставленную AWS.

Примечание: Если вам нужны простые потребности, например, использование только Hashless URL, существует простой последующий подход. Поскольку цель состоит в том, чтобы обслуживать index.html, даже если пользователь напрямую переходит к маршруту, мы можем настроить обработку ошибок CloudFront на обслуживание index.html, если S3 возвращает ошибку «ресурс не найден» с кодом ошибки 404.


5. Использование сжатия (Brotli, Gzip)

Еще одна лучшая практика, которой я советую вам следовать, — это использование метода сжатия. С помощью AWS CloudFront вы можете обслуживать свои приложения, используя Brotli или GZip, и значительно снизить скорость загрузки контента.

Более быстрая загрузка, особенно для файлов JavaScript и CSS, может привести к более быстрому рендерингу вашего SPA.

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

Brotli — это широко используемый алгоритм сжатия без потерь, который часто превосходит Gzip по степени сжатия. По сравнению с Gzip, краевое сжатие Brotli в CloudFront приводит к уменьшению размера файлов до 24%.

Функции сжатия можно включить через CloudFront Console, SDK и CLI. Вам необходимо установить EnableAcceptEncodingGzip в true, чтобы возвращать объекты, сжатые Gzip, и EnableAcceptEncodingBrotli в true, чтобы возвращать объекты, сжатые Brotli. CloudFront будет использовать Brotli, если программа просмотра поддерживает оба формата.

Веб-браузеры Chrome и Firefox поддерживают сжатие Brotli только при отправке запроса по протоколу HTTPS. В этих браузерах Brotli не поддерживается при HTTP-запросах.

6. Использование версионных имен файлов

При выполнении нового развертывания вы можете либо аннулировать файлы, либо дать им версионные имена файлов, чтобы контролировать версии файлов, обслуживаемых вашим дистрибутивом. Если вы часто обновляете свои файлы, лучше всего использовать версионность файлов.

Версионирование позволяет лучше контролировать содержимое, которое обслуживает CloudFront. slider_v1.js, image_v1.jpg — вот некоторые примеры имен версий файлов, которые вы можете использовать.

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

Заключение

Независимо от того, насколько хорошо вы проектируете и разрабатываете приложения, пользователям будет менее интересно, если они будут работать плохо. Используя AWS CloudFront, вы можете решить большинство проблем производительности и безопасности, которые влияют на фронтенд вашего приложения.

Поэтому я приглашаю вас попробовать AWS CloudFront и следовать этим практикам для ускорения и обеспечения безопасности ваших фронтендов в масштабе.

Спасибо за прочтение!

Оцените статью
devanswers.ru
Добавить комментарий