Name:
interface
Value:
Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

ガイド付きワークフロー

AWS MCP Server には、複雑な Amplify 開発タスクを通じて AI コーディング アシスタントをガイドする事前構築されたワークフロー (AWS の用語では「Agent SOPs」と呼ばれます) が含まれています。これらのワークフローはベストプラクティスをエンコードし、一貫性のある本番環境対応の実装を保証します。

このページでは、利用可能な 3 つの主要なワークフローについて説明し、それらを効果的に使用する方法を示します。

利用可能なワークフロー

AWS MCP Server は、Amplify 開発のさまざまなステージ向けに設計された 3 つの事前構築されたワークフローを提供します。これらのワークフローは新規プロジェクトと既存プロジェクトの両方で機能します。

ワークフロー目的
バックエンド実装新規または既存のバックエンドで認証、データモデル、ストレージ、関数、AI 機能を追加または変更
フロントエンド統合既存のフロントエンド アプリに Amplify を追加するか、既に Amplify を使用しているアプリを強化
デプロイメント ガイドサンドボックス環境、本番環境デプロイメント、および任意の Amplify プロジェクトの CI/CD を構成

バックエンド実装ワークフロー

バックエンド実装ワークフローは、ベストプラクティスに従って Amplify バックエンド機能を追加または変更するのに役立ちます。最初から開始する場合でも、既存の Amplify バックエンドに機能を追加する場合でも、このワークフローは実装をガイドします。

サポート機能

認証 (Auth)

ワークフローは、次を含む Amplify 認証のセットアップをガイドします。

  • サインアップおよびサインインフローの構成
  • 多要素認証 (MFA) のセットアップ
  • ソーシャル サインイン プロバイダー (Google、Facebook、Apple、Amazon) の構成
  • 認証 UI コンポーネントのカスタマイズ
  • パスワード ポリシーとアカウント回復の実装

プロンプト例:

メール サインインと Google ソーシャル ログインで Amplify 認証をセットアップするようにガイドしてください。
データ モデリング (Data)

ワークフローは、データレイヤーの設計と実装を支援します。

  • 適切な関係を持つ GraphQL スキーマの作成
  • データ アクセスの認可ルールのセットアップ
  • リアルタイム サブスクリプションの構成
  • 楽観的 UI 更新の実装
  • オフライン シナリオの競合解決のセットアップ

プロンプト例:

投稿、コメント、ユーザー プロフィールを持つブログの Amplify ベストプラクティスに従う
データ モデルを作成するのを手伝ってください。投稿は作成者のみが編集可能である必要があります。
ファイル ストレージ (Storage)

ワークフローはストレージ実装をガイドします。

  • 適切なアクセス制御を使用した S3 バケットの構成
  • ファイルのアップロードおよびダウンロード機能のセットアップ
  • アクセス レベルの実装 (パブリック、保護、プライベート)
  • ファイル検証とサイズ制限の構成

プロンプト例:

ユーザーが 5MB の制限でプロフィール画像をアップロードできるようにファイル ストレージを
追加するプロセスをウォークスルーしてください。
サーバーレス関数 (Functions)

ワークフローは Lambda 関数の作成とデプロイメントを支援します。

  • 関数トリガーのセットアップ (API、スケジュール、イベント駆動)
  • 環境変数とシークレットの構成
  • 共有コード用の関数レイヤーの実装
  • 適切な IAM アクセス許可のセットアップ

プロンプト例:

新しいユーザーがサインアップするとウェルカム メールを送信する Lambda 関数を
作成するようにガイドしてください。
AI 機能 (AI)

ワークフローは AI/ML 機能統合をガイドします。

  • 生成 AI 用の Amazon Bedrock のセットアップ
  • テキスト生成と要約の実装
  • 画像分析機能の追加
  • 会話フローの構成

プロンプト例:

生成 AIAmplify ベストプラクティスに従う AI 要約機能を追加するのを
手伝ってください。

フロントエンド統合ワークフロー

フロントエンド統合ワークフローは、Amplify をフロントエンド アプリケーションに追加したり、既存の Amplify 統合を強化するのに役立ちます。Amplify が必要な既存の React、Vue、Angular、またはモバイル アプリがある場合でも、既に Amplify を使用しているアプリに新機能を追加する場合でも、このワークフローはフレームワーク固有のパターンとベストプラクティスを提供します。

フレームワーク パターン

ワークフローはフロントエンド フレームワークに基づいてガイダンスを適応させます。

React と Next.js
  • Amplify クライアント ライブラリのセットアップ
  • 認証状態に React フックを使用
  • 適切なローディング状態でのデータ取得の実装
  • Next.js のサーバーサイド レンダリング (SSR) の構成
  • Amplify UI コンポーネントの使用

プロンプト例:

ベストプラクティスに従う AmplifyReact アプリを接続するのを手伝ってください。
サインイン ページと保護されたルートが必要です。
Vue と Angular
  • フレームワーク固有のパターンで Amplify を構成
  • 認証ガードと状態管理の実装
  • Amplify Data でのデータ バインディングのセットアップ
  • フレームワークに適切な UI コンポーネントの使用

プロンプト例:

保護されたダッシュボード ルートを使用して Vue アプリで Amplify をセットアップ
するようにガイドしてください。
React Native
  • モバイル開発用の Amplify の構成
  • トークンのセキュア ストレージの実装
  • プッシュ通知のセットアップ
  • DataStore でのオフライン シナリオの処理

プロンプト例:

Amplify ベストプラクティスに従う React Native アプリへのオフライン サポートの
追加をウォークスルーしてください。
Flutter
  • Amplify Flutter パッケージのセットアップ
  • 認証フローの実装
  • API とストレージ アクセスの構成
  • Flutter 用 Amplify UI コンポーネントの使用

プロンプト例:

Amplify Authenticator ウィジェットを使用して Flutter アプリで認証をセットアップ
するのを手伝ってください。
Swift (iOS)
  • Amplify Swift パッケージの構成
  • Amplify 操作の async/await パターンの実装
  • リアルタイム更新用の Combine パブリッシャーのセットアップ
  • Amplify での SwiftUI の使用

プロンプト例:

Amplify ベストプラクティスに従う SwiftUI アプリへのリアルタイム データ同期の
追加をガイドしてください。
Android (Kotlin)
  • Amplify Android ライブラリのセットアップ
  • 非同期操作用のコルーチンの実装
  • Amplify での Jetpack Compose の構成
  • Amplify での Android ライフサイクルの処理

プロンプト例:

ユーザー認証を使用して Kotlin Android アプリを Amplify に接続するようにガイド
してください。

デプロイメント ガイド ワークフロー

デプロイメント ガイド ワークフローは、ローカル開発から本番環境までのさまざまなステージを通じて Amplify アプリケーションをデプロイするのに役立ちます。これは新規プロジェクト、およびデプロイメント構成または CI/CD セットアップが必要な既存アプリケーションで機能します。

サンドボックス環境

ワークフローは開発用の個人クラウド サンドボックス環境のセットアップをガイドします。

  • 分離されたサンドボックス環境の作成
  • バックエンド変更のホット リロードの構成
  • サンドボックス ライフサイクルの管理
  • サンドボックス構成をチーム メンバーと共有

プロンプト例:

バックエンド変更をテストするための Amplify サンドボックス環境をセットアップ
するようにガイドしてください。

本番環境デプロイメント

ワークフローは本番環境へのデプロイメントを支援します。

  • 本番環境対応の設定の構成
  • カスタム ドメインのセットアップ
  • 異なるステージの環境変数の実装
  • 監視とログの構成

プロンプト例:

カスタム ドメイン付きで Amplify アプリを本番環境にデプロイするようにウォークスルー
してください。

CI/CD 統合

ワークフローは継続的インテグレーションとデプロイメントのセットアップをガイドします。

  • 自動デプロイメント用の Amplify ホスティングの構成
  • ブランチ ベースのデプロイメント (プレビュー、ステージング、本番環境) のセットアップ
  • プル リクエスト プレビューの実装
  • ビルド設定と環境変数の構成

プロンプト例:

main にプッシュするとアプリが自動的にデプロイされるように CI/CDAmplify
ベストプラクティスに従ってセットアップするのを手伝ってください。

実践例: フルスタック アプリの構築

以下は、AWS MCP Server を使用して完全な Amplify アプリケーションを構築する方法の例です。これは、事前構築されたワークフローが AI アシスタントを各ステップでどのようにガイドするかを示します。

ステップ 1: バックエンドをセットアップする

アプリケーションについて AI アシスタントに説明することで開始します。

Amplify ベストプラクティスに従うタスク管理アプリを構築するのを手伝ってください。
ユーザーは以下ができる必要があります:
- メールでサインアップしてサインインする
- 自分のタスクを作成、編集、削除する
- タスクを完了としてマークする
- デバイス間でリアルタイムでタスクを確認する

AI アシスタントはバックエンド実装ワークフローを使用して:

  1. メール サインインで認証を構成する
  2. 適切な認可ルールを使用してタスク データ モデルを作成する
  3. タスク更新のリアルタイム サブスクリプションをセットアップする

ステップ 2: フロントエンドを接続する

次に、アシスタントにフロントエンドを接続するよう依頼します。

React アプリを Amplify バックエンドに接続するようにガイドしてください。
サインイン ページと、リアルタイム更新を表示するダッシュボードが必要です。

AI アシスタントはフロントエンド統合ワークフローを使用して:

  1. Amplify ライブラリをインストールして構成する
  2. Authenticator コンポーネントをセットアップする
  3. タスク用のデータ取得フックを作成する
  4. UI でのリアルタイム更新を実装する

ステップ 3: アプリケーションをデプロイする

最後に、アプリケーションをデプロイします。

GitHub にプッシュするとアプリが自動的にデプロイされるように Amplify デプロイメント
をセットアップするようにウォークスルーしてください。プル リクエストのプレビュー
デプロイメントも必要です。

AI アシスタントはデプロイメント ガイド ワークフローを使用して:

  1. GitHub リポジトリを Amplify ホスティングに接続する
  2. ブランチ ベースのデプロイメントを構成する
  3. プル リクエスト プレビューをセットアップする
  4. 本番環境の設定を構成する

効果的なプロンプトのコツ

AWS MCP Server から最良の結果を得るには、これらのコツを念頭に置いてください。

要件について具体的に説明してください。 「認証を追加」ではなく、「メール サインイン、Google ソーシャル ログイン、MFA を使用した認証を追加」と試してください。

  • 必要なユーザー エクスペリエンスを説明してください。技術的実装ではなく
  • フレームワークについて言及してください。ワークフローがフレームワーク固有のガイダンスを提供できるように
  • フォロー アップの質問をしてください (ステップについて明確にしたい場合)
  • 説明をリクエストしてください (特定のパターンが推奨される理由を理解したい場合)

オプション: チーム向けのステアリング ファイル

すべての開発者間の保証された一貫性のために、AI がワークフローを常に使用するよう指示するステアリング ファイルを追加できます。

Amazon Kiro (IDE/CLI)

.kiro/steering/amplify.md にステアリング ファイルを作成します。

.kiro/steering/amplify.md
# Amplify 開発ガイドライン
Amplify プロジェクトで作業する場合、AWS MCP Server ガイド付きワークフローを使用してください。
- バックエンド機能 (認証、データ、ストレージ、関数、AI) の場合、`amplify-backend-implementation``retrieve_agent_sop` を呼び出してください
- フロントエンド統合の場合、`amplify-frontend-integration``retrieve_agent_sop` を呼び出してください
- デプロイメント タスクの場合、`amplify-deployment-guide``retrieve_agent_sop` を呼び出してください
Claude (Code/Desktop)

プロジェクト ルートの CLAUDE.md ファイルに追加します。

CLAUDE.md
# Amplify 開発ガイドライン
Amplify プロジェクトで作業する場合、AWS MCP Server ガイド付きワークフローを使用してください。
- バックエンド機能 (認証、データ、ストレージ、関数、AI) の場合、`amplify-backend-implementation``retrieve_agent_sop` を呼び出してください
- フロントエンド統合の場合、`amplify-frontend-integration``retrieve_agent_sop` を呼び出してください
- デプロイメント タスクの場合、`amplify-deployment-guide``retrieve_agent_sop` を呼び出してください
Cursor

.cursor/rules/amplify.mdc にルール ファイルを作成します。

.cursor/rules/amplify.mdc
---
description: Amplify 開発ガイドライン
globs:
- "amplify/**"
- "src/**"
---
# Amplify 開発ガイドライン
Amplify プロジェクトで作業する場合、AWS MCP Server ガイド付きワークフローを使用してください。
- バックエンド機能 (認証、データ、ストレージ、関数、AI) の場合、`amplify-backend-implementation``retrieve_agent_sop` を呼び出してください
- フロントエンド統合の場合、`amplify-frontend-integration``retrieve_agent_sop` を呼び出してください
- デプロイメント タスクの場合、`amplify-deployment-guide``retrieve_agent_sop` を呼び出してください

次のステップ

事前構築されたワークフローについて理解したので、次の Amplify プロジェクトで使用してみてください。

  1. まだセットアップしていない場合は AWS MCP Server をセットアップしてください
  2. 構築したいものについて AI アシスタントと会話を始めてください
  3. 事前構築されたワークフローが実装をガイドできるようにしてください

特定の Amplify 機能の詳細については、ドキュメントを参照してください。