amplify-workflow

AWS Amplify Gen2

AWS Amplify Gen2 の TypeScript によるコードファーストアプローチを使用して、フルスタックアプリケーションを構築、デプロイします。このスキルでは、バックエンドリソースの作成、8 つのフレームワークにわたるフロントエンド連携、デプロイのワークフローを扱います。

前提条件

• Node.js ^18.19.0 || ^20.6.0 || >=22 および npm
• AWS 認証情報が設定されていること（aws sts get-caller-identity が成功すること）
• サンドボックスの場合：npx ampx --version が有効なバージョンを返すこと
• モバイルの場合：プラットフォーム固有のツール（Xcode、Android Studio、Flutter SDK）

デフォルトと前提

ユーザーがフレームワークを指定しない場合：

• Web： React（Vite）をデフォルトにすることを推奨し、その選択理由を説明してください。
• モバイル： ユーザーが希望するプラットフォーム（Flutter、Swift、Android、React Native）を必ず確認してください。すべてに適用できるモバイルのデフォルトはありません。
• どちらも未指定： ユーザーが Web かモバイルかを明確にせずに「アプリを作って」と言った場合、作業を進める前に必ず確認してください。
• バックエンドのみ： バックエンドの変更のみが求められており、フロントエンドのフレームワークが指定されていない場合は、フロントエンド連携の手順を完全に省略してください。

ユーザーがツールや方針を指定しない場合：

• パッケージマネージャー： ユーザーが yarn または pnpm を指定しない限り、npm をデフォルトにすることを推奨します。
• 言語： TypeScript をデフォルトにすることを推奨します。Gen2 バックエンドは TypeScript のみです。フロントエンドでは、プロジェクトで既に使用されている言語に従うことを推奨します。
• Next.js： ユーザーが Pages Router を指定しない限り、App Router をデフォルトにすることを推奨します。
• React Native： Expo と bare React Native CLI のどちらを使用するか、ユーザーに確認してください。
• 認証： ユーザーが希望するログイン方法（メールアドレス／パスワード、ソーシャルログイン、SAML、パスワードレスなど）を必ず確認してください。デフォルトを仮定しないでください。
• データ認可： デフォルトは publicApiKey（allow.publicApiKey()）です。これはスターターテンプレートのデフォルトです。認証を追加する際は、所有者ベース（allow.owner()）に切り替え、defaultAuthorizationMode: 'userPool' を設定してください。

クイックスタート — 適切なリファレンスを選ぶ

ステップ 0：コアリファレンスを読む（必須）

他のリファレンスファイルを読む前に、対象プラットフォームのコアリファレンスを必ず読んでください。ここには Gen2 の検出方法、フレームワークごとの Amplify.configure() の配置場所、サンドボックスのコマンド、必須パッケージ、ディレクトリ構成のルールが記載されています。これらは新規プロジェクトだけでなく、あらゆるタスクに必要なパターンです。

• Web（React、Next.js、Vue、Angular、React Native）：core-web.md を必ず読んでください。
• モバイル（Flutter、Swift、Android）：core-mobile.md を必ず読んでください。
• バックエンドのみ（フロントエンドの作業なし）：ステップ 1 に進んでください。

ステップ 1：タスクの種類を特定する

タスク	移動先
新規プロジェクトを作成する	→ scaffolding.md、続いてステップ 2 および／またはステップ 3
バックエンド機能を追加または変更する	→ ステップ 2（バックエンド機能）
フロントエンドを既存のバックエンドに接続する	→ ステップ 3（フロントエンド連携）
アプリケーションをデプロイする	→ deployment.md

ステップ 2：バックエンド機能

バックエンド機能ごとに、対応するリファレンスを必ず確認してください。

機能	リファレンス	使用する場面
認証	auth-backend.md	メールアドレス／パスワード、ソーシャルログイン、MFA、SAML／OIDC
データモデル	data-backend.md	GraphQL スキーマ、DynamoDB、リレーションシップ、認証ルール
ファイルストレージ	storage-backend.md	S3 のアップロード／ダウンロード、アクセスルール
関数と API	functions-and-api.md	Lambda、カスタムリゾルバー、REST／HTTP API、クライアントからの呼び出し
AI 機能	ai.md	会話、生成、Bedrock 経由の AI ツール（バックエンド設定と React／Next.js フロントエンド）
Geo、PubSub、CDK	advanced-features.md	バックエンドのみ：カスタム CDK スタック、オーバーライド、カスタム出力。バックエンドとフロントエンド：Geo、PubSub、Face Liveness

各バックエンド機能のファイルは、それぞれ単独で完結しています。必要なものだけを読み込んでください。

ルーティングに関する注意： これらのファイルは、機能の追加と変更の両方に適用されます。ユーザーが「認証を追加」と言っても「認証設定を変更」と言っても、同じファイルにルーティングしてください。各リファレンスには、定義可能な項目がすべて記載されています。

ステップ 3：フロントエンド統合

バックエンドリソースを設定したら、フロントエンドに接続します。プラットフォームと機能に応じて選択してください。

Web（React、Next.js、Vue、Angular、React Native）：

機能	リファレンス
認証 UI とフロー	auth-web.md
データの CRUD とサブスクリプション	data-web.md
ストレージのアップロード／ダウンロード	storage-web.md

モバイル（Flutter、Swift、Android）：

機能	リファレンス
認証 UI とフロー	auth-mobile.md
データの CRUD とサブスクリプション	data-mobile.md
ストレージのアップロード／ダウンロード	storage-mobile.md

注： AI と Functions のフロントエンドパターンは、それぞれ ai.md と functions-and-api.md に含まれています。Web／モバイル別のファイルには分かれていません。

コアコンセプト

Amplify Gen2 アーキテクチャ

• コードファースト： すべてのバックエンドリソースは amplify/ 配下で TypeScript を使って定義します
• メイン設定： amplify/backend.ts は defineBackend() を介してすべてのリソースをインポートし、統合します
• リソースファイル： amplify/auth/resource.ts、amplify/data/resource.ts、amplify/storage/resource.ts、amplify/functions/<name>/resource.ts
• 生成される出力： amplify_outputs.json — フロントエンドの Amplify.configure() が使用します。Git の追跡対象外 — npx ampx sandbox（ローカル開発）または npx ampx pipeline-deploy（CI/CD）で生成され、コミットされることはありません。

ディレクトリ構成

project-root/
├── amplify/
│   ├── backend.ts            # defineBackend({ auth, data, ... })
│   ├── auth/resource.ts      # defineAuth({ ... })
│   ├── data/resource.ts      # defineData({ schema })
│   ├── storage/resource.ts   # defineStorage({ ... })
│   └── functions/
│       └── my-func/
│           ├── resource.ts   # defineFunction({ ... })
│           └── handler.ts    # export const handler = ...
├── src/                      # Frontend code
├── amplify_outputs.json      # Generated — DO NOT edit or commit (gitignored)
└── package.json

主要な API

パッケージ	目的
@aws-amplify/backend	defineAuth、defineData、defineStorage、defineFunction、defineBackend
aws-amplify	フロントエンド: Amplify.configure()、generateClient()、認証/データ/ストレージ API
@aws-amplify/ui-react	すぐに使える UI: <Authenticator>、<StorageBrowser>
@aws-amplify/ui-react-ai	AI UI: <AIConversation>、useAIConversation

ドキュメントとリソースの検証

AWS ドキュメント (高度な CDK コンストラクト、サービスの制限、 プロバイダー固有の認証設定) が必要な場合:

1. AWS ドキュメントツールが利用可能な場合 (例: AWS MCP 経由)、それらを使用して 関連するドキュメントページを検索および取得するべきです。
2. AWS ドキュメントツールが利用できない場合、リソースの検証には Web 検索または aws CLI にフォールバックする必要があります。

なぜ条件付きなのか: Amplify Gen2 はコードファーストです — 主要なワークフローは TypeScript ファイルを編集し、npx ampx コマンドを実行することです。AWS MCP ツールは デプロイ後の検証には役立ちますが、必須ではありません。

セキュリティに関する考慮事項

• すべての認証情報と API キーには secret() を使用してください — 機密値のハードコードやプレーンな環境変数の使用は決して行わないでください
• allow.guest() の公開範囲を慎重に検討してください — ゲストアクセスはデフォルトで有効になっており、未認証ユーザーに IAM 認可されたリソースへのアクセスを許可します
• IAM ポリシーは特定のリソース ARN にスコープを限定してください — 本番環境では resources: ['*'] を避けてください
• シークレットをログに記録したり、エラーメッセージに含めたりしないでください
• Amplify でデプロイされたリソースを監視するために CloudTrail と CloudWatch アラームを有効にしてください。S3、AppSync、API Gateway でアクセスログを有効にしてください
• Web アプリのセキュリティヘッダーを設定してください — amplify.yml の customHeaders を介して CSP、HSTS、X-Frame-Options、X-Content-Type-Options を設定します
• 多層防御のために、公開向けの AppSync API と API Gateway エンドポイントに AWS WAF をアタッチしてください
• 悪用を防ぐために、API Gateway と AppSync API でスロットリングとレート制限を有効にしてください
• CI/CD パイプラインと Lambda 実行ロールには、一時的な認証情報を持つ IAM ロールを使用してください — 長期間有効なアクセスキーは決して使用しないでください
• PII、トークン、シークレットを含む可能性がある CloudWatch Logs グループは KMS (aws:kms) で暗号化してください。ログ保持ポリシーを有効にしてください
• エッジで不正な入力を拒否するために、AppSync スキーマ検証と API Gateway リクエストバリデーターを有効にしてください
• Amplify Hosting のカスタムドメインには ACM 管理の TLS 証明書を使用してください — デプロイ設定の customDomain を介して設定します

リンク

すべてのドキュメントリンクでは、デフォルトのプラットフォームスラッグとして react を使用しています。URL 内の /react/ を、対象のフレームワークに置き換えてください。

フレームワーク	スラッグ
React	react
Next.js	nextjs
Vue	vue
Angular	angular
React Native	react-native
Flutter	flutter
Swift	swift
Android	android

• LLM 向け Amplify ドキュメント
• Amplify ドキュメント
• Gen2 ドキュメント
• 利用開始
• クイックスタート
• アカウントのセットアップ
• Amplify の仕組み
• コアコンセプト
• バックエンドの構築
• デプロイとホスティング
• トラブルシューティング
• CLI コマンド
• Amplify Outputs
• プロジェクト構成
• Amplify UI