Создавайте гибкие, масштабируемые и надежные приложения с AWS Amplify
В этом руководстве мы узнаем, как создать бессерверное приложение с полным стеком, используя Angular и AWS Amplify. Мы создадим новый проект и добавим полный поток авторизации с помощью компонента аутентификатора. Мы покроем:
- Введение в AWS Amplify
- Настройка нового проекта с помощью Angular CLI
- Установка Amplify CLI и настройка среды Amplify
- Добавление аутентификации и отправка изменений в облако
- Публикация приложения через Консоль 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.