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 и начать взаимодействовать с облачными сервисами. В этом посте я покажу вам, как реализовать аутентификацию, хранение и хостинг. В следующем уроке мы узнаем, как создавать API-интерфейсы GraphQL и Serverless и взаимодействовать с ними.
Хотя в этом руководстве используется React, Amplify будет работать с любым проектом JavaScript и содержит компоненты, специфичные для фреймворка, для Angular, Vue, React Native и Ionic. CLI также поддерживает родную iOS и Android.
Начиная
Создать новое приложение React
Для начала нам нужно создать новое приложение React с помощью CLI create-реагировать на приложение и перейти в новый каталог:
|
1
2
3
|
npx create-react-app amplify-web-app
cd amplify-web-app
|
Далее мы установим клиентские зависимости AWS Amplify:
|
1
2
3
4
5
|
yarn add aws-amplify aws-amplify-react
# or
npm install aws-amplify aws-amplify-react
|
Установите и настройте AWS Amplify CLI
Далее нам нужно установить AWS Amplify CLI.
|
1
|
npm install -g @aws-amplify/cli
|
Теперь, когда AWS Amplify CLI установлен, нам нужно настроить его, чтобы иметь возможность создавать ресурсы в нашей учетной записи AWS. Мы делаем это, выполняя команду amplify configure и настраивая нового пользователя AWS.
|
1
|
amplify configure
|
Вы можете посмотреть короткое видео про эту конфигурацию на YouTube .
Теперь, когда AWS Amplify CLI установлен и настроен, выполните команду amplify из командной строки, чтобы просмотреть доступные параметры и убедиться, что CLI установлен правильно.
|
1
|
amplify
|
Инициализация нового проекта AWS Amplify
Чтобы инициализировать новый проект AWS Amplify, мы запустим команду amplify init :
|
1
|
amplify init
|
При появлении запроса выберите предпочитаемый текстовый редактор и придерживайтесь значений по умолчанию для всех остальных параметров.
Это теперь инициализировало новый проект AWS Amplify локально, и теперь мы увидим каталоги и файл .amplifyrc созданные в корневом каталоге нашего проекта React. Эти файлы содержат информацию о конфигурации нашего проекта Amplify, и нам пока не нужно их трогать.
Реализация аутентификации
Первая функция, которую мы включим, — это аутентификация пользователя. Мы можем включить функции в любое время, запустив amplify add <featurename> . Категория для аутентификации — auth , поэтому запустите:
|
1
|
amplify add auth
|
На вопрос Хотите ли вы использовать настройки аутентификации и безопасности по умолчанию? выберите Да .
После того, как это будет создано, нам нужно выполнить команду amplify push для создания нового сервиса в нашей учетной записи:
|
1
|
amplify push
|
На вопрос Вы уверены, что хотите продолжить? выберите Да .
После создания службы вы можете в любой момент просмотреть ее на панели инструментов, посетив https://console.aws.amazon.com/cognito/users/ и нажав на название службы.
Мы также можем просмотреть все включенные сервисы в любое время, запустив amplify status :
|
1
|
amplify status
|
Вы также заметите новый файл, который был создан — aws-exports.js — в корневой папке приложения React. Вам не нужно будет редактировать этот файл, поскольку он обрабатывается для вас CLI, но мы будем использовать его на следующем шаге для настройки локального проекта.
Добавление аутентификации в приложение React
Теперь, когда мы создали службу аутентификации, мы можем начать использовать ее в нашем приложении React!
Первое, что нам нужно сделать, это настроить приложение React, чтобы узнать о нашем проекте Amplify. Мы делаем это путем вызова Amplify.configure в корне проекта — для нас это будет src / index.js .
|
1
2
3
|
import Amplify from ‘aws-amplify’
import config from ‘./aws-exports’
Amplify.configure(config)
|
Теперь наш проект готов к работе, и мы можем реализовать аутентификацию.
Использование withAuthenticator высшего порядка withAuthenticator
Мы рассмотрим несколько способов реализации аутентификации пользователей, но для начала мы начнем с использования withAuthenticator высшего порядка withAuthenticator из библиотеки aws-ampify-Reaction . Этот компонент создает весь поток аутентификации всего за несколько строк кода и является отличным способом начать работу с библиотекой.
В App.js импортируйте HOC withAuthenticator вверху файла:
|
1
|
import { withAuthenticator } from ‘aws-amplify-react’
|
А в нижней части обновите оператор export чтобы обернуть компонент App с помощью withAuthenticator .
|
1
|
export default withAuthenticator(App)
|
Чтобы узнать больше, прочитайте о доступных компонентах Amplify React для аутентификации в официальной документации .
Тестирование потока аутентификации
Теперь мы можем запустить приложение и увидеть экран входа в систему:
Нажмите Создать учетную запись, чтобы зарегистрироваться, а затем войдите в приложение. Как только мы войдем в систему, сессия будет сохранена, поэтому мы можем обновить страницу и оставаться в ней.
Варианты выхода
Мы также можем визуализировать кнопку выхода, добавив второй аргумент в HOC:
|
1
|
export default withAuthenticator(App, { includeGreetings: true })
|
Обратите внимание, что мы также можем использовать класс Auth напрямую для выхода из системы:
|
1
2
3
4
5
|
// 1. import the class
import { Auth } from ‘aws-amplify’
// Sign the user out
await Auth.signOut()
|
Обратите внимание, что при непосредственном вызове Auth.signOut мы все равно должны каким-то образом перерисовать компонент, чтобы вернуть пользователя на страницу входа. Вы можете увидеть пример этого в ветке выпуска репозитория GitHub проекта .
Использование класса Auth
Мы также можем использовать класс Auth для ручного управления пользователями. Auth имеет более 30 доступных методов, включая signUp , signIn , confirmSignUp , confirmSignIn , forgotPassword и resendSignUp .
Давайте посмотрим, как можно реализовать регистрацию пользователей с помощью signUp класса signUp :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
// 1. Create initial state to hold user inputs
state = {username: », password: », email: », phone_number: », authCode: »}
// 2. onChange handler for user input changes
onChange = e => {
this.setState({ [e.target.name]: e.target.value })
}
// 3. Function to call Auth.signUp
signUp = async () => {
const { username, password, email, phone_number } = this.state
await Auth.signUp({
username, password, attributes: { phone_number, email}
})
console.log(‘successfully signed up’)
}
// 4. Function to call Auth.signUp
confirmSignUp = async () => {
const { username, authCode } = this.state
await Auth.confirmSignUp(username, authCode)
console.log(‘successfully confirmed signed up’)
}
// 5. In render method, create inputs with attributes to update state
<input onChange={this.onChange} name=’username’ />
// 6. Create buttons to call signUp and confirmSignUp methods
<button onClick={this.signUp}>Sign Up</button>
|
Это пример того, как вы можете вручную зарегистрировать пользователя с помощью класса Auth.
Ручная реализация требует больше времени для написания, но дает вам полный контроль не только над пользовательским интерфейсом, но и над реальной функциональностью, которую вы хотите реализовать.
Подробнее об аутентификации с помощью AWS Amplify вы можете узнать в документации по проекту .
Хранение с Amazon S3
Amazon S3 — это популярный сервис для хранения мультимедиа, например изображений и видео, а также для фоновых сервисов, таких как хостинг приложений, резервное копирование и доставка программного обеспечения.
CLI AWS Amplify позволяет нам создавать, настраивать, обновлять и удалять блоки S3. В этом разделе мы рассмотрим, как создать корзину S3, а также как загружать и загружать изображения и файлы в корзину.
Чтобы включить хранилище, мы можем запустить следующую команду:
|
1
|
amplify add storage
|
Далее вам будет предложено указать некоторые детали конфигурации. Выберите сервис « Содержимое» (изображения, аудио, видео и т. Д.) . Затем укажите имя ресурса для конкретного проекта (используется внутри проекта) и имя сегмента (место S3, где будут храниться ваши данные). Наконец, доступ должен быть ограничен только пользователями Auth , а аутентифицированным пользователям должен быть предоставлен доступ на чтение / запись .
Теперь в нашу конфигурацию добавлено хранилище, и мы запускаем amplify push для создания новых ресурсов в нашей учетной записи:
|
1
|
amplify push
|
Это создаст и настроит корзину Amazon S3, которую мы можем начать использовать для хранения предметов.
Пример использования S3 Storage
Если бы мы хотели проверить это, мы могли бы сохранить некоторый текст в таком файле:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
import { Storage } from ‘aws-amplify’
// create function to work with Storage
addToStorage = () => {
Storage.put(‘javascript/MyReactComponent.js’, `
import React from ‘react’
const App = () => (
<p>Hello World</p>
)
export default App
`)
.then (result => {
console.log(‘result: ‘, result)
})
.catch(err => console.log(‘error: ‘, err));
}
// add click handler
<button onClick={this.addToStorage}>Add To Storage</button>
|
Это создаст папку с именем javascript в нашей корзине S3 и сохранит там файл с именем MyReactComponent.js с кодом, который мы указали во втором аргументе Storage.put .
Если мы хотим прочитать все из этой папки, мы можем использовать Storage.list :
|
1
2
3
4
5
|
readFromStorage = () => {
Storage.list(‘javascript/’)
.then(data => console.log(‘data from S3: ‘, data))
.catch(err => console.log(‘error’))
}
|
Если мы хотим прочитать только один файл, мы можем использовать Storage.get :
|
1
2
3
4
5
|
readFromStorage = () => {
Storage.get(‘javascript/MyReactComponent.js’)
.then(data => console.log(‘data from S3: ‘, data))
.catch(err => console.log(‘error’))
}
|
Если бы мы хотели снять все, мы могли бы использовать Storage.list :
|
1
2
3
4
5
|
readFromStorage = () => {
Storage.list(»)
.then(data => console.log(‘data from S3: ‘, data))
.catch(err => console.log(‘error’))
}
|
Работа с изображениями
Работать с изображениями тоже легко. Вот пример:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
class S3ImageUpload extends React.Component {
onChange(e) {
const file = e.target.files[0];
Storage.put(‘example.png’, file, {
contentType: ‘image/png’
})
.then (result => console.log(result))
.catch(err => console.log(err));
}
render() {
return (
<input
type=»file» accept=’image/png’
onChange={(e) => this.onChange(e)}
/>
)
}
}
|
В приведенном выше коде мы связываем входные данные формы загрузки файла с onChange события onChange . Когда пользователь Storage.put файл, Storage.put для загрузки файла на S3 с типом MIME. image/png .
Хостинг
Для развертывания и размещения вашего приложения в AWS мы можем использовать категорию hosting .
|
1
|
amplify add hosting
|
Снова вам будет предложено указать некоторые параметры конфигурации:
- Для типа среды выберите DEV (S3 только с HTTP) .
- Выберите глобально уникальное имя группы, в которой будет размещен ваш проект.
- Укажите имя индекса и URL-адреса ошибок для веб-сайта — обычно index.html .
Теперь все настроено, и мы можем опубликовать приложение:
|
1
|
amplify publish
|
Удаление Услуги
Если в любой момент вы хотите удалить сервис из вашего проекта и вашей учетной записи, вы можете сделать это, выполнив команду amplify remove и затем нажав.
|
1
2
|
amplify remove auth
amplify push
|
Если вы не уверены в том, какие сервисы вы включили в любое время, вы можете запустить команду amplify status :
|
1
|
amplify status
|
amplify status предоставит вам список ресурсов, которые в данный момент включены в вашем приложении.
Вывод
AWS Amplify позволяет разработчикам создавать полнофункциональные облачные приложения проще, чем когда-либо прежде, что позволяет разработчикам быстро выполнять итерации непосредственно из своей интерфейсной среды.
Это первая часть серии из двух частей. В следующем уроке мы узнаем, как создавать API-интерфейсы GraphQL и Serverless и взаимодействовать с ними. Так что следите за обновлениями.