Узнайте, как работает Amplify, и разверните галерею изображений с функциями аутентификации пользователей, хранения и загрузки файлов.

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

Бессерверная облачная инфраструктура — это следующий шаг в создании приложений. Но если вы пытались ориентироваться в огромном количестве сервисов в консоли AWS, вы знаете, что об использовании облака легче сказать, чем сделать. Современные разработчики перегружены количеством услуг, предлагаемых AWS.

Решение? AWS Amplify, который помогает разработчикам легко создавать и развертывать полные мобильные и веб-приложения, предоставляя набор инструментов CLI, библиотек, платформ и облачных сервисов.

Как работает AWS Amplify?

Ваша основная точка взаимодействия при использовании Amplify — это инструмент командной строки, который поставляется с множеством команд, помогающих настроить и поддерживать бессерверный проект. Интерфейс командной строки Amplify может создавать инфраструктуру путем создания и развертывания кода CloudFormation. Он также включает генераторы кода для мобильных и веб-приложений, которые используют следующие языки: JavaScript/TypeScript, Dart, Swift, Java и GraphQL.

Таким образом, вы получаете новые ресурсы AWS, развернутые в облаке, настроенные с учетом передового опыта, и шаблонный код, необходимый для подключения вашего внешнего интерфейса к этим ресурсам.

У Amplify также есть собственный набор облачных сервисов, которые вы можете использовать для настройки и управления вашими приложениями, включая веб-хостинг на основе Amazon S3 и Amazon CloudFront, консоль Amplify и пользовательский интерфейс администратора Amplify. Консоль Amplify используется для получения информации о работе вашего приложения после его развертывания, а пользовательский интерфейс администратора Amplify — это визуальная альтернатива интерфейсу командной строки Amplify, где вы можете создавать серверные части в браузере.

Существует также большой набор интерфейсных библиотек и компонентов, которые помогают подключаться к сервисам AWS и упрощают интеграцию Amplify с интерфейсными фреймворками, такими как React или Vue. Это включает в себя библиотеку для аутентификации с помощью Amazon Cognito, собственную службу управления идентификацией AWS и клиент GraphQL для подключения к AppSync, размещенной службе GraphQL API.

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

Создание галереи изображений

Чтобы лучше понять, что может сделать Amplify, давайте создадим что-нибудь с его помощью! Веб-приложение галереи изображений — простая задача для Amplify. В этом руководстве показано, как использовать подключаемые модули аутентификации, хостинга и хранилища Amplify, а также как генерировать большую часть кода с помощью интерфейса командной строки Amplify.

1. Предпосылки

Для этого урока требуется следующее:

  • Аккаунт AWS
  • Интерфейс командной строки AWS
  • Node.js и NPM
  • Расширение интерфейса командной строки

Если вы используете Cloud9 IDE, вам нужно только установить и настроить интерфейс командной строки Amplify вручную; все остальное настроено корректно из коробки. Убедитесь, что интерфейс командной строки Amplify был настроен через amplify configure для использования ваших учетных данных AWS. У AWS есть подробное руководство по установке и настройке Amplify CLI.

2. Инициализация примера приложения

Во-первых, вам нужно создать новый каталог для вашего приложения с несколькими подкаталогами.

$ mkdir image-gallery
$ cd image-gallery
$ mkdir src
$ mkdir dist

Каталог src используется для хранения кода JavaScript, а каталог dist используется Amplify для объединения, минимизации и загрузки JavaScript и HTML в облако.

Создайте файл package.json в корневом каталоге проекта со следующим содержимым:

{
  "name": "image-gallery",
  "version": "0.1.0",
  "scripts": {
    "build": "esbuild src/app.js --bundle --minify --define:global=window --outfile=dist/app.js"
  },
  "dependencies": {
    "aws-amplify": "latest"
  },
  "devDependencies": {
    "esbuild": "^0.13.15"
  }
}

Вы должны использовать ESBuild для связывания и минимизации Amplify SDK с кодом вашего приложения для развертывания. Команда CLI amplify publish автоматически вызовет скрипт сборки и выполнит поиск файлов в каталоге dist для загрузки в службу хостинга Amplify.

3. Инициализация усиления

Инициализируйте Amplify в проекте с помощью приведенной ниже команды. При появлении запроса выберите значения по умолчанию.

$ amplify init -y

Эта команда настроит в облаке основные ресурсы, связанные с Amplify, включая две роли IAM и корзину S3 для данных, связанных с развертыванием. Он также сгенерирует файл src/aws-exports.js, содержащий все учетные данные, необходимые вашему внешнему интерфейсу для подключения к службам, которые вы развернете позже. Этот файл будет обновляться при каждом вызове интерфейса командной строки Amplify, поэтому вам никогда не следует изменять его вручную.

Затем добавьте hosting, auth и storage в указанном порядке.

$ amplify add hosting

Выберите значения по умолчанию, которые перечислены ниже.

? Select the plugin module to execute: Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type: Manual deployment
$ amplify add auth

Затем CLI задаст вам несколько вопросов с ответами по умолчанию. Здесь по умолчанию тоже все в порядке. Они следующие:

Do you want to use the default authentication and security configuration? Default configuration
How do you want users to be able to sign in? Username
Do you want to configure advanced settings? No, I am done.
$ amplify add storage

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

? Select from one of the below mentioned services: Content (Images, audio, video, etc.)
✔ Provide a friendly name for your resource that will be used to label this category in the project: ...
✔ Provide bucket name: ...
✔ Who should have access: Auth and guest users
✔ What kind of access do you want for Authenticated users? create/update, read, delete
✔ What kind of access do you want for Guest users? read
✔ Do you want to add a Lambda Trigger for your S3 Bucket? no

Для хранилища выберите Auth and guest users, чтобы убедиться, что у вас есть доступ. Прошедшим проверку пользователям необходимо разрешение на create, update и read файлов, а гостевым пользователям необходимо разрешение на read файлов.

4. Написание исходного кода

Создайте файл index.html в каталоге dist со следующим содержимым:

<!DOCTYPE html>
<meta charset="utf-8" />
<title>Amplify Image Gallery</title>
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/dark.min.css" />
<style>
  button {
    width: 100%;
  }
</style>
<h1>Amplify Image Gallery</h1>
<div id="signin-status">Sign Up or Sign In.</div>
<br>
<h2>Step 1: Sign Up</h2>
Username <input id="signup-username" /><br>
Email <input id="signup-email" /><br>
Password <input type="password" id="signup-password" /><br>
<p>
  Passwords must be 8 characters long, contain one number and one special
  character.
</p>
<button id="signup-button">Sign Up With Email</button><br>
<h2>Step 2: Confirm Sign Up</h2>
Confirmation Code <input id="signup-confirmation-code" /><br><br>
<button id="confirm-signup-button">Confirm Sign Up</button>
<br><br>
<h2>Step 3: Sign In</h2>
Username <input id="signin-username" /><br>
Password <input type="password" id="signin-password" /><br><br>
<button id="signin-button">Sign In</button><br><br>
<h2>Step 4: Upload image</h2>
<input type="file" id="upload-input" />
<h2>Images</h2>
<div id="gallery"></div>
<script src="app.js"></script>

На этой HTML-странице есть несколько кнопок для процесса регистрации. Они будут связаны с логикой в ​​следующем файле JavaScript.

Создайте файл app.js в каталоге src со следующим содержимым:

import Amplify, { Auth, Storage } from 'aws-amplify'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)
const getElement = document.getElementById.bind(document)
const statusDiv = getElement('signin-status')
async function refreshGallery() {
  const galleryDiv = getElement('gallery')
galleryDiv.innerHTML = ''
const files = await Storage.list('')
for (let file of files) {
    const image = document.createElement('img')
image.src = await Storage.get(file.key)
galleryDiv.appendChild(image)
  }
}
refreshGallery()
getElement('signup-button').addEventListener('click', async () => {
  const username = getElement('signup-username').value
  const email = getElement('signup-email').value
  const password = getElement('signup-password').value
await Auth.signUp({ username, password, attributes: { email } })
statusDiv.innerText = `Check "${email}" inbox for a confirmation code.`
})
getElement('confirm-signup-button').addEventListener('click', async () => {
  const code = getElement('signup-confirmation-code').value
  const username = getElement('signup-username').value
await Auth.confirmSignUp(username, code)
statusDiv.innerText = 'Sinup confirmed. You can sign in now.'
})
getElement('signin-button').addEventListener('click', async () => {
  const username = getElement('signin-username').value
  const password = getElement('signin-password').value
const result = await Auth.signIn(username, password)
statusDiv.innerText = 'Signed in as ' + result.username
})
getElement('upload-input').addEventListener('change', async (e) => {
  const [file] = e.target.files
await Storage.put(file.name, file)
await refreshGallery()
})

Файл app.js наполняет HTML жизнью. Файл aws-exports.js содержит все учетные данные, необходимые вашему клиенту для взаимодействия с развернутой инфраструктурой. Вы будете использовать его для инициализации Amplify SDK.

Функция refreshGallery получает список всех имен файлов, которые вы загрузили в AWS Amplify Storage, которое по сути представляет собой корзину S3. Затем он использует метод Storage.get для создания подписанных URL-адресов, которые можно поместить в img HTML-элементы для отображения ваших изображений.

Затем ко всем кнопкам добавляются прослушиватели событий для управления потоком аутентификации. Amplify SDK предлагает объект Auth с различными способами регистрации, входа и подтверждения кодов электронной почты. Чтобы позже использовать функцию загрузки, необходимо войти в систему.

Чтобы установить Amplify SDK для JavaScript и ESBuild, выполните следующую команду:

$ npm i

После установки библиотек вы можете развернуть бессерверную инфраструктуру с помощью интерфейса командной строки Amplify и опубликовать изменения в облаке AWS:

$ amplify publish

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

5. Использование приложения

После завершения развертывания Amplify предоставит вам URL-адрес. Приложение будет выглядеть так, как показано на рис. 1 ниже.

Рисунок 1: Приложение галереи изображений

Откройте URL-адрес в браузере и просто следуйте инструкциям:

  1. Зарегистрируйтесь со своей электронной почтой
  2. Введите код подтверждения, полученный от AWS Cognito, и подтвердите его.
  3. Войти
  4. Загрузить изображение

Образ будет отправлен непосредственно в корзину S3, созданную Amplify при настройке категории хранилища с помощью интерфейса командной строки. Затем Amplify SDK используется для создания подписанных URL-адресов, которые позволяют вам получать доступ к изображениям через HTTP. Весь код для загрузки изображений находится в функции refreshGallery внутри файла src/app.js:

async function refreshGallery() {
  const galleryDiv = getElement('gallery')
galleryDiv.innerHTML = ''
const files = await Storage.list('')
for (let file of files) {
    const image = document.createElement('img')
    image.src = await Storage.get(file.key)
    galleryDiv.appendChild(image)
  }
}

6. Очистка

После того, как вы развернули и использовали систему, вы можете удалить ее с помощью всего одной команды Amplify CLI:

$ amplify delete

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

Проверьте консоль S3 на наличие сегментов, связанных с проектом, после вызова вышеуказанной команды. Чтобы предотвратить потерю данных в Amplify и, в свою очередь, в CloudFormation, они не будут удаляться автоматически.

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

Как насчет цен?

Если вы когда-либо пользовались такими сервисами, как Firebase или Heroku, вы, вероятно, знаете, что решения, упрощающие взаимодействие разработчиков с облаком, могут стать дорогими, особенно при последующем масштабировании. Обычно эти решения строятся как полностью автономные сервисы, специально созданные для одной цели: упростить использование облака.

AWS пошел в другом направлении с Amplify. Он построен на уже знакомых вам инфраструктурных сервисах AWS, поэтому вам придется заплатить ту же сумму денег, что и при использовании этих сервисов без Amplify. А поскольку услуги, которые он использует, являются бессерверными, все они предлагают варианты оплаты по требованию. Если вы строите систему, которую никто не хочет использовать, вам не нужно платить за неиспользуемые ресурсы.

Если вы создаете приложение на основе Amplify, воспользуйтесь Калькулятором цен AWS, чтобы оценить, во сколько вам это обойдется. Все ресурсы следуют одной и той же модели ценообразования с Amplify и без него.

Краткое содержание

AWS Amplify — это интересный подход к бессерверной инфраструктуре. Он обслуживает в основном разработчиков интерфейсов и мобильных устройств, поэтому его проекты можно поддерживать, даже если у вас нет достаточного количества разработчиков полного стека или бэкэнда.

Amplify отличается от таких решений, как Firebase, тем, что Amplify — это всего лишь уровень абстракции над существующими бессерверными сервисами AWS. Помимо консоли Amplify и пользовательского интерфейса Amplify Admin, которые управляют вашим приложением, он не предоставляет специальных служб для запуска вашего приложения. По этой же причине затраты на запуск приложения с Amplify такие же, как и при ручной настройке всех базовых служб.

Want to Connect With the Author?
For our latest insights and updates, follow us on LinkedIn