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

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 может обрабатывать MFA, вход и выход пользователей, службы каталогов и объединять логины с социальными провайдерами (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 хранится в:

project/amplify/backend/

с конфигурацией 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, просто добавьте функцию веб-хостинга из CLI:

amplify add hosting

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

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