Переход без сервера с React и AWS Amplify: настройка среды разработки

Бессерверные вычисления дают нам такие преимущества, как снижение эксплуатационных расходов и времени разработки. Это позволяет нам сосредоточиться на нашем коде, чтобы предоставить пользователям бизнес-ценность, не беспокоясь о создании и обслуживании серверов.

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

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

Эта модель запуска приложений дает нам такие преимущества, как снижение эксплуатационных расходов, сокращение времени разработки и многое другое. Если вы хотите узнать больше о бессерверной архитектуре и ее преимуществах, ознакомьтесь с этой статьей о бессерверной архитектуре.

Что я узнаю, читая это?

Этот пост (и многие другие, которые появятся в ближайшем будущем) призван научить вас создавать приложения React с использованием бессерверной архитектуры и различных сервисов AWS. Мы рассмотрим такие области, как аутентификация, создание и использование REST API, аналитика и хостинг, при этом используя услуги от одного облачного провайдера. Мы будем работать с AWS Amplify, который предоставляет инструменты интерфейса командной строки и компонент пользовательского интерфейса, чтобы упростить создание бессерверных приложений на AWS.

В этой статье я расскажу вам, как настроить среду разработки для использования на AWS.

Начало работы с AWS Amplify

AWS Amplify - это библиотека, которая предоставляет инструменты для создания бессерверных приложений. С его помощью интегрировать различные сервисы AWS с вашим приложением можно с помощью нескольких строк кода. Вы также получаете компоненты пользовательского интерфейса для ускорения разработки.

Чтобы использовать любые сервисы AWS или библиотеку Amplify, вам потребуется учетная запись AWS. Если у вас его нет, вы можете зарегистрироваться сейчас. Регистрация дает вам немедленный доступ к уровню бесплатного пользования AWS без предоплаты.

Установите и настройте Amplify CLI

Amplify CLI - это инструмент, который позволяет создавать и настраивать сервисы AWS для вашего приложения. Его цель - упростить для вас разработку мобильных и веб-приложений. Интерфейс командной строки использует AWS CloudFormation и вложенные стеки, что позволяет добавлять или изменять конфигурации локально, прежде чем отправлять их для выполнения в облаке.

Для использования интерфейса командной строки необходимо установить Node.js (версия 8.11 или выше) и npm (версия 5 или выше). Если они у вас не установлены, посетите страницу загрузки Node.js. Установка узла также даст вам npm, но если у вас только что установлен узел, вы также можете загрузить npm отдельно.

Установите CLI, запустив npm install -g @aws-amplify/cli в командной строке. Не используйте yarn для установки интерфейса командной строки, так как он имеет известные проблемы. После установки Amplify CLI вам нужно будет настроить его, указав необходимые учетные данные AWS и регион. Следуйте приведенным ниже инструкциям, чтобы настроить интерфейс командной строки.

Откройте командную строку и выполните команду amplify configure. В вашем браузере откроется консоль AWS, и если вы не вошли в систему, вам нужно будет войти в свою учетную запись.
Когда вы вошли в систему, вернитесь в командную строку и нажмите Enter.
Вам будет предложено выбрать регион AWS. Выберите один и нажмите Enter.
Затем вы можете указать имя нового пользователя AWS IAM (Identity and Access Management) для использования с CLI. Введите имя пользователя и нажмите Enter. Когда вы нажимаете клавишу ВВОД, он открывает ваш браузер и переносит вас на панель управления IAM в Консоли AWS.
На панели управления IAM вас попросят создать нового пользователя. Поле имени пользователя предварительно заполняется именем пользователя, которое вы ввели в консоли, и выбранным Programmatic Access типом доступа. Нажмите кнопку Next: Permissions, чтобы перейти на следующую страницу.
Оставьте выбранную по умолчанию политику Administrator Access и нажмите кнопку Next: Review.
Нажмите кнопку Create User, чтобы создать пользователя. При создании пользователя вам будут предоставлены идентификатор ключа доступа и секретный ключ доступа. Сохраните эту информацию, потому что она понадобится вам для настройки интерфейса командной строки.
Вернитесь в командную строку и нажмите Enter.
Вам будет предложено ввести идентификатор ключа доступа. Скопируйте и вставьте значение, затем нажмите Enter.
Другой запрос показывает запрос секретного ключа доступа. Скопируйте и вставьте значение, затем нажмите Enter.
Теперь вас спросят, хотите ли вы создать или обновить профиль AWS на локальном компьютере. Для этого профиля мы будем использовать значение по умолчанию. Нажмите Enter, чтобы выбрать значение по умолчанию и создать свой профиль AWS.

Создайте приложение React

Теперь, когда интерфейс командной строки Amplify настроен, мы можем приступить к созданию приложения React. Мы загрузим приложение React с помощью Create React App. Это позволяет нам сосредоточиться на написании кода и не беспокоиться о настройке Babel и Webpack, потому что они предварительно настроены для нас. Чтобы создать проект React, выполните следующую команду:

$ npx create-react-app serverless-react

Это создает папку serverless-react с необходимыми файлами для приложения реакции. Следующее, что нужно сделать, - это инициализировать проект Amplify. Для этого следуйте инструкциям ниже.

Переключите каталог на проект, запустив cd serverless-react в командной строке
Выполните команду amplify init. Это побудит вас ответить на некоторые вопросы.
Выберите свой редактор кода и нажмите Enter.
Следующий набор подсказок содержит вопросы для определения типа создаваемого вами приложения. Выберите JavaScript, затем React, а затем нажмите Enter, чтобы в остальных запросах использовать значения по умолчанию.

Команда amplify init настраивает ресурсы развертывания в облаке с помощью стеков CloudFormation и подготавливает проект для Amplify. Он извлекает сведения о конфигурации ресурсов в каталог проекта. Эта информация о конфигурации будет использоваться для добавления сервисов AWS в проект и обновления конфигурации сервиса. В корне каталога проекта вы найдете файл .amplifyrc и папку ampify. Они содержат информацию о конфигурации CloudFormation для ресурсов, которые мы будем использовать.

Последний шаг, который нам нужно настроить, - это добавить в наш проект библиотеку Amplify. Библиотека предоставляет нам модули и компоненты пользовательского интерфейса, которые упрощают интеграцию сервисов AWS с помощью нескольких строк кода. Выполните следующую команду, чтобы установить его из npm.

$ npm install -S aws-amplify && npm install -S aws-amplify-react

Это обертка

AWS - один из многих поставщиков услуг бессерверных вычислений. Для настройки и интеграции этих сервисов требуется несколько шагов, а AWS Amplify был создан для упрощения создания бессерверных приложений на AWS. Он предоставляет инструменты для создания и настройки сервисов с помощью нескольких команд и библиотечные компоненты, позволяющие легко взаимодействовать с этими сервисами из нашего кода.

Это первая публикация из серии, которая познакомит вас с созданием бессерверных приложений с помощью AWS Amplify. Мы настроили Amplify CLI и создали проект Amplify.