How to: Как быстро и эффективно разместить статичный React app c помощью сервисов AWS + custom domain name + SSL

Приветствую всех любителей кодинга!

Сегодня мы с вами рассмотрим на примере простого React-приложения, как легко и дешево сделать его доступным для пользователей с помощью сервисов AWS.

Сервисы, о которых сегодня пойдет речь:

• S3 Bucket. Этот сервис позволяет размещать любые данные  в облаке, на сервере AWS.

• CloudFront. Сервис дает возможность распространить файлы, которые находятся в нашем S3 Bucket, сделать доступ к ним максимально эффективным по всему миру, уменьшить задержки и повысить надежность для конечного потребителя информации. Route53.Сервис позволяет управлять роутингом на наш сервис и доменными именами, а также использовать собственные имена взамен сгенерированных автоматически.

• Certificate manager. Сервис нужен, чтобы выпустить публичный SSL-сертификат от Amazon для нашего приложения.

Итак, давайте начинать работу!

Подготовка приложения

Для начала нам понадобится реакт-приложение. В качестве примера, давайте быстро создадим такое c помощью Vite.

Для этого в консоли я набираю команду:

npm create vite@latest

Выбираем фреймворк React.

Следуем инструкциям в терминале. Отлично, приложение готово к работе!

Предлагаю немного изменить файл App.tsx, чтобы оно было уникальным.

Самый сложный этап пройден. Теперь соберем приложение с помощью команды:

npm run build

Результатом будет папка ./dist, в которой окажется готовое приложение для размещения в сервисе S3.

Работа с сервисом S3

Переходим в сервис AWS S3 и создаем новый Bucket.

В меню создания нового S3 на этом этапе понадобится только ввести имя для него, а остальные настройки оставим в дефолтном состоянии.

После этого вы увидите уведомление об успешно созданном S3 Bucket.

Теперь мы готовы перейти в него и загрузить туда содержимое ранее созданной папки ./dist. Просто перетаскиваем все внутрь нашего Bucket.

После этого появится уведомление о том, что файлы успешно загружены.

CloudFront Distribution

Теперь пришло время настроить дистрибуцию. Переходим в раздел CloudFront и нажимаем кнопку создания новой дистрибуции.

Сначала в опции Origin domain выбираем свежесозданный S3 Bucket с размещенным в нем нашим приложением.

Далее мы должны настроить политику доступа, поэтому выбираем Origin access → Legacy access → Create new OAI → Yes, update the bucket policy. При нажатии Create new OAI мы создаем новую origin access identity для нашего сервиса, который позволит настраивать доступ к ресурсу.

После создания она автоматически подтянется в выбранную Origin access identity.

Теперь этот пункт выглядит таким образом:

Двигаемся дальше!

Следующий интересующий нас пункт — это Web Application Firewall WAF Info. Там мы просто включаем защиту нашего приложения.

Не забываем в секции Viewer выбрать перенаправление запросов по протоколу HTTP на запросы HTTPS.

Теперь переходим к самым интересным настройкам нашего CloudFront. Раздел Settings.

Сегодня мы хотим добавить свое доменное имя, поэтому в этой секции выбираем Add Item.

Для этого нам нужен собственный зарегистрированный домен или же домен, зарегистрированный с помощью любого поставщика услуг. В этом примере можно использовать сайт GoDaddy. Я не буду подробно останавливаться на этом шаге (каждый поставщик услуг  приводит развернутую инструкцию, как это сделать).

Сейчас я буду использовать вымышленный домен ExampleTestDomain.com. Предположим, что мы зарегистрировали его на сервисе GoDaddy.

Прежде чем продолжить с CloudFront, нам нужно перейти к работе с Route53.

Route53

Чтобы завершить настройку CloudFront, необходимо создать новую Hosted Zone в сервисе Route53, который позволит перенаправлять трафик на наше приложение.

Прошу обратить внимание, что основные затраты по размещению приложения мы понесем при использовании этого сервиса, он стоит 50 центов в месяц.

Настройка новой зоны довольна проста. Надо ввести наше зарегистрированное доменное имя при создании:

Далее нажимаем «Создать». После этого мы видим сообщение о том, что зона успешно создана, и ее Record names отображаются снизу.

Теперь, чтобы связать наше доменное имя и наши ресурсы AWS, мы должны использовать name servers, которые отображены в секции Value/ Route traffic to в настройках нашего провайдера (в нашем случае — GoDaddy).

Как правило, эта настройка располагается в разделе DNS management. Тут переходим в раздел nameservers и переносим все значения со скриншота выше в этот раздел.

Обычно перенаправление трафика занимает до 24 часов, поэтому не переживайте, если это не произошло сразу, после внесения изменений в nameservers.

Отлично, пока это все, что требуется от сервиса Route53. Теперь вернемся к настройкам CloudFront.

Продолжение настройки CloudFront

Итак, мы добавляем наш домен в поле Alternate domain name (CNAME) — optional.

Далее переходим к выпуску SSL-сертификата, в этом нам поможет Certificate Manager. Переходим по ссылке Request certificate.

Нас перенаправляет на страницу запроса сертификата для нашего приложения. В настройках вводим наше доменное имя.

И нажимаем кнопку Запросить.

Видим, что сертификат успешно запрошен и ожидает валидации. Это займет некоторое время, вплоть до нескольких часов, поэтому пока  продолжим настройку нашей дистрибуции.

Прежде чем покинуть этот раздел, нужно создать запись в Route53. Для этого нажимаем кнопку Create records in Route 53.

После чего мы увидим уведомление:

Продолжение настройки CloudFront

Когда сертификат будет провалидирован, он появится в выпадающем списке для выбора сертификата. Прежде чем продолжить, нужно дождаться его верификации и добавить в нашу дистрибуцию.

Далее — последний шаг для настройки: указываем корневой объект. И раз у нас это React приложение, корневым объектом будет index.html.

Отлично, теперь мы готовы нажать кнопку для создания дистрибуции!

Продолжение настройки Route53

Чтобы перенаправить трафик на нашу новую дистрибуцию, добавим новую запись в настройках hosted zone. Для этого нажимаем кнопку Добавить запись → simple routing→ define simple record → изменяем тип Record type на AAAA → Alias to cloud front distibution → выбираем нашу свежесозданную дистрибуцию.

Отлично, мы подошли к финалу!

Как правило, доступ к ресурсу появляется в течение 24 часов, поэтому запаситесь терпением. А пока давайте сделаем последний рывок в настройке нашей дистрибуции.

Перенаправление с несуществующих адресов

Так как пользователи могут по ошибке через «/» перейти на несуществующие  адреса, мы должны предусмотреть это и перенаправить их на работающий адрес.

Для этого переходим в раздел Error pages. Создаем новую страницу, которая будет при возврате 403 ошибки  отправлять нас на корневую страницу /index.html.

На этом процесс размещения приложения с помощью сервисов AWS завершен, скоро оно будет доступно пользователям по всему миру!