Создавайте гибкие, масштабируемые и надежные приложения с AWS Amplify

В этом руководстве мы узнаем, как создать бессерверное приложение с полным стеком, используя Angular и AWS Amplify. Мы создадим новый проект и добавим полный поток авторизации с помощью компонента аутентификатора. Мы покроем:

Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы или вы хотите узнать больше на @gerardsans.

Введение в AWS Amplify

AWS Amplify позволяет создавать современные полнофункциональные бессерверные мобильные и веб-приложения, предоставляя Amplify Framework с открытым исходным кодом (состоящий из библиотек Amplify и CLI), интеграции с облачными сервисами AWS и AWS Amplify Console.

  • Расширенные библиотеки: aws-ampify и aws-ampify-angular.
  • Amplify CLI: инструмент командной строки для настройки и интеграции облачных сервисов.
  • Компоненты пользовательского интерфейса: средство проверки подлинности, средство выбора фотографий, фотоальбом, чат-бот и сцена Amazon Sumerian.
  • Облачные сервисы: аутентификация, хранение, аналитика, уведомления, функции AWS Lambda, REST и GraphQL API, чат-боты и расширенная реальность (AR / VR).

Используя AWS Amplify, команды могут сосредоточиться на разработке, в то время как команда Amplify применяет лучшие шаблоны и практики во всем стеке AWS Amplify.

Усиление интерфейса командной строки

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

Некоторые команды будут вызывать вопросы и предоставлять разумные значения по умолчанию, которые помогут вам во время их выполнения. Это некоторые общие задачи. Запустить:

  • amplify init, чтобы настроить новую среду. Например: dev, test, dist.
  • amplify push для предоставления локальных ресурсов облаку.
  • amplify status, чтобы перечислить локальные ресурсы и их текущий статус.

Amplify CLI использует AWS CloudFormation для управления конфигурацией сервисов и предоставлением ресурсов с помощью шаблонов. Это декларативный и атомарный подход к настройке. Как только шаблон будет выполнен, он либо завершится неудачно, либо завершится успешно.

Настройка нового проекта с помощью Angular CLI

Для начала создайте новый проект с помощью Angular CLI. Если он у вас уже есть, переходите к следующему шагу. Если нет, установите его и создайте приложение, используя:

npm install -g @angular/cli
ng new amplify-app

Перейдите в новый каталог и проверьте, все ли проверено, прежде чем продолжить

cd amplify-app
npm install
ng serve

Изменения в проекте Angular CLI

Angular CLI требует некоторых изменений для использования AWS Amplify. Вернитесь в этот раздел, чтобы устранить любые проблемы.

Добавьте определения типов для Node.js, изменив src/tsconfig.app.json. Это требование для aws-sdk-js.

{
  "compilerOptions": {
    "types": ["node"]
  },
}

Добавьте следующий код в начало src/polyfills.ts. Это требование для Angular 6+.

declare global {
  interface Window { global: any; }
}
window.global = window;

Установка зависимостей AWS Amplify

Установите необходимые зависимости для AWS Amplify и Angular, используя:

npm install --save aws-amplify aws-amplify-angular

Установка Amplify CLI

Если у вас его еще нет, установите Amplify CLI:

npm install -g @aws-amplify/cli

Теперь нам нужно настроить Amplify CLI с вашими учетными данными:

amplify configure

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

После входа в Консоль AWS продолжайте:

  • Укажите регион AWS: выберите свой-регион
  • Укажите имя нового пользователя IAM: ampify-app.

В консоли AWS нажмите Далее: разрешения, Далее: Теги, Далее: проверка и Создать пользователя, чтобы создайте нового пользователя IAM. Затем вернитесь в командную строку и нажмите Enter.

  • Введите ключ доступа только что созданного пользователя:
    accessKeyId: YOUR_ACCESS_KEY_ID
    secretAccessKey: YOUR_SECRET_ACCESS_KEY
  • Имя профиля: по умолчанию

Чтобы просмотреть нового созданного пользователя IAM, перейдите на панель управления по адресу https://console.aws.amazon.com/iam/home#/users. Также убедитесь, что ваш регион соответствует вашему выбору.

Настройка вашей среды Amplify

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

amplify init
  • Введите название проекта: ampify-app.
  • Введите имя для среды: dev
  • Выберите редактор по умолчанию: Код Visual Studio.
  • Выберите тип приложения, которое вы создаете, javascript.
  • Какой javascript-фреймворк вы используете angular
  • Путь к исходному каталогу: src
  • Путь к каталогу распространения: dist / ampify-app
  • Команда сборки: npm run-script build
  • Команда запуска: ng serve
  • Вы хотите использовать профиль AWS? Да
  • Выберите профиль, который вы хотите использовать по умолчанию

На этом этапе Amplify CLI инициализировал новый проект и новую папку: ampify. Файлы в этой папке содержат конфигурацию вашего проекта.

<amplify-app>
    |_ amplify
      |_ .config
      |_ #current-cloud-backend
      |_ backend
      team-provider-info.json

Добавление аутентификации

AWS Amplify обеспечивает аутентификацию через категорию auth, которая дает нам доступ к AWS Cognito. Чтобы добавить аутентификацию, используйте следующую команду:

amplify add auth

При появлении запроса выберите:

  • Хотите использовать конфигурацию аутентификации и безопасности по умолчанию ?: Конфигурация по умолчанию
  • Как вы хотите, чтобы пользователи могли входить в систему при использовании пула пользователей Cognito ?: Имя пользователя
  • Какие атрибуты необходимы для регистрации? (Нажмите, чтобы выбрать, чтобы переключить все, чтобы отменить выбор): Электронная почта

Отправка изменений в облако

После выполнения команды push облачные ресурсы будут выделены и созданы в вашей учетной записи AWS.

amplify push

Чтобы быстро проверить недавно созданный пул пользователей Cognito, вы можете запустить

amplify status

Чтобы получить доступ к консоли AWS Cognito в любое время, перейдите на панель управления по адресу https://console.aws.amazon.com/cognito. Также убедитесь, что ваш регион указан правильно.

Ваши ресурсы созданы, и вы можете ими пользоваться!

Настройка приложения Angular

Ссылайтесь на автоматически сгенерированный файл aws-exports.js, который теперь находится в вашей папке src. Чтобы настроить приложение, откройте main.ts и добавьте следующий код под последним импортом:

import Amplify from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);

Импорт модуля Angular

Добавьте модуль и сервис Amplify в src/app/app.module.ts:

import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';
@NgModule({
  imports: [
    AmplifyAngularModule
  ],
  providers: [
    AmplifyService
  ]
});

На этом ваше приложение готово.

Использование сервиса Amplify

AmplifyService обеспечивает доступ к основным категориям AWS Amplify через внедрение зависимостей: аутентификация, аналитика, хранилище, API, кеш, pubsub; и состояние аутентификации через наблюдаемые.

Использование компонента аутентификатора

AWS Amplify предоставляет компоненты пользовательского интерфейса, которые можно использовать в своем приложении. Давайте добавим эти компоненты в проект

npm i --save @aws-amplify/ui

Также включите этот импорт в начало styles.css

@import "~@aws-amplify/ui/src/Theme.css";
@import "~@aws-amplify/ui/src/Angular.css";

Чтобы использовать компонент аутентификатора, добавьте его в src/app.component.html:

<amplify-authenticator></amplify-authenticator>

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

Чтобы просмотреть всех созданных пользователей, вернитесь в панель управления Cognito по адресу https://console.aws.amazon.com/cognito. Также убедитесь, что ваш регион указан правильно.

В качестве альтернативы вы также можете использовать:

amplify console auth

Доступ к данным пользователя

Чтобы получить доступ к информации пользователя после входа в систему, позвоните currentAuthenticatedUser(). Это вернет обещание.

import { AmplifyService } from 'aws-amplify-angular';
@Component(...)
export class AppComponent {
  constructor(public amplify: AmplifyService) {
    amplify.auth().currentAuthenticatedUser().then(console.log)
  }
}

Публикация приложения через консоль AWS Amplify

Первое, что вам нужно сделать, это создать новое репо для этого проекта. После создания репозитория скопируйте URL-адрес проекта в буфер обмена и инициализируйте git в своем локальном проекте:

git init
git remote add origin [email protected]:username/project-name.git
git add .
git commit -m 'initial commit'
git push origin master

Затем перейдите на Консоль AWS Amplify в своей учетной записи AWS. Нажмите Начать, чтобы создать новое развертывание. Затем авторизуйте своего поставщика репозитория в качестве службы репозитория. Затем выберите новый репозиторий и ветвь для только что созданного проекта и нажмите Далее. На следующем экране создайте новую роль и используйте эту роль, чтобы позволить Консоль AWS Amplify развернуть эти ресурсы, и нажмите Далее. Наконец, нажмите Сохранить и Развернуть, чтобы развернуть приложение!

Услуги по уборке

Если в любой момент вы захотите удалить службу из своего проекта и из своей учетной записи AWS, вы можете сделать это, запустив:

amplify remove auth
amplify push

Заключение

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

Вы узнали, как обеспечить поток аутентификации с помощью компонента аутентификации или API службы и как использовать Amplify CLI для выполнения общих задач, включая добавление и удаление служб.

Спасибо за прочтение!

У вас есть вопросы относительно этого руководства или AWS Amplify? Не стесняйтесь связаться со мной в любое время в @gerardsans.

Меня зовут Джерард Санс. Я адвокат разработчиков в AWS Mobile, работаю с командами AWS AppSync и AWS Amplify.

Node - это кроссплатформенная среда выполнения JavaScript с открытым исходным кодом.

Angular - это проект с открытым исходным кодом от Google.