В предыдущей статье я описал, как развернуть приложение react на Google App Engine. В этой статье мы рассмотрим, как развернуть приложение react на AWS Amplify.
Создание приложения React
Если у вас нет существующего приложения, создайте его с помощью следующей команды:
npx create-react-app react-aws-amplify
Размещение кода на GitHub
Перед развертыванием кода на AWS Amplify необходимо разместить код в git-репозитории, например, GitHub, GitLab и т.д.
Создайте git-репозиторий с именем react-aws-amplify на https://github.com/new и выполните следующие команды внутри проекта, чтобы перенести код на GitHub.
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/collegewap/test1.git
git push -u origin main
Создание учетной записи AWS
Если у вас нет учетной записи AWS, создайте ее по следующей ссылке:
https://portal.aws.amazon.com/billing/signup#/start
Развертывание кода на AWS Amplify
Войдите в AWS Console и найдите AWS Amplify:
Выберите первый вариант из предложенных для поиска.
Прокрутите вниз и выберите Get Started в разделе Amplify Hosting.
Выберите GitHub или любого другого Git-провайдера и нажмите на кнопку Continue.
Теперь вы будете перенаправлены на GitHub для авторизации.
Нажмите на Авторизация.
Выберите репозиторий и ветку, которую вы хотите развернуть, и нажмите Далее.
На следующем шаге вы можете изменить название приложения, если это необходимо. Вы увидите, что сценарий сборки автоматически заполняется AWS:
На следующей странице просмотрите настройки и нажмите Save and Deploy.
Теперь будут показаны различные этапы сборки и развертывания:
После завершения всех шагов нажмите на ссылку, выделенную на изображении ниже, и вы увидите развернутое приложение.
AWS будет автоматически инициировать сборку и развертывание ваших изменений, когда вы будете вносить новые изменения в основную ветку со следующего раза.
Добавление пользовательского домена
Для добавления пользовательского домена вы можете выбрать Управление доменами в разделе Настройки приложений в левой навигации.
Нажмите на Добавить домен в правом верхнем углу. После добавления домена вам нужно будет обновить записи DNS у регистратора доменов.