AWS Amplify — это клиентская библиотека, набор инструментов CLI и библиотека компонентов пользовательского интерфейса, которые позволяют разработчикам быстро создавать мощные сервисы в облаке и подключаться к ним. В этом посте мы рассмотрим, как создавать полностью бессерверные веб-приложения с помощью React и AWS Amplify с такими функциями, как аутентификация, управляемый уровень данных GraphQL, хранилище, лямбда-функции и веб-хостинг.
Amplify включает такие функции, как управляемый GraphQL (AWS AppSync), хранилище (Amazon S3), аутентификацию пользователей (Amazon Cognito), бессерверные функции (AWS Lambda), хостинг (Amazon CloudFront и Amazon S3), аналитику (Amazon Pinpoint) и многое другое.
Цель библиотеки и интерфейса командной строки — позволить разработчикам создавать полнофункциональные веб-приложения и мобильные приложения, не беспокоясь об управлении собственной серверной инфраструктурой, что позволяет им продвигаться дальше по стеку, используя уже имеющиеся навыки.
В этой серии я покажу вам, как создать новый проект AWS Amplify, включить облачные функции с помощью интерфейса командной строки, подключить приложение React и начать взаимодействовать с облачными сервисами. В этом посте я покажу вам, как реализовать аутентификацию, хранение и хостинг. В следующем уроке мы узнаем, как создавать GraphQL и бессерверные API и взаимодействовать с ними.
Хотя в этом руководстве используется React, Amplify будет работать с любым проектом JavaScript и имеет компоненты, специфичные для фреймворка, для Angular, Vue, React Native и Ionic. CLI также поддерживает родные iOS и Android.
Начиная
Создайте новое приложение React
Для начала нам сначала нужно создать новое приложение React с помощью интерфейса командной строки create-react-app и перейти в новый каталог:
npx создать-реагировать-приложение усилить-веб-приложение
cd усилить-веб-приложение
Далее мы установим клиентские зависимости AWS Amplify:
пряжа добавить aws-amplify aws-amplify-реагировать
пряжа добавить aws-amplify aws-amplify-реагировать
Установка и настройка интерфейса командной строки AWS Amplify
Далее нам нужно установить интерфейс командной строки AWS Amplify.
npm install -g @aws-amplify/cli
Теперь, когда AWS Amplify CLI установлен, нам нужно настроить его, чтобы иметь возможность создавать ресурсы в нашей учетной записи AWS. Мы делаем это, запустив команду amplify configure и настроив нового пользователя AWS.
Вы можете посмотреть короткое видеообзор этой конфигурации на YouTube.
Теперь, когда интерфейс командной строки AWS Amplify установлен и настроен, запустите команду amplify из командной строки, чтобы просмотреть доступные параметры и убедиться, что интерфейс командной строки установлен правильно.
Инициализация нового проекта AWS Amplify
Чтобы инициализировать новый проект AWS Amplify, мы запустим команду amplify init.
При появлении запроса выберите предпочитаемый текстовый редактор и придерживайтесь значений по умолчанию для всех остальных параметров.
Теперь новый проект AWS Amplify инициализирован локально, и теперь мы увидим каталог amplify и файл .amplifyrc, созданные в корневом каталоге нашего проекта React. Эти файлы содержат информацию о конфигурации нашего проекта Amplify, и нам пока не нужно их трогать.
Реализация аутентификации
Первая функция, которую мы включим, — это аутентификация пользователя. Мы можем включить функции в любое время, запустив amplify add ‹featurename›. Категория для аутентификации — auth, поэтому запустите:
На вопрос «Хотите ли вы использовать конфигурацию аутентификации и безопасности по умолчанию?» выберите «Да».
Как только это будет создано, нам нужно запустить amplify push, чтобы создать новую службу в нашей учетной записи:
На вопрос Вы уверены, что хотите продолжить?, выберите Да.
После создания службы вы можете в любое время просмотреть ее на панели инструментов, посетив https://console.aws.amazon.com/cognito/users/ и щелкнув имя службы.
Мы также можем просмотреть все включенные сервисы в любое время, запустив amplify status:
Вы также заметите новый файл, который был создан — aws-exports.js — в корневой папке приложения React. Вам не нужно будет редактировать этот файл, так как он обрабатывается за вас CLI, но мы будем использовать его на следующем шаге для настройки локального проекта.
Добавление аутентификации в приложение React
Теперь, когда у нас создана служба аутентификации, мы можем начать использовать ее в нашем приложении React!
Первое, что нам нужно сделать, это настроить приложение React, чтобы оно знало о нашем проекте Amplify. Мы делаем это, вызывая Amplify.configure в корне проекта — для нас это будет src/index.js.
импортировать Amplify из «aws-amplify»
импортировать конфигурацию из ‘./aws-exports’
Amplify.configure(конфигурация)
Теперь наш проект готов к работе, и мы можем реализовать аутентификацию.
Использование компонента высшего порядка withAuthenticator
Мы рассмотрим несколько способов реализации аутентификации пользователей, но для начала начнем с использования компонента высшего порядка withAuthenticator из библиотеки aws-amplify-react. Этот компонент формирует весь поток аутентификации всего в нескольких строках кода и является отличным способом приступить к работе с библиотекой.
В App.js импортируйте HOC withAuthenticator в начало файла:
импортировать {withAuthenticator} из ‘aws-amplify-react’
И внизу обновите оператор экспорта, чтобы обернуть компонент приложения с помощью withAuthenticator.
экспортировать по умолчанию с Authenticator (приложение)
Тестирование потока аутентификации
Нажмите Создать учетную запись, чтобы зарегистрироваться, а затем войдите в приложение. Как только мы войдем в систему, сеанс будет сохранен, поэтому мы можем обновить страницу, и мы останемся в системе.
Параметры выхода
Мы также можем отобразить кнопку выхода, добавив второй аргумент в HOC.
экспортировать по умолчанию withAuthenticator(App, {includeGreetings: true})
Обратите внимание, что мы также можем напрямую использовать класс Auth для выхода пользователей:
импортировать { Auth } из «aws-amplify»
ждать Auth.signOut()
Обратите внимание, что при прямом вызове Auth.signOut мы должны каким-то образом перерисовать компонент, чтобы вернуть пользователя на страницу входа.
