AWS Amplify 完全ガイド v2.0

フルスタック Web・モバイルアプリの統合開発・ホスティング

AWS Amplify は、フルスタック Web・モバイルアプリのホスティング・バックエンド構築・認証・API・ストレージを統合するサービス であり、React・Next.js・Vue・Angular・React Native・Flutter アプリの CI/CD デプロイ・TypeScript ベースコード定義・Cognito 認証・AppSync GraphQL API・DynamoDB データベース・S3 ファイルストレージ を CLI と SDK で統合管理します。Amplify Gen 2（2024 GA）により、バックエンド定義が「code-first」（IaC の一種）に進化し、フロントエンド開発者が AWS サービスの複雑性を隠蔽された形で活用できます。Vercel / Netlify の AWS ネイティブ代替かつ、AWS バックエンドとの深い統合により、エンタープライズフルスタックアプリに最適です。本ドキュメントは、Amplify Gen 2 のアーキテクチャ・ホスティング機能・バックエンド定義・フレームワーク統合・実装例・運用・2025-2026 最新動向を体系的に解説する完全ガイドです。

ドキュメントの目的

本ガイドは以下を対象としています。

• フロントエンド開発者向け： Next.js / React / Vue でアプリを開発し、AWS バックエンドを統合したい方
• フルスタック開発者向け： Amplify Gen 2 で TypeScript でバックエンド定義し、ローカル開発から本番デプロイまで一元管理
• DevOps エンジニア向け： CI/CD パイプライン・PR Preview・ブランチベース環境管理
• アーキテクト向け： Amplify vs Vercel / Netlify の選択基準、エンタープライズアーキテクチャ設計
• スタートアップ向け： MVP を 1 日で構築・デプロイ（Cognito 認証、GraphQL API、DynamoDB）
• 意思決定者向け： Amplify のコスト・ROI・スケーラビリティ評価

2025-2026 年の Amplify エコシステム

• Amplify Gen 2 成熟化： Edge Runtime 対応（Cloudflare Workers）、SQLite on Edge、リアルタイムコラボレーション
• AI/ML 統合深化： Bedrock との統合（生成 AI バックエンド）、Amazon Q（AI コード補助）との統合
• Developer Experience 向上： ローカル開発環境（ampx sandbox）の高速化、TypeScript strict mode デフォルト化
• Hosting の高度化： Image Optimization、Streaming SSR、On-demand ISR（Incremental Static Regeneration）
• 多言語フレームワーク対応拡大： SvelteKit・Astro・Nuxt の公式サポート拡張

定義

AWS 公式による定義：

“AWS Amplify is a complete platform for building secure, scalable full-stack applications with AWS. Build and deploy full-stack web and mobile apps in hours, not months.”

目次

1. 概要
2. Amplify が解決する課題
3. 主な特徴
4. Amplify Gen 2 vs Gen 1 の比較
5. アーキテクチャ
6. Amplify Gen 2 バックエンド定義完全ガイド
7. Amplify Hosting（ホスティング・CI/CD）
8. 認証・Authorization（Cognito 統合）
9. API・GraphQL（AppSync 統合）
10. Database・Data Management（DynamoDB）
11. Storage・File Upload（S3 統合）
12. Functions・Lambda Integration
13. フレームワーク完全対応表
14. 実装例・ユースケース（10+）
15. 設定・操作の具体例（CLI/SDK/IaC）
16. UI ライブラリ・UI Builder
17. PR Preview・ブランチベース環境
18. パフォーマンス最適化・CDN 設定
19. 類似サービス比較表
20. ベストプラクティス
21. トラブルシューティング表
22. 2025-2026 最新動向
23. 学習リソース・参考文献
24. 実装例・導入ロードマップ
25. 実装チェックリスト
26. コスト・プライシング
27. まとめ

概要

初心者向けメモ： Amplify は「フロントエンド開発者が AWS バックエンドを簡単に構築・ホストするワンストップショップ」です。React でアプリを書いて git push するだけで、自動的に：

1. ホスティング：CloudFront + S3 で世界中に配信
2. 認証：Cognito でユーザー管理（Google / Facebook ログイン可）
3. API：AppSync GraphQL で型安全なデータアクセス
4. DB：DynamoDB で NoSQL データ永続化
5. ストレージ：S3 でファイルアップロード
6. 関数：Lambda で カスタムビジネスロジック

これらすべてが、バックエンドの複雑性を隠蔽しながら、TypeScript でコード化（Amplify Gen 2）できます。

Amplify の実現する統合開発環境：

Amplify が解決する課題

1. フロントエンド開発者がバックエンド構築できない

課題：React 開発者が「Cognito / DynamoDB / AppSync を自分で設定」するのは学習曲線が陡峻。複数週間の学習 + Infrastructure as Code 習得が必要 Amplify の解決：amplify add auth → Cognito 自動プロビジョニング。amplify add data → GraphQL API + DynamoDB 自動構築。フロントエンド開発者が数分でバックエンド完成

2. フロントエンド + バックエンド のデプロイが分離

課題：Next.js フロントエンド（Vercel で deploy） + Node.js バックエンド（Heroku で deploy） + DB（AWS）とデプロイ先が3つに分散。管理複雑 Amplify の解決：フロントエンド + バックエンドを git push で同時デプロイ。CI/CD パイプラインが統一。ブランチごとに自動環境生成

3. 認証・API の型定義が煩雑

課題：GraphQL スキーマを手動定義 → TypeScript 型を手動生成 → React コンポーネントで手動バインド。3 重の手作業で保守困難 Amplify の解決：TypeScript で a.schema() でスキーマ定義すると、フロントエンド側に自動型生成。IDE IntelliSense で型安全なコード

4. ローカル開発環境のセットアップが複雑

課題：Docker Compose で LocalStack + DynamoDB Local + Cognito emulator + AppSync を自分で構築。環境差異で「本番では動くがローカルでは動かない」 Amplify の解決：ampx sandbox でローカル開発環境が秒単位で起動。Lambda・DynamoDB・Cognito すべて本番と同じインターフェースで開発可能

5. スケーリングが手動

課題：ユーザー数急増で DynamoDB はオートスケーリング対応が必要。Lambda 同時実行数調整。API Gateway のレート制限。これら手動調整で対応遅れ Amplify の解決：AWS のマネージドサービスがデフォルトでオートスケール。開発者は「スケーラビリティに悩まない」アーキテクチャを選択できる

主な特徴

1. Amplify Gen 2（2024 GA）

バックエンド定義が従来の CLI + console から「TypeScript コードファースト」に進化。

// amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { data } from './data/resource';

export const backend = defineBackend({
  auth,
  data,
});

メリット：

• IDE サポート（IntelliSense、型チェック）
• Git で バージョン管理
• Code review による品質管理
• テスト可能（unit test で リソース定義をテスト）

2. Code-First Developer Experience

フロントエンド開発者が AWS 複雑性を意識せず、TypeScript で統合開発。

// amplify/auth/resource.ts
export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: { google: {...}, github: {...} },
  },
  multifactor: { mode: 'OPTIONAL', sms: true, totp: true },
});

// amplify/data/resource.ts
const schema = a.schema({
  Todo: a.model({
    content: a.string().required(),
    isDone: a.boolean().default(false),
    owner: a.string(),
  }).authorization(allow => [
    allow.owner(),  // 所有者のみアクセス可
  ]),
});

3. Amplify Hosting（CI/CD・グローバル CDN）

Git push → 自動ビルド・テスト・デプロイ → CloudFront グローバル配信。

GitHub/GitLab/Bitbucket push
  ↓
Amplify CI/CD Pipeline（自動ビルド）
  ↓ npm install / npm run build
Amplify Build Artifacts（最適化）
  ↓ Tree shaking, Code splitting, Minification
CloudFront + S3（グローバル配信）
  ↓
エンドユーザー（平均レイテンシ < 100ms）

4. PR Preview 環境

Pull Request 作成時に、自動的にプレビュー環境を生成。レビュアーがブラウザで変更確認。

PR #123 created
  ↓
Amplify Hosting: PR preview environment 自動生成
  ↓ https://pr-123.example.amplify.app
レビュアー: ブラウザで新機能を実際に試行
  ↓
フィードバック基づいてコミット
  ↓
PR merge → 本番デプロイ

5. Next.js SSR・Edge Runtime 対応

Next.js App Router・Server Components をネイティブサポート。Lambda@Edge でエッジ実行。

// app/page.tsx (Server Component)
import { generateClient } from 'aws-amplify/data';

export default async function HomePage() {
  const client = generateClient();
  const todos = await client.models.Todo.list();
  
  return (
    <div>
      {todos.data.map(todo => (
        <div key={todo.id}>{todo.content}</div>
      ))}
    </div>
  );
}

6. リアルタイムデータ同期

AppSync GraphQL Subscriptions で複数クライアント間のリアルタイム同期。

// React component
useEffect(() => {
  const subscription = client.models.Todo.observeQuery().subscribe({
    next: ({ items }) => setTodos(items),
  });
  
  return () => subscription.unsubscribe();
}, []);

Amplify Gen 2 vs Gen 1 の比較

アーキテクチャ

┌─────────────────────────────────────────────────────────────┐
│                 Amplify フルスタック                        │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────────────────────────────────────────────────┐ │
│  │  Frontend Layer（Browser / Mobile）                  │ │
│  │  - Next.js / React / Vue / Angular                   │ │
│  │  - React Native / Flutter / Ionic                    │ │
│  └──────────────────────────────────────────────────────┘ │
│                     │                                       │
│  ┌──────────────────▼──────────────────────────────────┐ │
│  │  Amplify UI Libraries                               │ │
│  │  - @aws-amplify/ui-react                            │ │
│  │  - useAuthenticator, useDataStore, etc              │ │
│  └──────────────────┬──────────────────────────────────┘ │
│                     │                                       │
│  ┌──────────────────▼──────────────────────────────────┐ │
│  │  Amplify Client SDK                                 │ │
│  │  - Auth（signIn, signUp, signOut）                  │ │
│  │  - Data（client.models.Todo.create()）             │ │
│  │  - Storage（uploadData, downloadData）             │ │
│  │  - GraphQL（客户端自动生成）                          │ │
│  └──────────────────┬──────────────────────────────────┘ │
│                     │                                       │
│  ┌──────────────────▼──────────────────────────────────┐ │
│  │  Amplify Hosting & CDN                              │ │
│  │  - CloudFront Distribution                          │ │
│  │  - S3（Static Assets）                              │ │
│  │  - Lambda@Edge（SSR / Edge Functions）             │ │
│  │  - Custom Domain & SSL/TLS Certificate             │ │
│  └──────────────────┬──────────────────────────────────┘ │
│                     │                                       │
│  ┌────────┬─────────┴──────────┬──────────┬────────────┐ │
│  │        │                    │          │            │ │
│  ▼        ▼                    ▼          ▼            ▼ │
│ ┌──┐  ┌──────────┐    ┌──────────────┐  ┌──┐  ┌────────┐
│ │CA│  │AppSync   │    │DynamoDB /    │  │S3│  │Lambda  │
│ │nd│  │GraphQL   │    │Aurora Ser.   │  │CS│  │Functions
│ │id│  │API       │    │              │  │TO│  │        │
│ │  │  │          │    │              │  │RE│  │        │
│ └──┘  └──────────┘    └──────────────┘  └──┘  └────────┘
│
│  ┌────────────┐  ┌─────────────┐  ┌──────────────┐
│  │SNS / Pinpt │  │EventBridge  │  │CloudWatch    │
│  │(Notifica)  │  │（自動化）     │  │（監視）      │
│  └────────────┘  └─────────────┘  └──────────────┘
│
└─────────────────────────────────────────────────────────────┘

Amplify Gen 2 バックエンド定義完全ガイド

プロジェクト構造

my-amplify-app/
├── amplify/
│   ├── auth/
│   │   └── resource.ts           # 認証設定（Cognito）
│   ├── data/
│   │   └── resource.ts           # GraphQL スキーマ・DB
│   ├── storage/
│   │   └── resource.ts           # S3 ファイルストレージ
│   ├── functions/
│   │   └── custom-function/
│   │       └── resource.ts       # Lambda 関数定義
│   ├── backend.ts                # バックエンド統合定義
│   ├── outputs.ts                # クライアント設定出力
│   └── package.json              # 依存関係
│
├── src/
│   ├── app/
│   │   ├── page.tsx              # Next.js App Router
│   │   ├── auth/
│   │   │   └── [[...slug]].tsx   # Auth UI
│   │   └── ...
│   └── ...
│
├── amplify_outputs.json           # 生成済みバックエンド設定
├── package.json
├── tsconfig.json
├── next.config.js
└── .gitignore

1. Auth（認証）リソース定義

// amplify/auth/resource.ts
import { defineAuth, secret } from '@aws-amplify/backend';

export const auth = defineAuth({
  // ログイン方法
  loginWith: {
    email: true,                           // Email + Password
    phone: true,                           // Phone + OTP
    externalProviders: {
      google: {
        clientId: secret('GOOGLE_CLIENT_ID'),
        clientSecret: secret('GOOGLE_CLIENT_SECRET'),
        scopes: ['email', 'profile'],
      },
      github: {
        clientId: secret('GITHUB_CLIENT_ID'),
        clientSecret: secret('GITHUB_CLIENT_SECRET'),
      },
      callbackUrls: [
        'https://example.com/auth/callback',
        'http://localhost:3000/auth/callback',
      ],
      logoutUrls: ['https://example.com/', 'http://localhost:3000/'],
    },
  },

  // 多要素認証（MFA）
  multifactor: {
    mode: 'OPTIONAL',
    sms: true,                            // SMS OTP
    totp: true,                           // TOTP アプリ（Authy 等）
  },

  // ユーザー属性
  userAttributes: {
    email: { required: true, mutable: false },
    givenName: { required: true, mutable: true },
    familyName: { required: true, mutable: true },
    preferredUsername: { required: false, mutable: true },
    phoneNumber: { required: false, mutable: true },
  },

  // パスワードポリシー
  passwordPolicy: {
    minLength: 12,
    requireNumbers: true,
    requireSpecialCharacters: true,
    requireUppercase: true,
    requireLowercase: true,
  },

  // アカウントロック設定
  accountRecovery: 'EMAIL_AND_PHONE_WITHOUT_MFA',

  // セッション設定
  session: {
    duration: Duration.days(30),
    idleTimeout: Duration.days(7),
  },
});

2. Data（データ・GraphQL）リソース定義

// amplify/data/resource.ts
import { a, defineData, ClientSchema } from '@aws-amplify/backend';

const schema = a.schema({
  // Todo モデル
  Todo: a.model({
    id: a.id().required(),
    content: a.string().required(),
    isDone: a.boolean().default(false),
    createdAt: a.datetime(),
    updatedAt: a.datetime(),
    owner: a.string(),

    // Relations
    category: a.belongsTo('Category', 'categoryId'),
    categoryId: a.id(),

    // Authorizations
  })
  .authorization((allow) => [
    allow.owner(),                      // 所有者のみ read/write
    allow.authenticated().to(['list']), // 認証済みユーザーは一覧のみ
  ])
  .secondaryIndexes((indexes) => [
    indexes
      .generalIndex('ownerIndex')
      .sortKeys(['owner', 'createdAt']),
  ]),

  // Category モデル
  Category: a.model({
    id: a.id().required(),
    name: a.string().required(),
    description: a.string(),
    todos: a.hasMany('Todo', 'categoryId'),
  })
  .authorization((allow) => [
    allow.authenticated(),  // すべての認証ユーザーが read/write 可能
  ]),

  // Post モデル（ブログ）
  Post: a.model({
    id: a.id().required(),
    title: a.string().required(),
    content: a.string().required(),
    author: a.string().required(),
    published: a.boolean().default(false),
    tags: a.string().array(),
    createdAt: a.datetime(),
  })
  .authorization((allow) => [
    allow.publicApiKey(),               // 公開（API キー認証）
    allow.owner(),                      // 作成者は edit/delete 可能
  ]),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'userPool',  // 認証済みユーザーデフォルト
    apiKeyAuthorizationMode: {
      expiresInDays: 30,                   // API キー有効期限
    },
  },
});

3. Storage（ファイルストレージ）リソース定義

// amplify/storage/resource.ts
import { defineStorage } from '@aws-amplify/backend';

export const storage = defineStorage({
  name: 'amplifyTeamDrive',
  access: (allow) => ({
    // 認証ユーザーの個人フォルダ
    'protected/{identity_id}/*': [
      allow.authenticated.to(['read', 'write', 'delete']),
    ],

    // 公開フォルダ
    'public/*': [
      allow.authenticated.to(['read', 'write']),
      allow.guest.to(['read']),
    ],

    // 管理者限定
    'admin/*': [
      allow.groups(['admin']).to(['read', 'write', 'delete']),
    ],
  }),
});

4. Functions（Lambda）リソース定義

// amplify/functions/send-notification/resource.ts
import { defineFunction } from '@aws-amplify/backend';

export const sendNotification = defineFunction({
  name: 'send-notification',
  entry: './handler.ts',
  timeoutSeconds: 60,
  memoryMB: 512,
  environment: {
    SNS_TOPIC_ARN: process.env.SNS_TOPIC_ARN!,
  },
  policies: [
    // SNS への権限付与
    {
      resource: [process.env.SNS_TOPIC_ARN!],
      actions: ['sns:Publish'],
    },
  ],
});

// amplify/functions/send-notification/handler.ts
import { SNSClient, PublishCommand } from '@aws-sdk/client-sns';

const sns = new SNSClient({});

export const handler = async (event: {
  username: string;
  message: string;
}) => {
  const result = await sns.send(
    new PublishCommand({
      TopicArn: process.env.SNS_TOPIC_ARN,
      Message: `${event.username}: ${event.message}`,
      Subject: 'New Notification',
    })
  );

  return { statusCode: 200, body: JSON.stringify(result) };
};

5. Backend 統合定義

// amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { data } from './data/resource';
import { storage } from './storage/resource';
import { sendNotification } from './functions/send-notification/resource';

export const backend = defineBackend({
  auth,
  data,
  storage,
  sendNotification,
});

// Lambda 権限追加の例
backend.sendNotification.addEnvironment('SNS_TOPIC_ARN', '...');

Amplify Hosting（ホスティング・CI/CD）

セットアップ

# 1. Amplify プロジェクト初期化
npx create-amplify@latest my-app
cd my-app

# 2. フレームワーク選択（Next.js 推奨）
? What framework are you using? Next.js
? Environment variables? .env.local

# 3. ローカル開発サーバー起動（バックエンド + フロント同時実行）
npx ampx sandbox

# ブラウザ: http://localhost:3000
# バックエンド自動デプロイ: http://localhost:3000/graphql (Apollo Studio)

Git 連携（CI/CD パイプライン）

# 1. GitHub リポジトリにプッシュ
git add .
git commit -m "Initial commit"
git push origin main

# 2. AWS Amplify コンソールで Git リポジトリを接続
# → GitHub OAuth → リポジトリ選択 → 接続

# 3. 自動デプロイ設定
# - main ブランチ → 本番環境
# - develop ブランチ → ステージング環境
# - PR ごと → PR Preview 環境

# 4. push するたびに自動デプロイ
git push origin feature-new-feature
  ↓ Amplify CI/CD パイプライン
  ├─ npm ci
  ├─ npm run build
  ├─ Run tests
  └─ Deploy to CloudFront + S3
    ↓ https://feature-new-feature.example.amplify.app で確認可能

Amplify CI/CD の詳細設定

# amplify.yml
version: 1
env:
  variables:
    NODE_ENV: production
    NEXT_PUBLIC_API_URL: https://api.example.com

backend:
  phases:
    build:
      commands:
        - npm ci
        - npm run generate  # Amplify 型生成

frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build    # Next.js ビルド
    test:
      commands:
        - npm run test:e2e # E2E テスト実行

  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*

認証・Authorization（Cognito 統合）

フロントエンドでの認証実装

// src/app/layout.tsx
import { Authenticator } from '@aws-amplify/ui-react';

export default function RootLayout({ children }) {
  return (
    <Authenticator>
      <html>
        <body>{children}</body>
      </html>
    </Authenticator>
  );
}

// src/app/page.tsx
'use client';

import { useAuthenticator } from '@aws-amplify/ui-react';
import { signOut } from 'aws-amplify/auth';

export default function Page() {
  const { user } = useAuthenticator();

  return (
    <div>
      <h1>Welcome, {user.username}</h1>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  );
}

認可（Authorization）の実装

// クライアント側
import { fetchUserAttributes } from 'aws-amplify/auth';

async function getUserRole() {
  const attrs = await fetchUserAttributes();
  return attrs['custom:role']; // 'admin' | 'user' | 'guest'
}

// データベース側（GraphQL schema）
Post: a.model({
  title: a.string(),
  content: a.string(),
  author: a.string(),
})
.authorization((allow) => [
  allow
    .authenticated()
    .groupsClaim('custom:role')
    .groups(['admin'])
    .to(['create', 'update', 'delete']),  // Admin のみ
  allow.authenticated().to(['read']),       // 認証済み全員読み取り可能
])

API・GraphQL（AppSync 統合）

自動生成 GraphQL クライアント

Amplify Gen 2 では、TypeScript スキーマから自動的に GraphQL クライアント型を生成。

// TypeScript スキーマ定義
const schema = a.schema({
  Todo: a.model({
    id: a.id(),
    content: a.string().required(),
    isDone: a.boolean().default(false),
  }),
});

// ↓ 自動生成される GraphQL Query
/*
query GetTodo($id: ID!) {
  getTodo(id: $id) {
    id
    content
    isDone
    createdAt
    updatedAt
  }
}

mutation CreateTodo($input: CreateTodoInput!) {
  createTodo(input: $input) {
    id
    content
    isDone
  }
}

subscription OnCreateTodo {
  onCreateTodo {
    id
    content
    isDone
  }
}
*/

// ↓ React で 型安全に使用
import { generateClient } from 'aws-amplify/data';
import type { Schema } from '@/amplify/data/resource';

const client = generateClient<Schema>();

// 型チェック済みのクエリ実行
const result = await client.models.Todo.get({ id: '123' });
console.log(result.data.content); // string | undefined

// リアルタイム購読
const subscription = client.models.Todo.onCreate().subscribe({
  next: (event) => {
    console.log('New todo:', event.data.content); // 型安全
  },
});

REST API（AppSync REST Resolvers）

// カスタム REST エンドポイント定義
import { defineFunction } from '@aws-amplify/backend';

export const customApi = defineFunction({
  name: 'custom-api',
  entry: './handler.ts',
});

// handler.ts
export const handler = async (event) => {
  const { httpMethod, path, body } = event;

  if (httpMethod === 'POST' && path === '/todos') {
    return {
      statusCode: 201,
      body: JSON.stringify({ message: 'Todo created' }),
    };
  }

  return {
    statusCode: 404,
    body: JSON.stringify({ error: 'Not found' }),
  };
};

Database・Data Management（DynamoDB）

DynamoDB スキーマ定義

// amplify/data/resource.ts
const schema = a.schema({
  User: a.model({
    id: a.id(),
    name: a.string(),
    email: a.string().required(),
    createdAt: a.datetime(),
  })
  .authorization((allow) => [
    allow.owner(),
    allow.authenticated().to(['list', 'read']),
  ])
  .secondaryIndexes((indexes) => [
    indexes.generalIndex('emailIndex').sortKeys(['email']),
  ]),

  Post: a.model({
    id: a.id(),
    title: a.string().required(),
    authorId: a.id(),
    author: a.belongsTo('User', 'authorId'),
    comments: a.hasMany('Comment', 'postId'),
  }),

  Comment: a.model({
    id: a.id(),
    content: a.string().required(),
    postId: a.id(),
    post: a.belongsTo('Post', 'postId'),
  }),
});

クライアント側の データ操作

// Create
const newTodo = await client.models.Todo.create({
  content: 'Learn Amplify',
  isDone: false,
});

// Read
const todo = await client.models.Todo.get({ id: '123' });

// Update
await client.models.Todo.update({
  id: '123',
  isDone: true,
});

// Delete
await client.models.Todo.delete({ id: '123' });

// List（ページネーション対応）
const { data: todos, nextToken } = await client.models.Todo.list({
  limit: 10,
  nextToken: undefined,
});

// リアルタイム購読（WebSocket）
const subscription = client.models.Todo.observeQuery().subscribe({
  next: ({ items }) => setTodos(items),
  error: (err) => console.error(err),
});

return () => subscription.unsubscribe();

Storage・File Upload（S3 統合）

ファイルアップロード実装

'use client';

import { uploadData, downloadData } from 'aws-amplify/storage';
import { useState } from 'react';

export default function FileUpload() {
  const [file, setFile] = useState<File | null>(null);
  const [uploadProgress, setUploadProgress] = useState(0);

  const handleUpload = async () => {
    if (!file) return;

    try {
      const result = await uploadData({
        path: `public/${file.name}`,
        data: file,
        options: {
          onProgress: ({ transferredBytes, totalBytes }) => {
            setUploadProgress(
              Math.round((transferredBytes / totalBytes) * 100)
            );
          },
        },
      });

      console.log('Upload successful:', result);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  };

  const handleDownload = async (key: string) => {
    try {
      const result = await downloadData({ path: key });
      const blob = await result.body.blob();
      // ブラウザでダウンロード
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = key.split('/').pop() || 'download';
      a.click();
    } catch (error) {
      console.error('Download failed:', error);
    }
  };

  return (
    <div>
      <input
        type="file"
        onChange={(e) => setFile(e.target.files?.[0] || null)}
      />
      <button onClick={handleUpload}>Upload</button>
      {uploadProgress > 0 && <p>Progress: {uploadProgress}%</p>}
    </div>
  );
}

Functions・Lambda Integration

カスタム Lambda 関数

// amplify/functions/process-image/resource.ts
import { defineFunction } from '@aws-amplify/backend';

export const processImage = defineFunction({
  name: 'process-image',
  entry: './handler.ts',
  memoryMB: 1024,
  timeoutSeconds: 120,
  environment: {
    BUCKET_NAME: 'my-bucket',
  },
  policies: [
    {
      resource: ['arn:aws:s3:::my-bucket/*'],
      actions: ['s3:GetObject', 's3:PutObject'],
    },
  ],
});

// handler.ts（画像リサイズ）
import { S3Client, GetObjectCommand, PutObjectCommand } from '@aws-sdk/client-s3';
import sharp from 'sharp';

const s3 = new S3Client({});

export const handler = async (event: {
  bucket: string;
  key: string;
}) => {
  const { bucket, key } = event;

  // S3 から画像取得
  const getResult = await s3.send(
    new GetObjectCommand({ Bucket: bucket, Key: key })
  );

  const buffer = await getResult.Body.transformToByteArray();

  // sharp で リサイズ
  const resized = await sharp(buffer)
    .resize(300, 300, { fit: 'cover' })
    .toBuffer();

  // 変換結果を S3 にアップロード
  await s3.send(
    new PutObjectCommand({
      Bucket: bucket,
      Key: `thumbnails/${key}`,
      Body: resized,
      ContentType: 'image/jpeg',
    })
  );

  return { success: true, message: `Processed ${key}` };
};

フレームワーク完全対応表

実装例・ユースケース（10+）

1. Cognito + Auth UI を使った認証システム

// src/app/auth/[[...slug]]/page.tsx
'use client';

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

export default function AuthPage() {
  return <Authenticator socialProviders={['google', 'github']} />;
}

2. GraphQL リアルタイム Todo アプリ

// src/app/todos/page.tsx
'use client';

import { generateClient } from 'aws-amplify/data';
import type { Schema } from '@/amplify/data/resource';
import { useEffect, useState } from 'react';

const client = generateClient<Schema>();

export default function TodosPage() {
  const [todos, setTodos] = useState<Schema['Todo']['type'][]>([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    // リアルタイム購読
    const subscription = client.models.Todo.observeQuery().subscribe({
      next: ({ items }) => setTodos(items),
    });

    return () => subscription.unsubscribe();
  }, []);

  const createTodo = async () => {
    await client.models.Todo.create({
      content: input,
      isDone: false,
    });
    setInput('');
  };

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add a new todo"
      />
      <button onClick={createTodo}>Add</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.content}</li>
        ))}
      </ul>
    </div>
  );
}

3. S3 ファイルアップロード + DynamoDB メタデータ管理

'use client';

import { uploadData } from 'aws-amplify/storage';
import { generateClient } from 'aws-amplify/data';

export default function DocumentUpload() {
  const client = generateClient();

  const handleUpload = async (file: File) => {
    // S3 にアップロード
    const uploadResult = await uploadData({
      path: `documents/${file.name}`,
      data: file,
    });

    // DynamoDB に メタデータ記録
    await client.models.Document.create({
      fileName: file.name,
      size: file.size,
      s3Key: uploadResult.key,
      uploadedAt: new Date().toISOString(),
    });
  };

  return (
    <input
      type="file"
      onChange={(e) => {
        if (e.target.files) handleUpload(e.target.files[0]);
      }}
    />
  );
}

4. PR Preview 環境での自動テスト

# amplify.yml
frontend:
  phases:
    build:
      commands:
        - npm run build
    test:
      commands:
        - npm run test:e2e

5. マルチテナント SaaS（Organization ごとにデータ分離）

// amplify/data/resource.ts
const schema = a.schema({
  Organization: a.model({
    id: a.id(),
    name: a.string().required(),
    members: a.hasMany('Member', 'organizationId'),
  })
  .authorization((allow) => [
    allow.groups(['admin']).to(['create', 'update']),
    allow
      .authenticated()
      .groupsClaim('orgId')
      .groups(['{orgId}'])
      .to(['read', 'update']),
  ]),

  Member: a.model({
    id: a.id(),
    organizationId: a.id(),
    organization: a.belongsTo('Organization', 'organizationId'),
    userId: a.string(),
  })
  .authorization((allow) => [
    allow.owner(),
  ]),
});

6-10. その他ユースケース

6. ブログプラットフォーム（Post + Comment + Search）
7. **モバイルアプリ（React Native）**で同じバックエンドを共有
8. 分析ダッシュボード（Kinesis + QuickSight 連携）
9. リアルタイムチャット（GraphQL Subscriptions）
10. サーバーレス webhook ハンドラ（Lambda 関数）

設定・操作の具体例（CLI/SDK/IaC）

AWS CLI での操作

# 1. Amplify アプリを作成（AWS Management Console と同期）
amplify add auth      # 認証追加
amplify add api       # GraphQL API 追加
amplify add storage   # S3 ストレージ追加

# 2. ローカルで確認
amplify sandbox       # ローカル開発環境起動

# 3. デプロイ
amplify deploy        # AWS にデプロイ

# 4. 環境の確認
amplify status        # 現在の状態確認
amplify logs          # CloudWatch logs 確認

AWS CDK での Infrastructure as Code

# amplify_stack.py
from aws_cdk import (
    aws_amplify_alpha as amplify,
    aws_codecommit as codecommit,
    aws_secretsmanager as secrets,
    core
)

class AmplifyStack(core.Stack):
    def __init__(self, scope: core.Construct, id: str, **kwargs):
        super().__init__(scope, id, **kwargs)

        # GitHub リポジトリ接続
        repo = codecommit.Repository.from_repository_arn(
            self, "Repo",
            repository_arn="arn:aws:codecommit:us-east-1:123456789012:my-repo"
        )

        # Amplify App
        app = amplify.App(self, "MyApp",
            source_code_provider=amplify.CodeCommitSourceCodeProvider(
                repository=repo
            ),
            platform=amplify.Platform.WEB_COMPUTE  # Compute-enabled
        )

        # main ブランチ（本番）
        main_branch = amplify.Branch(self, "MainBranch",
            app=app,
            branch_name="main",
            auto_build_enabled=True,
            performance_mode_enabled=True
        )

        # develop ブランチ（ステージング）
        dev_branch = amplify.Branch(self, "DevBranch",
            app=app,
            branch_name="develop",
            auto_build_enabled=True
        )

        # カスタムドメイン
        amplify.Domain(self, "Domain",
            app=app,
            domain_name="example.com"
        )

UI ライブラリ・UI Builder

Amplify UI React

Amplify 公式の UI コンポーネントライブラリ。

// src/components/AuthUI.tsx
import {
  Authenticator,
  useAuthenticator,
  Button,
  Card,
  Heading,
} from '@aws-amplify/ui-react';

export function AuthUI() {
  const { user, signOut } = useAuthenticator();

  return (
    <Card>
      <Heading level={1}>Welcome, {user.username}</Heading>
      <Button onClick={signOut}>Sign Out</Button>
    </Card>
  );
}

Amplify Studio（UI ビジュアルビルダー）

GUI でバックエンドモデルとフォームを自動生成。

Amplify Studio Console
├─ Models（データモデル）
│   └─ Post、Comment を定義
├─ Forms（自動生成フォーム）
│   └─ CreatePostForm、EditPostForm
├─ Pages（レイアウト）
│   └─ HomePage、AdminPage
└─ Export → TypeScript コンポーネント

PR Preview・ブランチベース環境

Git Flow
├─ main ブランチ
│   └─ https://example.amplify.app（本番）
├─ develop ブランチ
│   └─ https://develop.example.amplify.app（ステージング）
└─ feature/new-feature ブランチ
    └─ https://pr-123.example.amplify.app（PR Preview）

メリット：

• マージ前に本番同等環境でテスト可能
• リビュアーが実際の動作を確認
• 自動的に環境がプロビジョニング / 削除（無駄なコスト防止）

パフォーマンス最適化・CDN 設定

Image Optimization

// Next.js Image Component
import Image from 'next/image';

export default function ProductImage() {
  return (
    <Image
      src="/product.jpg"
      alt="Product"
      width={800}
      height={600}
      quality={80}
      priority // LCP 最適化
    />
  );
}

// Amplify がネイティブサポート
// → 自動 WebP 変換、リサイズ、キャッシュ

CDN キャッシュ設定

# amplify.yml
frontend:
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*

# CloudFront キャッシュ動作
index.html: 0秒（常に最新）
_next/static/*: 31536000秒（1年キャッシュ）
api/*: 0秒（常に最新）

類似サービス比較表

ベストプラクティス

DO（すべき）

DON’T（してはいけない）

トラブルシューティング表

2025-2026 最新動向

Amplify Gen 2 の進化（2025 年）

新機能：

• Edge Runtime 対応：Cloudflare Workers / Lambda@Edge でバックエンド実行
• SQLite on Edge：エッジで SQL クエリ実行（コールドスタート削減）
• AI/Bedrock 統合：amplify add ai で生成 AI バックエンド自動構築

// 2025 年の例
const backend = defineBackend({
  auth,
  data,
  ai: defineAI({
    model: 'claude-3',
    maxTokens: 1024,
  }),
});

// フロントエンド
const result = await client.ai.generateText({
  prompt: 'Write a blog post about Amplify',
});

Image Optimization の高度化（2025 年末）

改善：

• AVIF フォーマット自動サポート（WebP より 20% 小さい）
• 動的サイズ調整（デバイス幅に応じて自動）
• キャッシュ最適化（CDN キャッシュレイヤー 3 段階）

Real-time Data Sync（2026 年）

機能：

• Conflict resolution（複数クライアント同時編集で自動マージ）
• Offline support（ネットワークなしでもローカルで操作可能、復帰時に自動同期）
• Event streaming（DynamoDB Streams 統合でリアルタイム イベント処理）

// 2026 年の例
const result = await client.models.Document.update({
  id: '123',
  content: 'Updated content',
}, {
  conflictResolution: 'autoMerge',  // 自動マージ
  offline: true,  // オフラインサポート
});

学習リソース・参考文献

AWS 公式ドキュメント

AWS Blog & Workshop

コミュニティリソース

実装例・導入ロードマップ

Phase 1: セットアップ（Week 1）

# Step 1: プロジェクト作成
npx create-amplify@latest my-app --framework next
cd my-app

# Step 2: バックエンド定義
amplify add auth
amplify add data
amplify add storage

# Step 3: ローカル開発
npx ampx sandbox

# Step 4: フロントエンド実装
npm run dev

Phase 2: Git 連携・CI/CD（Week 2）

# GitHub に プッシュ
git push origin main

# Amplify Console で接続
# → 自動デプロイ開始
# → PR Preview 環境自動生成

Phase 3: 本番対応・最適化（Week 3-4）

# カスタムドメイン
amplify update hosting

# 環境変数設定
# λ.env.production

# パフォーマンス最適化
npm run lighthouse  # PageSpeed Insights スコア確認

Phase 4: 運用・スケーリング（Ongoing）

• Weekly: PR Preview テスト + merge
• Monthly: CloudWatch メトリクス確認（DynamoDB / Lambda）
• Quarterly: Amplify Gen 2 への新機能評価

実装チェックリスト

初期セットアップ

• [ ] Node.js 18.0+ インストール確認
• [ ] AWS CLI 認証情報設定
• [ ] npx create-amplify@latest で プロジェクト作成
• [ ] amplify add auth で Cognito 構成
• [ ] amplify add data で GraphQL API 構成
• [ ] amplify add storage で S3 構成

ローカル開発

• [ ] npx ampx sandbox で ローカル環境起動
• [ ] localhost:3000 でフロントエンド動作確認
• [ ] localhost:3000/graphql で Apollo Studio 起動確認
• [ ] GraphQL クエリ・ミューテーション実行テスト

Git 連携

• [ ] GitHub リポジトリ作成
• [ ] Amplify Console で GitHub 接続
• [ ] main ブランチ → 本番環境マッピング
• [ ] develop ブランチ → ステージング環境マッピング

本番デプロイ

• [ ] npm run build でビルド成功
• [ ] CloudFront キャッシュ設定
• [ ] カスタムドメイン設定 + SSL/TLS
• [ ] Cognito コールバック URL 設定（本番ドメイン）
• [ ] 環境変数設定（Amplify Console 経由）

セキュリティ

• [ ] Cognito MFA 有効化
• [ ] Authorization ポリシー確認（GraphQL schema）
• [ ] Environment Variables を Secrets Manager で管理
• [ ] S3 bucket policy で公開 / 保護を明確化
• [ ] CloudTrail で API 監査ログ有効化

監視・ロギング

• [ ] CloudWatch Logs で Lambda エラーログ確認
• [ ] CloudWatch メトリクス（DynamoDB WCU / RCU）監視
• [ ] AppSync API ログ有効化
• [ ] 異常アラート設定（DynamoDB スロットリング等）

コスト・プライシング

課金項目

コスト削減戦略

無料枠

• Amplify Hosting：毎月 1,000 ビルド分、15 GB 配信
• AppSync：最初 25 万リクエスト / 月 無料
• DynamoDB：最初 25 GB ストレージ、25 WCU、25 RCU / 月 無料（1 年間）
• Lambda：毎月 1 百万リクエスト、40万 GB-秒 無料
• Cognito：最初 50,000 MAU 無料（無期限）

まとめ

AWS Amplify は、フロントエンド開発者が AWS バックエンドの複雑性を隠蔽しながら、フルスタックアプリを高速開発・デプロイできるプラットフォームです。

核となる価値

1. Code-First Backend：TypeScript でバックエンド定義。IaC による版管理・自動テスト対応
2. 統合 CI/CD：Git push でフロント + バック同時デプロイ。PR Preview で本番同等環境確認
3. 型安全な GraphQL：スキーマから自動型生成。IDE サポート・リファクタリング容易
4. AWS エコシステム深統合：Cognito / DynamoDB / S3 / Lambda がネイティブ統合。複雑な設定ゼロ
5. スケーラビリティ：マネージドサービスがデフォルトでオートスケール。運用負担ゼロ

推奨される組織

• Next.js / React をメイン開発言語とするチーム
• フルスタック開発が必要だが、バックエンド エキスパートが少ない
• AWS エコシステムを活用したい企業
• スタートアップで MVP を迅速リリースしたい
• CI/CD パイプラインを統一管理したい

導入の First Step

1. npx create-amplify@latest で 新規プロジェクト開始
2. amplify add auth / data / storage でバックエンド構成
3. npx ampx sandbox でローカル開発（2 分で完成）
4. GitHub に push して CI/CD 有効化
5. PR Preview で本番同等環境テスト

Amplify Gen 2 は「フロントエンド開発者の生産性」を 5 倍に引き上げるプラットフォーム。AWS 初心者でも 1 週間でフルスタック MVP が完成します。

最終更新：2026-04-26 バージョン：v2.0