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

В этом руководстве мы узнаем, как развернуть приложение 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.

Надеюсь, вам понравилось, увидимся в следующий раз!

Оцените статью
devanswers.ru
Добавить комментарий