Първи стъпки с AWS Amplify

Научете как работи Amplify и разположете галерия с изображения с възможности за удостоверяване на потребителя, съхранение и качване на файлове

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

Облачната инфраструктура без сървър е следващата стъпка в изграждането на приложения. Но ако сте се опитвали да навигирате в огромния брой услуги в конзолата на AWS, знаете, че използването на облака е по-лесно да се каже, отколкото да се направи. Днешните разработчици са претоварени с количеството услуги, предлагани от AWS.

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

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

Вашата основна точка на взаимодействие, когато използвате Amplify, е CLI инструментът, който идва с много команди, които ви помагат да настроите и поддържате проект без сървър. Amplify CLI може да създаде инфраструктура чрез генериране и внедряване на CloudFormation код. Той също така включва генератори на код за мобилни и уеб приложения, които използват следните езици: JavaScript/TypeScript, Dart, Swift, Java и GraphQL.

По този начин получавате нови ресурси на AWS, внедрени в облака, конфигурирани с най-добри практики, и шаблонен код, необходим за свързване на вашия интерфейс с тези ресурси.

Amplify също има свой собствен набор от облачни услуги, които можете да използвате, за да настроите и управлявате своите приложения, включително уеб хостинг, базиран на Amazon S3 и Amazon CloudFront, Amplify Console и Amplify Admin UI. Конзолата Amplify се използва за получаване на представа за работата на вашето приложение, след като го внедрите, докато Amplify Admin UI е визуална алтернатива на Amplify CLI, където можете да създавате бекенд в браузъра.

Има и голям набор от библиотеки и компоненти за интерфейс, които ви помагат да се свържете с услугите на AWS и улесняват интегрирането на Amplify с рамки за интерфейс като React или Vue. Това включва библиотека за удостоверяване с Amazon Cognito, собствена услуга за управление на идентичността на AWS и клиент на GraphQL за свързване с AppSync, хоствана API услуга на GraphQL.

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

Изграждане на галерия с изображения

За да разберете по-добре какво може да направи Amplify, нека изградим нещо с него! Уеб приложение за галерия с изображения е проста задача за Amplify. Този урок ви показва как да използвате добавките за удостоверяване, хостинг и съхранение на Amplify и как да генерирате по-голямата част от кода с Amplify CLI.

1. Предпоставки

Този урок изисква следното:

AWS акаунт
AWS CLI
Node.js и NPM
Увеличете CLI

Ако използвате Cloud9 IDE, за да следвате, трябва само да инсталирате и конфигурирате Amplify CLI ръчно; всичко останало е настроено правилно от кутията. Уверете се, че Amplify CLI е конфигуриран чрез 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 с кода на вашето приложение за внедряване. Командата amplify publish CLI автоматично ще извика скрипта за изграждане и ще търси в директорията dist файлове за качване в хостинг услугата на Amplify.

3. Инициализиране на Amplify

Инициализирайте Amplify в проекта с командата по-долу. Когато бъдете попитани, изберете настройките по подразбиране.

$ amplify init -y

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

След това добавете 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 предлага обект за удостоверяване с различни методи за регистрация, влизане и потвърждаване на имейл кодове. Изисква се влизане, за да използвате функцията за качване по-късно.

За да инсталирате Amplify SDK за JavaScript и ESBuild, изпълнете следната команда:

$ npm i

След като библиотеките са инсталирани, можете да разположите безсървърна инфраструктура с Amplify CLI и да публикувате промените в AWS облака:

$ amplify publish

Тази команда ще разгърне безсървърната инфраструктура и пакет, както и ще качи вашия интерфейс код. Завършването може да отнеме няколко минути, тъй като ще бъдат предоставени много ресурси.

5. Използване на приложението

След като внедряването приключи, Amplify ще ви представи URL адрес. Приложението ще изглежда като изображението на фигура 1 по-долу.

Фигура 1: Приложение за галерия с изображения

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

Регистрирайте се с вашия имейл
Въведете кода за потвърждение, който сте получили от AWS Cognito, и го потвърдете
Впиши се
Качете изображение

Изображението ще бъде изпратено директно до кофа S3, която е създадена от Amplify, когато настроите категорията за съхранение с CLI. След това 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, които управляват приложението ви, той не въвежда специални услуги за стартиране на приложението ви. Ето защо разходите за стартиране на приложение с Amplify са същите като при ръчно конфигуриране на всички основни услуги.

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