Зачем это нужно?
Это может быть невероятно быстро, «без сервера» и очень недорого.Через глобальные конечные точки CloudFront (периферийные местоположения) приложение может работать очень быстро с высокой надежностью.Устанавливая источник источника, CloudFront может выступать в качестве обратного прокси-сервера для API, устраняя проблемы между регионами (CORS) и ускоряя вызовы API в удаленных местах.Несколько развертываний могут быть загружены в одну корзину S3.
Основные понятия
При развертывании приложения Create React на S3 / необходимо учитывать ряд концепций.CloudFront:
- Внешний интерфейс CloudFront - для настраиваемого домена трафик SSL будет проходить через CloudFront, а не через S3 (который не разрешает SSL с настраиваемым доменом)
- Один ко многим - одна корзина S3 может вместить множество развертываний (например, тестирование, производство).Я настроил каждое развертывание с выделенным дистрибутивом CloudFront, указывающим на тот же сегмент, но с другим префиксом (например, развертывания / тестирование, развертывания / производство)
- Можно избежать проблем междоменного API -Существует способ использовать CloudFront как для статических файлов в S3, так и для динамического API, все в одном домене (см. ниже)
- Сжатие - сжатие всегда должно быть включено в CloudFront
- Кэширование в браузере - Сборка CRA создаст файлы чанков с хеш-ключами.Они могут кэшироваться в браузере в течение длительного времени.Но файлы без ключей хеша, такие как
index.html, должны быть настроены на отсутствие кэширования.Эти атрибуты кэширования могут быть установлены с помощью S3.
Проблемы междоменного API (CORS) - как избежать
Каждый дистрибутив CloudFront может иметь несколько источников.Один источник должен быть установлен на S3, в то время как другой может быть установлен на сервер API или балансировщик нагрузки.Если сервер API находится в системе AWS, CloudFront может безопасно использовать не-SSL (порт 80) для связи в качестве прокси-сервера.
Чтобы использовать порт 80, сервер API должен быть настроен для ответа на незащищенный трафик (если трафик является только портом 80, сертификат SSL не требуется).Apache VirtualHost будет использовать имя хоста экземпляра CloudFront , а не имя хоста сервера API (например, my.react-app.com не my.api.com), поскольку значение хоста HTTP-запроса не изменено.
Чтобы включитьAPI с CloudFront:
- Добавьте ваш сервер API в качестве источника, HTTP только если в пределах AWS
- Добавьте новое поведение,
/api/* шаблон пути, политика просмотра только HTTPS, все HTTPметоды (если только у вас нет GET), ALL для Кэш на основе выбранных заголовков запроса , Сжатие объектов включено и Переслать все для строк запроса - Ничегодолжен быть кэширован CloudFront (если вы не можете это сделать)
Копирование на S3
Простой способ скопировать вашу систему сборки на S3 будет:
aws s3 sync . s3://MY-S3-BUCKET/ --quiet
Это довольно ограничено.Это не будет легко управлять кэшированием браузера.Старые файлы могут быть удалены (опция --delete) или сохранены (по умолчанию);конечно, этот инструмент не зависит от того, какие файлы CRA следует поддерживать для более старых версий, поэтому сборка мусора будет затруднена.
Инструмент Python для развертывания CRA в S3 / CloudFront
Я создал Python Tool , который будет:
- загружать любые новые файлы в S3, проверяя Etag в MD5
- , удалять любыестарые файлы
- дополнительно могут поддерживать старые файлы, которые были частью более ранних сборок (загрузка и анализ старых файлов
precache-manifest) - установить параметры кэширования HTTP для различных файлов (то есть файлы кэша с ключами хеш-функции,нет кэша для обычных файлов)
- очистить дистрибутив CloudFront (т. е. запрос на аннулирование)
Даже если вы его не используете, это может помочь вам в вашей системе развертывания.
Включение маршрутизатора React в CloudFront
Чтобы включить разные пути в React Router, установите для страницы ошибки CloudFront значение /index.html (чтобы все неудавшиеся запросы попадали туда):
- Перейти кРаспределения CloudFront в консоли AWS
- Щелкните соответствующий дистрибутив CloudFront
- Перейдите на вкладку Страницы ошибок
- Добавьте ответы об ошибках для
403: Forbidden и 404: Not Found, указывающих /index.htmlс HTTP-ответом 200
Тестирование заголовков HTTP
Вы можете просмотреть этот заголовок HTTP, если ваша корзина S3 настроена для статического хостинга веб-сайтов (примечание S3хостинг веб-сайта не требуется для работы CloudFront):
curl -I http://MY-S3-ENDPOINT/index.html
Аналогично, вы можете проверить заголовок из CloudFront:
curl -I https://CLOUDFRONT-URL/index.html
Чтобы проверить сжатие, добавьте принятие кодировки в заголовок HTTP запроса, например,
curl -H "Accept-Encoding: gzip" -I https://CLOUDFRONT-URL/index.html