Развертывание и хостинг приложения ReactJS

с помощью консоли AWS Amplify

Консоль AWS Amplify поддерживает рабочий процесс CI/CD на основе Git для разработки, развертывания и размещения одностраничных веб-приложений или статических сайтов с бессерверными внутренними частями. При подключении к репозиторию Git сервис Amplify определяет параметры сборки как для платформы внешнего интерфейса, так и для любых бессерверных внутренних частей, настроенных с помощью интерфейса командной строки Amplify CLI, и автоматически развертывает обновления при каждой фиксации изменения кода.

В этом учебном пособии мы начнем с создания нового приложения React и его передачи в репозиторий GitHub.  Затем вы подключитесь к консоли Amplify и развернете свое приложение в глобальной сети доставки контента (CDN), размещенной в домене amplifyapp.com. Далее мы продемонстрируем возможности непрерывного развертывания, внеся изменения в приложение React, и поместим новую версию в основную ветвь, что автоматически запустит новое развертывание.

Все действия, описанные в данном учебном пособии, доступны на уровне бесплатного пользования.

Подробнее об этом учебном пособии
Время 10 минут                                           
Стоимость Доступен уровень бесплатного пользования
Пример использования Веб‑сайты и веб‑приложения
Продукты Консоль AWS Amplify
Аудитория Разработчик
Уровень Начинающий
Последнее обновление 4 марта 2018 г.

1. Регистрация в AWS

Для работы с этим учебным пособием в консоли AWS Amplify требуется аккаунт AWS. Дополнительная плата за использование консоли AWS Amplify с этим учебным пособием не взимается. Ресурсы, которые вы создаете в рамках этого занятия, доступны для уровня бесплатного пользования. 

2. Подтверждение настройки среды

Откройте интерфейс командной строки и введите следующую команду:

node -v;

Если команда возвращает номер версии ниже чем 8.0, обновите узел до версии с номером выше 8. Если номер не найден, установите узел, перейдя по ссылке nodejs.org/download.

3. Создание нового приложения React

Самый простой способ создать приложение React – использовать команду «create-react-app». Установите этот пакет с помощью следующей команды:

npx create-react-app amplifyapp
cd amplifyapp
npm start

4. Инициализация репозитория GitHub

В этом шаге вы создадите репозиторий GitHub и зафиксируете свой код в репозитории. Чтоб выполнить этот шаг, требуется аккаунт GitHub. Если у вас нет этого аккаунта, зарегистрируйтесь здесь

а) Создайте новый репозиторий GitHub для своего приложения (ссылка).

б) Инициализируйте git и передайте приложение в новый репозиторий GitHub, выполнив следующие команды в интерфейсе командной строки:

git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m ‘initial commit’
git push origin master

5. Вход в консоль AWS Amplify

Откройте Консоль управления AWS в новом окне браузера, оставив это пошаговое руководство открытым. Когда стартовый экран загрузится, введите имя пользователя и пароль, чтобы начать работу. Затем введите в строке поиска слово Amplify и выберите пункт AWS Amplify, чтобы открыть консоль сервиса.

6. Развертывание приложения в сервисе AWS Amplify

В этом шаге вы подключите только что созданный репозиторий GitHub к сервису AWS Amplify. Это позволит создать, развернуть и разместить приложение на сервере AWS.

а) Нажмите кнопку Начать работу на вкладке Развертывание.

б) В качестве сервиса для репозитория выберите GitHub и нажмите кнопку Далее.

в) Войдите в сервис GitHub и вернитесь в консоль Amplify. Выберите ранее созданный репозиторий и основную ветвь, затем нажмите кнопку Далее.

г) Подтвердите выбор настроек сборки по умолчанию и нажмите кнопку Далее.

д) Проверьте окончательные параметры и нажмите кнопку Сохранить и развернуть.

е) Консоль AWS Amplify создаст ваш исходный код и развернет приложение по адресу https://<branchname>.<appid>.amplifyapp.com

ж) После завершения сборки нажмите пиктограмму предварительного просмотра, чтобы увидеть, как работает ваше веб-приложение.

tmt-react-ClickThumnail

7. Автоматическое развертывание изменений кода

В этом шаге вы внесете в код некоторые изменения и передадите их в основную ветвь приложения.

а) Отредактируйте файл src/App.js.

б) После завершения сборки нажмите пиктограмму предварительного просмотра в консоли AWS Amplify, чтобы увидеть обновленное приложение.

tmt-react-7b-2

8. Удаление ресурсов

Удалить ресурсы, созданные в консоли AWS Amplify, очень просто. Мы рекомендуем всегда удалять ресурсы, которые больше не используются, чтобы за них не взималась плата.

В разделе Действие выберите пункт Удаление приложения. В открывшемся модальном окне введите delete, чтобы подтвердить удаление приложения. Приложение удалено.

Поздравляем!

Вы развернули приложение React в облаке, выполнив интеграцию с сервисом GitHub и используя консоль Amplify.

С помощью консоли AWS Amplify можно непрерывно развертывать приложение в облаке и размещать его в глобальной сети CDN.

Была ли полезной информация, представленная в этом учебном пособии?

Спасибо!
Укажите, что вам понравилось.
Приносим извинения за причиненные неудобства
Вы обнаружили устаревшую, неточную или неподходящую информацию? Оставьте свой отзыв, чтобы мы могли улучшить качество предоставляемых услуг.