В этом руководстве мы узнаем, как развернуть приложение React на AWS Amplify. Но прежде чем приступить к работе, давайте лучше разберемся в некоторых основах React и AWS Amplify, предварительных требованиях учебника и стоимости.
Предварительные требования
- Учетная запись AWS с доступом администратора*.
- Node.js: Node.js версии 10.x или выше
- Учетная запись GitHub
- Git: Пользователям Windows необходимо установить Git
- Текстовый редактор по вашему выбору. В этом учебнике мы будем использовать Visual Studio Code
Что такое React?
React — это библиотека JavaScript для построения интерактивных пользовательских интерфейсов. Под пользовательскими интерфейсами мы понимаем элементы, которые пользователи видят на экране и взаимодействуют с ними. Под библиотекой мы подразумеваем, что React предоставляет полезные функции для построения пользовательского интерфейса, но оставляет на усмотрение разработчика, где использовать эти функции в своем приложении.
React обладает следующими характеристиками:
- Декларативность: React делает создание интерактивных пользовательских интерфейсов простой задачей. Создайте простые представления для каждого состояния в вашем приложении, и React будет эффективно обновлять и отображать только необходимые компоненты по мере изменения данных.
- Компонентно-ориентированный: Создавайте инкапсулированные компоненты, которые сами управляют своим состоянием, а затем объединяйте их для создания сложных пользовательских интерфейсов.
- Изучить один раз, использовать везде: Вы можете разрабатывать новые функции с помощью React, не переписывая существующий код.
Что такое AWS Amplify
AWS Amplify предоставляет основанный на Git рабочий процесс CI/CD для создания, развертывания и размещения веб-приложений. Подключаясь к Git-репозиторию, Amplify автоматически определяет настройки сборки для front-end фреймворка и автоматически развертывает обновления при каждом коммите кода. Другими словами, при обновлении нашего кода в репозитории Git, обновления будут автоматически развернуты в нашем веб-приложении.
Создание приложения React
Самый простой способ создать React-приложение — использовать create-react-app. Установите этот пакет с помощью следующих команд в командной строке или терминале:
npx create-react-app amplify-app
cd amplifyapp
npm start
Затем откройте http://localhost:3000/, чтобы увидеть свою заявку.
Создание репозитория на GitHub
В этом шаге мы создадим репозиторий GitHub и загрузим в него наш код. Помните, что для выполнения этого шага вам нужна учетная запись GitHub — если у вас нет учетной записи, зарегистрируйтесь здесь.
Создайте новый репозиторий GitHub для вашего приложения по этой ссылке
Запустите git и переместите приложение в новый репозиторий GitHub, выполнив следующие команды в терминале (не забудьте заменить username и reponame на ваше имя пользователя и имя репозитория):
git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m “initial commit”
git push origin master
После выполнения всех команд обновите страницу репозитория gitHub и увидите, что код вашего React-приложения уже там.
Войдите в консоль AWS Amplify Console
Откройте консоль управления AWS Management Console в новом окне браузера. Когда страница загрузится, введите свои учетные данные, чтобы начать работу. Затем введите «Amplify» в строке поиска и выберите AWS Amplify, чтобы открыть консоль обслуживания.
Развертывание приложения с помощью AWS Amplify
Наконец-то мы добрались до деплой части нашего приложения. На этом этапе мы подключим только что созданный репозиторий GitHub к службе AWS Amplify. Это позволит вам создать, развернуть и разместить ваше приложение на AWS.
В консоли службы AWS Amplify выберите «Get Started» в разделе Deploy.
Выберите GitHub в качестве службы репозитория и нажмите Продолжить.
Авторизуйтесь на GitHub и вернитесь в консоль Amplify. Выберите репозиторий и мастер ветви, которые мы создали ранее, и нажмите Далее.
Примите настройки сборки по умолчанию и выберите Далее.
Просмотрите окончательные детали и выберите Сохранить и развернуть.
AWS Amplify соберет ваш исходный код и развернет ваше приложение на https://…amplifyapp.com.
После завершения сборки щелкните по ссылке, чтобы увидеть, что ваше веб-приложение готово к работе.
*Автоматическое развертывание изменений кода
*
Мы почти подошли к концу обучения. В этом шаге мы внесем некоторые изменения в код с помощью вашего текстового редактора и отправим изменения в мастер-ветку нашего приложения.
Отредактируйте src/App.js с помощью приведенного ниже кода и сохраните это изменение.
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1>Hello AWS Amplify</h1>
</header>
</div>
);
}
export default App;
Отправьте изменения на GitHub с помощью Terminal для автоматического запуска новой сборки:
git add .
git commit -m “novas alteracoes”
git push origin master
После завершения сборки нажмите на ссылку, чтобы увидеть, как ваше измененное веб-приложение работает.
Удалить ресурс
Чтобы избежать головной боли, не забудьте удалить приложение. Для этого зайдите в созданную нами панель приложений, нажмите действие, а затем выберите Удалить приложение.
Заключение
В этом руководстве мы развернем приложение React в облаке AWS Cloud с помощью интеграции с GitHub и использования AWS Amplify. С помощью AWS Amplify мы можем непрерывно развертывать приложение в облаке и размещать его на глобально доступной CDN.
Надеюсь, вам понравилось, увидимся в следующий раз!