Контрольный список статического сжатия ресурсов S3
Выполните этот пошаговый контрольный список, чтобы настроить корзину AWS S3 и дистрибутив CloudFront для правильной обработки предварительно сжатых статических ресурсов GZIP и Brotli. Контрольный список статического сжатия ресурсов S3 охватывает политику корзины, загрузку предварительно сжатых файлов с правильными метаданными кодирования контента, политику кэширования CloudFront, переменные заголовки и команды проверки — каждая из них включает готовые для копирования фрагменты AWS CLI и Terraform. Весь контент работает в вашем браузере — регистрация не требуется.
Enable public read access (or use CloudFront OAC)
For public static sites, configure the bucket policy to allow s3:GetObject. For private assets served via CloudFront, use Origin Access Control (OAC) instead of public access.
Enable static website hosting (if serving directly from S3)
Go to S3 → Bucket → Properties → Static website hosting → Enable. Set index.html as the index document. Skip this step if you are serving exclusively through CloudFront.
Configure CORS for font and API assets (if needed)
If your S3 bucket serves fonts or JSON assets loaded cross-origin, add a CORS configuration to allow the correct origins.
Upload pre-compressed .gz files alongside originals
Pre-compress your static assets at build time and upload both the original and .gz version. S3 does not compress on-the-fly - you must upload pre-compressed files.
Upload pre-compressed .br files for Brotli support
Upload Brotli-compressed versions of your assets. CloudFront can serve .br files to clients that send Accept-Encoding: br.
Set correct Content-Type on all uploaded files
S3 must serve the correct Content-Type for each asset - not the MIME type of the compressed wrapper. Set Content-Type to the original file type (e.g. application/javascript for .js.gz).
Set Cache-Control headers on uploaded assets
Set long-lived Cache-Control headers on versioned/hashed assets and short-lived headers on index.html and other non-versioned files.
Create a CloudFront distribution with S3 as origin
Create a CloudFront distribution pointing to your S3 bucket. Use the S3 REST endpoint (not the website endpoint) for OAC support and better performance.
Enable CloudFront automatic compression
In CloudFront → Behaviors → Edit → Compress objects automatically → Yes. This enables CloudFront to compress responses on-the-fly for objects not already compressed. For pre-compressed assets, CloudFront will pass through the Content-Encoding header.
Configure cache policy to forward Accept-Encoding
Create a CloudFront cache policy that includes Accept-Encoding in the cache key. This ensures CloudFront caches separate versions for GZIP, Brotli, and uncompressed responses.
Enforce HTTPS with redirect-to-https viewer protocol policy
Set the viewer protocol policy to "Redirect HTTP to HTTPS" to ensure all traffic is encrypted. This is required for Brotli - browsers only send Accept-Encoding: br over HTTPS.
Add Vary: Accept-Encoding response header
Configure a CloudFront response headers policy to add Vary: Accept-Encoding. This tells downstream caches (browsers, CDN edge nodes) to cache separate versions for different encodings.
Add security headers via CloudFront response headers policy
Use a CloudFront managed response headers policy (SecurityHeadersPolicy) or create a custom one with X-Content-Type-Options, X-Frame-Options, and Strict-Transport-Security.
Verify GZIP compression is working
Use curl to confirm CloudFront is serving GZIP-compressed responses with the correct Content-Encoding header.
Verify Brotli compression is working
Confirm CloudFront serves Brotli-compressed responses when the client sends Accept-Encoding: br.
Verify CloudFront cache hit ratio
Check the X-Cache response header to confirm CloudFront is caching compressed responses. "Hit from cloudfront" means the response was served from cache.
Measure actual transfer size savings
Use curl with --compressed to measure the actual transfer size vs the uncompressed size and confirm the expected savings.
Quick Reference: S3 + CloudFront Compression Architecture
Browser │ Accept-Encoding: gzip, br ▼ CloudFront Edge │ Checks cache key (includes Accept-Encoding) │ Cache HIT → serve cached compressed response │ Cache MISS → forward to S3 origin ▼ S3 Origin │ Returns pre-compressed file (app.js with Content-Encoding: gzip) │ OR returns uncompressed file (CloudFront compresses on-the-fly) ▼ CloudFront Edge │ Caches response keyed by Accept-Encoding │ Adds Vary: Accept-Encoding header ▼ Browser │ Decompresses response transparently └ Renders page
Зачем использовать наш контрольный список статического сжатия ресурсов S3?
- Полная настройка сжатия S3 в одном месте. Контрольный список статического сжатия ресурсов S3 охватывает каждый шаг — политику сегмента, загрузку предварительно сжатых файлов, настройку CloudFront, переменные заголовки и команды проверки — так что вы не пропустите ни одного важного шага, который нарушает сжатие.
- Контрольный список безопасного сжатия S3 онлайн: все содержимое контрольного списка полностью создается в вашем браузере. Никакие учетные данные AWS, имена сегментов или имена доменов не отправляются ни на один сервер — это безопасно для планирования производственных конфигураций сжатия S3 и CloudFront.
- Фрагменты конфигурации для каждого шага. Каждый элемент контрольного списка включает готовый к копированию фрагмент конфигурации — команды AWS CLI, ресурсы Terraform, политики сегментов и команды проверки скручивания — так что вы можете немедленно реализовать каждый шаг.
- 100 % бесплатно навсегда: контрольный список статического сжатия ресурсов S3 абсолютно бесплатен, не требует регистрации, премиум-уровня, ограничений и рекламы. Используйте его столько раз, сколько вам нужно, навсегда.
Почему сжатие S3 требует предварительного сжатия
В отличие от Nginx или Apache, Amazon S3 не сжимает ответы «на лету». S3 — это служба хранения объектов: она обслуживает файлы в том виде, в каком они были загружены. Чтобы использовать сжатые ресурсы из S3, вы должны предварительно сжать файлы во время сборки и загрузить как исходную, так и сжатую версии с правильными метаданными Content-Encoding. Наш контрольный список статического сжатия ресурсов S3 проведет вас через каждый этап этого процесса: от настройки корзины до настройки и проверки политики кэширования CloudFront.
Как работает контрольный список сжатия S3
- Работайте с каждой категорией. Контрольный список разделен на пять категорий: настройка корзины S3, загрузка предварительно сжатых файлов, конфигурация CloudFront, заголовки ответов и проверка. Щелкните каждый элемент, чтобы развернуть фрагменты конфигурации и предупреждения.
- Отметьте завершенные шаги: щелкните значок кружка рядом с каждым элементом, чтобы отметить его как завершенный. Индикатор выполнения отслеживает общее выполнение всех пунктов контрольного списка.
- Копирование и развертывание. Каждый элемент включает готовую к копированию команду AWS CLI, ресурс Terraform или команду проверки скручивания — нажмите «Копировать», чтобы немедленно использовать ее в своем терминале или конвейере.
Что включает в себя контрольный список
- Настройка сегмента S3: политика сегмента для публичного чтения или CloudFront OAC, статический хостинг веб-сайтов и конфигурация CORS для шрифтов из разных источников и ресурсов API.
- Загрузка предварительно сжатых файлов: как загрузить файлы.gz и.br с правильными метаданными Content-Encoding, Content-Type и Cache-Control с помощью AWS CLI.
- Конфигурация CloudFront: настройка распространения, автоматическое сжатие, политика кэширования с Accept-Encoding в ключе кэша и принудительное использование HTTPS.
- Проверка: команды скручивания для подтверждения работы GZIP и Brotli, проверка коэффициента попадания в кэш и измерение размера передачи.
S3 + CloudFront против сжатия «на лету»
Предварительное сжатие + S3 более эффективно, чем сжатие «на лету» для статических ресурсов — затраты ЦП на сжатие оплачиваются один раз во время сборки, а не при каждом запросе. CloudFront также может «на лету» сжимать ответы для еще не сжатых объектов (объекты размером ≥1000 байт), но предварительное сжатие обеспечивает максимальные уровни сжатия (уровень GZIP 9, качество Brotli 11), которые не используются при сжатии «на лету» CloudFront. Для достижения наилучшей производительности предварительно сожмите свои ресурсы и загрузите их в S3 с правильными метаданными — CloudFront будет прозрачно передавать заголовок Content-Encoding.
Часто задаваемые вопросы
Контрольный список сжатия статических ресурсов S3 — это пошаговое руководство по настройке AWS S3 и CloudFront для правильной обработки предварительно сжатых статических ресурсов GZIP и Brotli. Он охватывает политику сегментов, загрузку предварительно сжатых файлов с правильными метаданными, политику кэширования CloudFront, переменные заголовки и команды проверки.
Нет. Amazon S3 — это служба объектного хранения, которая хранит файлы в том виде, в каком они были загружены. Чтобы использовать сжатые ресурсы из S3, вы должны предварительно сжать файлы во время сборки и загрузить их с правильными метаданными Content-Encoding. CloudFront может сжимать ответы для несжатых объектов на лету, но предварительное сжатие обеспечивает лучшую степень сжатия.
Да. Контрольный список статического сжатия ресурсов S3 на 100 % бесплатен, не требует регистрации, подписки, ограничений и рекламы. Все содержимое контрольного списка генерируется в вашем браузере — никакие учетные данные AWS или данные конфигурации не отправляются ни на один сервер.
Загрузите сжатый файл, используя исходное имя файла (например, app.js, а не app.js.gz), и установите Content-Encoding: gzip и Content-Type: application/javascript. Это говорит браузерам о прозрачной распаковке ответа. Если вы загрузите файл как app.js.gz без Content-Encoding, браузеры загрузят его как двоичный файл.
Включите «Автоматическое сжатие объектов» в настройках поведения CloudFront и создайте политику кэширования с параметром EnableAcceptEncodingBrotli: true. CloudFront будет обслуживать Brotli клиентам, которые отправляют Accept-Encoding: br. Примечание. Brotli согласовывается только через HTTPS.
Без Accept-Encoding в ключе кэша CloudFront кэширует только одну версию каждого объекта. Если сжатый ответ кэшируется и передается клиенту, не поддерживающему GZIP, браузер получает поврежденный контент. Включение Accept-Encoding в ключ кэша гарантирует, что CloudFront кэширует отдельные версии для каждой кодировки.
Сжатие CloudFront «на лету» использует GZIP уровня 6 и сжимает только объекты размером ≥1000 байт. Предварительное сжатие использует максимальные уровни (уровень GZIP 9, качество Brotli 11) и загружает сжатые файлы в S3. Предварительное сжатие более эффективно для статических ресурсов, поскольку затраты на ЦП оплачиваются один раз во время сборки.
Запустите: `curl -H "Accept-Encoding: gzip" -I https://ВАШ-CLOUDFRONT-DOMAIN/app.js` и найдите `Content-Encoding: gzip`. Для Бротли: `curl -H "Accept-Encoding: br" -I https://YOUR-CLOUDFRONT-DOMAIN/app.js` и найдите `Content-Encoding: br`.
Используйте конечную точку REST S3 с CloudFront Origin Access Control (OAC). Конечная точка веб-сайта S3 не поддерживает OAC, требует доступа к общедоступной корзине и не поддерживает HTTPS от CloudFront до S3. Конечная точка REST с OAC более безопасна и поддерживает все функции CloudFront.