Інтеграція AWS Amplify в мобільний додаток
AWS Amplify — набір бібліотек та CLI для підключення мобільного додатку до хмарних сервісів AWS: аутентифікація через Cognito, API через AppSync (GraphQL) або REST Gateway, сховище через S3, push-сповіщення через Pinpoint. Amplify Gen 2 (2024) перейшов на TypeScript-based конфігурацію замість JSON, що спростило типізацію та CI/CD-інтеграцію.
Аутентифікація через Cognito + Amplify Auth
Найпоширеніша точка входу — Auth. Налаштування займає 20 хвилин, алеховає нюанси.
React Native:
import { Amplify } from 'aws-amplify';
import { signIn, signUp, confirmSignUp, fetchAuthSession } from 'aws-amplify/auth';
import outputs from './amplify_outputs.json';
Amplify.configure(outputs);
// Вход
const { isSignedIn } = await signIn({ username: email, password });
// JWT токен для API-запитів
const session = await fetchAuthSession();
const token = session.tokens?.idToken?.toString();
Amplify UI Components (@aws-amplify/ui-react-native) дає готовий Authenticator-компонент — LoginForm + SignUp + MFA за одну строку. Виглядає за замовчуванням, але кастомізується через components prop.
Flutter:
await Amplify.addPlugins([AmplifyAuthCognito()]);
await Amplify.configure(amplifyconfig);
final result = await Amplify.Auth.signIn(
username: email,
password: password,
);
AppSync GraphQL: де легко стати не там
AppSync — управляємий GraphQL з підпиской на зміни через WebSocket. Amplify генерує типізований клієнт з схеми:
import { generateClient } from 'aws-amplify/data';
import type { Schema } from './amplify/data/resource';
const client = generateClient<Schema>();
// Запит з реальним часом
const sub = client.models.Post.observeQuery().subscribe({
next: ({ items }) => setPosts(items),
});
Проблема N+1 в AppSync. Якщо resolver не налаштований з batch resolver або DynamoDB Single Table Design, кожен елемент списку робить окремий запит до базі. На 50 постах — 51 запит. Рішення: BatchInvoke в AppSync resolver або Pipeline resolvers.
Offline-режим. Amplify DataStore синхронізує дані з AppSync та зберігає локально у SQLite. При втраті з'єднання мутації попадають у чергу та відправляються при відновленні. Налаштування вимагає @model директив у GraphQL схемі та DataStore.configure(). Конфлікти вирішуються через ConflictResolutionStrategy (Auto Merge, Optimistic Concurrency, Custom Lambda).
S3: завантаження файлів
import { uploadData, getUrl } from 'aws-amplify/storage';
const result = await uploadData({
key: `avatars/${userId}.jpg`,
data: fileBlob,
options: {
accessLevel: 'protected',
contentType: 'image/jpeg',
onProgress: ({ loaded, total }) => setProgress(loaded / total),
},
}).result;
const { url } = await getUrl({ key: result.key, options: { accessLevel: 'protected' } });
accessLevel: 'protected' — файл доступен тільки власнику (через Cognito Identity ID у шляху). 'public' — всім. 'private' — тільки власнику без публічного URL. Неправильний accessLevel — часта причина 403 при спробі отримати чужий файл.
Типові грабли при інтеграції
Розмір бандла React Native. aws-amplify з повною конфігурацією додає ~500KB до JS-бандла. Використовуємо модульні імпорти: import { signIn } from 'aws-amplify/auth' замість import Amplify from 'aws-amplify'.
CORS при REST API. Amplify CLI створює API Gateway з CORS, але якщо додавати ресурси вручну — CORS потрібно налаштовувати окремо для кожного методу + preflight OPTIONS.
Refresh tokens на iOS. Amplify зберігає токени у Keychain. При оновленні через TestFlight без видалення додатку старі токени залишаються. signOut({ global: true }) інвалідує всі сесії на бекенді.
Що входить в інтеграцію
Налаштування Amplify CLI / Gen 2 конфігурації. Підключення Auth (Cognito) з необхідними флоу (email/Google/Apple Sign In). Налаштування API (AppSync або REST). Offline-режим через DataStore (якщо потрібно). Storage для файлів. Налаштування Amplify у CI/CD.
Термін
Базова інтеграція Auth + API: 3–4 дні. Повна інтеграція з DataStore + Storage + Push: 1–2 тижні. Вартість — після аналізу вимог та вибору сервісів.