Поиск по сайту:

AWS Amplify упрощает создание мобильных приложений


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

Что такое AWS Amplify?

Amplify не заменяет такой фреймворк, как React — вы можете использовать любой внешний интерфейс, какой захотите (хотя React, React Native, Vue, Android и iOS лучше всего поддерживаются с помощью определенных библиотек). Amplify будет обрабатывать серверную часть, такие вещи, как запуск сервера API, управление базой данных для него и аутентификация клиентов.

Когда вы создаете проект Amplify, серверные ресурсы будут предоставлены автоматически с помощью CloudFormation. Когда вы добавляете API, вас просто попросят определить схему, и для вас будет создана таблица DynamoDB с генерируемыми методами обработчика для подписки, запроса и обновления записей. Если вы хотите обернуть сторонний инструмент управления состоянием, такой как Redux, вокруг бэкэнда Amplify, вы также можете это сделать.

Для аутентификации Amplify можно подключить к Amazon Cognito, универсальному сервису управления идентификацией. Cognito может обрабатывать многофакторную идентификацию, вход и регистрацию пользователей, службы каталогов и федеративный вход в социальные сети (Google, Facebook) или даже на ваш собственный сервер Active Directory через SAML.

Amplify также содержит библиотеку пользовательского интерфейса, полную полезных компонентов, аналогичную Bootstrap. Однако библиотека пользовательского интерфейса Amplify ориентирована на функциональные процессы, такие как регистрация и вход пользователей, загрузка файлов и фотографий, а также чат-боты на базе AWS Lex. Например, использование компонента аутентификации значительно упростит подключение вашего приложения к серверной части аутентификации Amplify (Cognito).

Конечно, вы можете расширить их с помощью собственного кода и цветов, если вы не являетесь поклонником культового оранжевого цвета AWS.

Начиная

Если вы хотите поиграть с Amplify, настройка довольно проста. Глобально установите Amplify CLI из npm:

npm install -g @aws-amplify/cli

Для реального приложения мы загрузим базовое приложение React, используя собственный стартовый шаблон React create-react-app:

npx create-react-app amplify

cd в эту новую папку и установите Amplify как зависимость npm:

npm install @aws-amplify/api @aws-amplify/pubsub

Запустите npm start, и вы должны увидеть вращающийся логотип React, открытый в вашем браузере.

Если вы хотите использовать дополнительную библиотеку пользовательского интерфейса Amplify, которая доступна в виде отдельного пакета для React:

npm install aws-amplify-react

Как только все будет установлено на стороне клиента, вы можете настроить свой проект Amplify с помощью CLI:

amplify init

Это потребует от вас немного информации, такой как имя среды (dev, prod и т. д.), тип приложения, которое вы создаете (JavaScript, React Native), а также исходный код и конфигурация сборки. Введите все, что необходимо, и Amplify займет секунду, чтобы настроить серверную часть.

Это подключит Amplify к консоли AWS, но вам нужно будет выполнить дополнительную настройку, чтобы API заработал.

Добавление API

Чтобы настроить серверную часть API Amplify, запустите:

усилить добавить API

Это задаст вам несколько вопросов, первым из которых будет ваш тип API. Если вы хотите использовать GraphQL или Rest API, вам придется сделать этот выбор здесь. Мы пойдем с GraphQL.

Вам также нужно будет выбрать схему аутентификации — если вы просто тестируете что-то, вы можете выбрать ключ API для аутентификации в процессе разработки. Однако в рабочей среде вы, вероятно, захотите настроить AWS Cognito для управления пользователями и связать его с Amplify, что является рекомендуемой схемой аутентификации для приложений Amplify.

Вам будет предложено определить схему для вашего API, которая откроется в вашем текстовом редакторе по умолчанию. Amplify будет использовать это для настройки DynamoDB.

После настройки запустите amplify push , чтобы отправить изменения в облако. Amplify спросит вас, хотите ли вы создать функции GraphQL для взаимодействия с вашим API, которые будут автоматически генерировать методы для запросов, подписок и мутаций.

При первом нажатии таблица DynamoDB будет подготовлена и настроена автоматически. Вы можете просмотреть саму таблицу из консоли Amplify:

Но если вы хотите внести изменения в схему, вам придется сделать это через консоль. Бэкэнд-конфигурация Amplify хранится в:

проект/усилить/бэкенд/

при этом конфигурация API хранится в api/amplify. Если вы внесете изменения и снова запустите amplify push , он внесет изменения в стек CloudFormation.

Чтобы использовать свой API, вы можете импортировать PubSub из Amplify и настроить его для использования конфигурации, которую Amplify поместила в src/aws-exports.js.

import API, { graphqlOperation } from '@aws-amplify/api';
import PubSub from '@aws-amplify/pubsub';

import awsconfig from './aws-exports';

// Configure Amplify
API.configure(awsconfig);
PubSub.configure(awsconfig);

Затем вы можете использовать объект API для установления соединений. Например, если вы используете GraphQL, вы можете импортировать методы мутации и вызывать один из них с помощью API.graphql(method):

import { createTodo } from './graphql/mutations';

async function createNewTodo() {
  const todo = { name: "new-item" , description: "Hello Amplify!" };
  await API.graphql(graphqlOperation(createTodo, { input: todo }));
}

Публикация вашего приложения Amplify

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

Если вы хотите выполнить развертывание на S3, просто добавьте функцию веб-хостинга из интерфейса командной строки:

amplify add hosting

Это спросит, выполняете ли вы развертывание для разработки или производства, и запросит индекс и документы об ошибках для вашего сайта. После настройки запустите amplify publish , чтобы отправить новый стек CloudFormation.

Ваш браузер откроет новую конечную точку для вашего приложения, которую вы можете добавить в свой DNS с помощью записи CNAME или псевдонима корзины Route 53.