Инструмент React CLI, create-react-app, помогает разработчикам интерфейсов наконец сосредоточиться на создании приложений, а не на их настройке. Прошли те времена, когда мы перебирали десятки шаблонных и стартовых приложений, чтобы начать работу. За скромную цену принятия некоторых самоуверенных (но разумных) настроек конфигурации вы отправляетесь в гонку.

После того, как вы запустили новое приложение, npm run build оптимизирует, скомпилирует и сбросит статические файлы, необходимые для обслуживания вашего приложения, в build каталог. На этом этапе вы можете разместить содержимое этого каталога где угодно - и вуаля, ваше приложение размещено в Интернете. Обратите внимание: если ваше приложение зависит от клиентского сервера, такого как Express, эта статья, к сожалению, не для вас.

В документации create-react-app есть ряд полезных советов по развертыванию вашего приложения с помощью различных инструментов: Github Pages, Heroku, Surge и так далее. Мы рассмотрим, как выполнить развертывание в S3 и CloudFront на AWS.

Быстро - зачем развертывать статически? Я вижу две очевидные победы:

  1. Легкость. Для развертывания статических файлов требуется гораздо меньше движущихся частей, чем для приложения с сервером. Меньше настраивать и меньше обслуживать.
  2. Стоимость. Из-за того, что нужно меньше настраивать и поддерживать, стоимость развертывания статического приложения может быть значительно дешевле.

Хорошо, давай перейдем к нему.

Развернуть на 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 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 и здесь, чтобы остаться. Вы предпочитаете настраивать что-нибудь по-другому? Расскажите читателям, что и почему, в комментариях.