はじめに
最近、AI エージェントを簡単に構築・デプロイできるツールが増えてきたと思います。
ただ、IaC化やフロントエンドへの組み込みに苦労することも多いのではないでしょうか。
この記事では、Amplify Gen 2 と CDK を用いて Amazon Bedrock AgentCore を活用した
AI エージェント機能を持つ Web アプリケーションを効率的に構築する方法を紹介します。
本記事では、Amplify Gen 2 の CDK 統合周辺とプロジェクトのフォルダ構成・ファイル構成を中心に解説します。
実装の詳細なコード例については、以下をご参照ください。
プロジェクト概要
このプロジェクトは、Amplify Gen2, React, TypeScript で構築された Web アプリケーションです。以下のような構成になっています。
- フロントエンド: React + TanStack Router で AI チャット機能を提供
- バックエンド: Amplify Gen2をベースとして、Lambda 関数を使用して AgentCore を呼び出し
- AI エージェント: Amazon Bedrock AgentCore Runtime でコンテナ化されたエージェントを実行
主な特徴
- Amplify Gen 2 の CDK 統合で Infrastructure as Code を実現
- AWS SDK v3 を使用した AgentCore の呼び出し
- フロントエンドから簡単に AI エージェントを利用可能
プロジェクトのフォルダ構成
まず、プロジェクト全体のフォルダ構成を紹介します。
以下のような構造でバックエンドとフロントエンドを管理します。
amplify-gen2-agentcore/
├── amplify/ # Amplify バックエンド定義
│ ├── backend.ts # バックエンド設定（CDK 統合がメイン）
│ ├── package.json
│ ├── agent/ # AgentCore Runtime 用エージェント
│ │ ├── agent.py
│ │ ├── Dockerfile
│ │ └── requirements.txt
│ ├── data/ # GraphQL API 定義
│ │ └── resource.ts
│ └── functions/ # Lambda 関数
│ └── invoke-agent/
│ ├── handler.ts # Lambda ハンドラー
│ └── resource.ts # Lambda リソース定義
├── src/ # フロントエンド
│ ├── main.tsx
│ ├── components/
│ ├── routes/
│ └── util/
│ └── amplifyClient.ts. # フロントエンド呼び出し用
├── amplify_outputs.json # Amplify 設定（自動生成）
└── package.json
フォルダの役割
amplify/ ディレクトリ
Amplify Gen 2 のバックエンド定義がすべてここに集約されています。
-
backend.ts: バックエンド全体の構成を定義しています。ここで CDK を使用して AgentCore Runtime をデプロイします。 -
agent/: AgentCore Runtime で実行される Python エージェントとその Docker 設定です。 -
data/: GraphQL API のスキーマ定義。フロントエンドから呼び出す API を定義します。 -
functions/: Lambda 関数の実装。各関数はフォルダごとに管理されます。
src/ ディレクトリ
React で構築されたフロントエンドのコードです。
-
routes/: TanStack Router を使用したページコンポーネントです。 -
util/amplifyClient.ts: Amplify クライアントの初期化。GraphQL API を呼び出すために使用します。
Amplify Gen 2 の CDK 統合
Amplify Gen 2 では、backend.ts で CDK を直接使用してインフラを定義できます。
backend.ts の構成
amplify/backend.ts は、以下の役割を持ちます：
-
Amplify リソースの定義 -
defineBackend()で Data と Lambda 関数を登録 -
CDK スタックの作成 -
backend.createStack()で追加の CDK リソースをデプロイ - AgentCore Runtime のデプロイ - CDK Construct を使用して Runtime を作成
- IAM 権限の付与 - Lambda と Runtime 間の権限を設定
重要なコード部分の解説
1. 環境名の取得
const stack = backend.stack
const deploymentType = stack.node.tryGetContext('amplify-backend-type')
const envName = stack.node.tryGetContext('amplify-backend-name')
CDK コンテキストから環境情報を取得します。
sandbox(開発環境)や複数のデプロイ先でAgent Runtime の命名が重複するとエラーとなるので、環境名を使用して区別します。
2. AgentCore Runtime の作成
const agentStack = backend.createStack('AgentCoreStack')
const runtime = new agentcore.Runtime(agentStack, 'amplifyGen2AgentCore', {
runtimeName: `amplifyGen2AgentcoreRuntime${sanitizedEnvName}`,
agentRuntimeArtifact: agentcore.AgentRuntimeArtifact.fromAsset(assetPath),
description: `Deployed from local Dockerfile via Amplify Gen 2`,
})
backend.createStack() で新しい CDK スタックを作成し、その中で AgentCore Runtime を定義します。fromAsset() を使用することで、ローカルの Dockerfile から Runtime をビルド・デプロイできます。
3. IAM 権限の付与
// AgentCore に Bedrock モデル呼び出し権限を付与
runtime.addToRolePolicy(
new iam.PolicyStatement({
actions: ['bedrock:InvokeModel', 'bedrock:InvokeModelWithResponseStream'],
resources: ['*'],
}),
)
// Lambda に AgentCore 呼び出し権限を付与
runtime.grantInvokeRuntime(invokeAgentLambda)
CDK の便利なメソッドを使用して、必要な権限を自動で設定します。grantInvokeRuntime() により、Lambda が Runtime を呼び出すための IAM ポリシーが自動的に付与されます。
4. 環境変数の設定
backend.invokeAgent.addEnvironment('AGENT_RUNTIME_ARN', runtime.agentRuntimeArn)
Lambda 関数に Runtime の ARN を環境変数として渡します。これにより、Lambda から動的に Runtime を呼び出せるようになります。
環境別リソース命名
CDK コンテキストから取得した環境名を使用して、Runtime 名を自動生成します。
const sanitizedEnvName = envName?.replace(/[^a-zA-Z0-9]/g, '') ?? 'default'
const runtimeName = `amplifyGen2AgentcoreRuntime${sanitizedEnvName}`
各ファイルの役割
amplify/data/resource.ts
GraphQL API のスキーマを定義します。ユーザーからのプロンプトを受け取り、AI エージェントのレスポンスを返す invokeAgent クエリを定義しています。
amplify/functions/invoke-agent/handler.ts
Lambda 関数の実装です。環境変数から Runtime ARN を取得し、BedrockAgentCoreClient を使用して AgentCore を呼び出します。
amplify/functions/invoke-agent/resource.ts
Lambda 関数のリソース定義です。defineFunction() を使用して、関数名、エントリーポイント、タイムアウトなどを設定します。
amplify/agent/
AgentCore Runtime で実行される Python エージェントです。Dockerfile でコンテナ化され、Bedrock 上で実行されます
動作確認
実際に動かした結果をスクリーンショットで示します。
今回は、シンプルなエージェントを作成しましたが、
エージェントとMCPを連携させることでより複雑なタスクが実行できます。
まとめ
Amplify Gen 2と CDKを用いてAmazon Bedrock AgentCoreを統合することで、以下のようなメリットが得られます
- インフラ構築が簡単 - CDK で自動化
- スケーラブル - 環境ごとの自動リソース管理
これにより、チャットボット、Q&A システム、さまざまな AI エージェントを活用したサービスを効率的に構築できます。
今回、実際のエージェントの実装(Strands Agent)をPythonで行いましたが、TypeScriptがサポートされたので今後試したいと思います。