Сервис Amazon S3 незаменим для многих разработчиков, когда им нужен дешевый и мощный статический хостинг. S3 существует уже некоторое время, и Amazon хорошо поработал, поддерживая актуальность и простоту использования интерфейса. Однако если вы хотите сжать свои статические JS и CSS при хостинге на S3, неясно, как это сделать, и результаты часто вызывают и другие службы хостинга AWS. Вот быстрый и простой способ использовать сжатые файлы JS и CSS из AWS S3.
Запуск в файловой системе
Поскольку в S3 нет излишеств и он очень доступен, некоторые основы, такие как сжатие с помощью сжатия, требуют немного больше работы, чем многие конфигурации сервера по умолчанию, которые сжимают ваши файлы на лету. В нашем случае S3 нуждается в сжатии этих файлов перед их загрузкой, он не может выполнить сжатие за нас. Это делается с помощью простой команды, которую я рекомендую добавить в качестве сценария на этапе сборки или в процесс непрерывной интеграции.
gzip -9 /path/file.css
or
gzip -9 /path/file.js
Вот и все! ⚡️ -9 просто означает, что нам нужен самый высокий уровень сжатия. Теперь у нас есть сжатые файлы, и их нужно загрузить в S3.
Загрузка в S3
Идите вперед, перейдите на панель загрузки S3 и выберите «Добавить файлы». (⚠️ Возможно, вам придется удалить окончание .gz из сжатых файлов перед загрузкой.)
⚠️За один раз загружайте файлы только одного типа (CSS или JS), так как это имеет значение для нашего следующего шага. Выберите файлы и нажмите «Далее».
Установка разрешений и метаданных
Здесь вы выберете Разрешения. Поскольку они обслуживаются пользователем, обязательно предоставьте общий доступ для чтения к файлам.
Снова нажмите «Далее», чтобы перейти к экрану «Свойства». Здесь вы можете выбрать, какой класс шифрования и хранения вы используете. Внизу находится то место, где мы хотим внести наши изменения, где написано «Метаданные».
Сначала мы установим Content Type. Это будет либо text/css, либо text/javascript в зависимости от файла. Введите значение и нажмите «Сохранить». Что еще более важно, здесь мы сообщаем S3, что наш файл был заархивирован. Выбираем вариант Content Encoding (видите, не все так очевидно). В качестве значения введите gzip. Введите любые другие поля метаданных, которые вы хотите для файла. Нажмите «Сохранить», и готовые поля должны выглядеть следующим образом:
Вуаля!
Нажмите «Далее», проверьте свои настройки на экране подтверждения и нажмите «Загрузить». Все сделано! 🎉 Ваша страница теперь должна работать как раньше, но намного быстрее и тоньше. Надеюсь, это поможет, комментируйте любые вопросы!
