Инструмент React CLI, create-react-app
, помогает разработчикам интерфейсов наконец сосредоточиться на создании приложений, а не на их настройке. Прошли те времена, когда мы перебирали десятки шаблонных и стартовых приложений, чтобы начать работу. За скромную цену принятия некоторых самоуверенных (но разумных) настроек конфигурации вы отправляетесь в гонку.
После того, как вы запустили новое приложение, npm run build
оптимизирует, скомпилирует и сбросит статические файлы, необходимые для обслуживания вашего приложения, в build
каталог. На этом этапе вы можете разместить содержимое этого каталога где угодно - и вуаля, ваше приложение размещено в Интернете. Обратите внимание: если ваше приложение зависит от клиентского сервера, такого как Express, эта статья, к сожалению, не для вас.
В документации create-react-app
есть ряд полезных советов по развертыванию вашего приложения с помощью различных инструментов: Github Pages, Heroku, Surge и так далее. Мы рассмотрим, как выполнить развертывание в S3 и CloudFront на AWS.
Быстро - зачем развертывать статически? Я вижу две очевидные победы:
- Легкость. Для развертывания статических файлов требуется гораздо меньше движущихся частей, чем для приложения с сервером. Меньше настраивать и меньше обслуживать.
- Стоимость. Из-за того, что нужно меньше настраивать и поддерживать, стоимость развертывания статического приложения может быть значительно дешевле.
Хорошо, давай перейдем к нему.
Развернуть на S3
Корзины Amazon S3 - популярный вариант для хранения статических ресурсов. Один из наиболее распространенных вариантов использования S3 - это хранение изображений для отображения в Интернете или мобильном приложении. Однако ничто не мешает вам хранить статические ресурсы в корзине S3, поэтому мы будем использовать их для хранения и отображения наших HTML, CSS, JavaScript и любых других ресурсов, необходимых для нашего приложения.
- Создайте учетную запись или войдите в Консоль AWS: https://aws.amazon.com/
- Перейдите к службе S3 и щелкните
Create Bucket
. Придумайте умное имя для своего нового ведра и выберите параметры конфигурации. - На шаге
Set Permissions
отмените выбор параметров для блокировки общего доступа - вы хотите, чтобы пользователи имели доступ к ресурсам веб-сайта, которые будут здесь размещаться, - затем создайте корзину.
- Щелкните по вновь созданному ведру. В
Properties
откройте вкладкуStatic Website Hosting
и выберитеUse this bucket to host a website
. Заполнитеindex.html
как индексный документ, так и документ об ошибках. Установивindex.html
в качестве документа об ошибке, мы можем позволить чему-то вродеreact-router
обрабатывать маршруты вне корня.
- Откройте вкладку
Permissions
, затем выберитеBucket Policy
. Вы можете выбрать здесь что-то более тонкое, но хорошей отправной точкой является предоставление разрешений только на чтение для анонимных пользователей - политика, представленная в Примеры AWS. Убедитесь, что это ваше имя корзины под ключом"Resource"
.
- Добавьте в это ведро содержимое вашего каталога
build
. Это можно сделать, щелкнув ведро и нажавUpload
. Вот и все! Вы можете найти URL-адрес своего приложения на вкладкеStatic Website Hosting
, помеченнойEndpoint
.
Бонус: развертывание с помощью AWS CLI
Вы можете упростить процесс развертывания с помощью Интерфейса командной строки AWS. Например, вы можете написать сценарий npm для запуска тестов, сборки приложения и отправки в корзину S3. Вкратце:
- Установите AWS CLI.
- Создайте пользователя с учетными данными безопасности в IAM. Избегайте предоставления большего количества разрешений, чем необходимо.
- Настройте интерфейс командной строки с помощью
aws configure
. Например:
AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Default region name [None]: us-west-2
Default output format [None]: json
- Создайте сегмент (если вы еще этого не сделали) и разверните приложение:
// create a bucket $ aws s3 mb s3://your-bucket-name // list buckets $ aws s3 ls // build and deploy the app $ npm run build && aws s3 sync build/ s3://your-bucket-name
Приведенный выше сценарий развертывания настолько прост, насколько это возможно. Он берет содержимое каталога сборки (созданного npm run build
) и заменяет все, что в настоящее время находится в вашей корзине, этим содержимым. Для немного более надежного конвейера развертывания вы можете предпочесть сохранить предыдущее состояние приложения в другом каталоге. Затем вы можете написать сценарий для возврата к предыдущему состоянию, если вам нужно.
Другие полезные команды интерфейса командной строки можно найти здесь.
Примечание: на момент написания существует ошибка, которая не позволяет версиям Internet Explorer использовать конфигурацию Error Document с приложениями, созданными с помощью
create-react-app
. Один из способов решения этой проблемы - использовать CloudFront.
Развернуть в CloudFront
Если он работает на S3, зачем беспокоиться о CloudFront?
CloudFront - это сервис сети доставки контента (CDN), предлагаемый AWS. Сети CDN оптимизируют скорость, перемещая ваш контент в периферийные местоположения, что делает его доступным по всему миру. Если ваши пользователи только местные, производительность, предлагаемая S3, может быть хорошей.
- Выберите службу
CloudFront
в консоли AWS, щелкнитеCreate Distribution
, затем вweb
способе доставки щелкнитеGet Started
. - Выберите настройки Origin. Варианты
Origin Domain Name
предварительно заполняются корзинами S3. Выбор вашего также приведет к заполнениюOrigin ID
.
- В
Distribution Settings
установитеDefault Root Object
наindex.html
.
- Вы можете выбрать дальнейшую настройку распределения, но этого достаточно для выполнения работы. Выберите
Create Distribution
. - Щелкните идентификатор вновь созданного дистрибутива, чтобы перейти на страницу его настроек, затем щелкните вкладку
Error Pages
. ВыберитеCreate Custom Error Response
. - Выберите
Yes
для настраиваемого ответа об ошибке, set/index.html
для пути к странице ответа и200: OK
для кода ответа. Эта настраиваемая страница ошибок в дистрибутиве CloudFront аналогична документу об ошибках в корзине S3 (и также будет работать в IE). Когда закончите, нажмитеCreate
.
- Вот и все! Дайте развертыванию несколько минут, а затем проверьте свое веб-приложение. Вы можете найти URL-адрес на странице списков рассылки в столбце
Domain Name
.
Заключение
Как уже упоминалось, вы можете настроить бесчисленное количество других параметров, настроить CNAME в CloudFront или использовать Route 53 для службы DNS. (Обновление: некоторые из этих подробностей можно найти в этом посте.) В любом случае, выбор, сделанный в create-react-app
, предполагает, что статические развертывания являются предпочтительной практикой для приложений React и здесь, чтобы остаться. Вы предпочитаете настраивать что-нибудь по-другому? Расскажите читателям, что и почему, в комментариях.