Amplify Gen2でAPI Gateway + Lambdaを設定して、Bedrockから回答をもらう
おはようございます!ベンジャミン木村です!
先日投稿したAPI Gateway + Lambda + Bedrockの構築をAmplify Gen2で全て構築できましたので、その内容を紹介したいと思います。
※今回はバックエンド部分の構築になります。フロントエンド部分は別途最後に紹介する記事をご参照ください。
目次
フォルダ構成
.
├── amplify
│ ├── backend.ts // ApiGatewayのコードと、Lambdaの一部設定コード
│ └── function
│ └── invoke-nomal-bedrock
│ ├── handler.ts // Lambdaの関数コード
│ └── resource.ts // Lambda設定コード
├── src
│ ├── ・・・
│ ・・・
├── public
│ └── vite.svg
├── dist
│ ├── ・・・
│ ・・・
├── node_modules
│ ├── ・・・
│ ・・・
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── package-lock.json
├── package.json
├── eslint.config.js
├── index.html
└── vite.config.ts
1. Amplify Gen2の立ち上げ
1-1. Reactのインストール
Vite(ヴィート)という高速で動作するビルドツールを使用し、TypeScriptとReactをセットアップします。
<APP名>
には任意の名前を入れてください。
npm create vite@latest <APP名> -- --template react-ts
※node.jsのインストールがまだでエラーとなる場合は、下記記事が大変わかりやすかったので、ご参照ください。
1-2. Reactの立ち上げ
ターミナルで下記コマンドを実行し、Reactが起動することを確認してください
cd <APP名>
npm install
npm run dev
1-3. Amplify Gen2をインストール
npm add --save-dev @aws-amplify/backend@latest @aws-amplify/backend-cli@latest @aws-sdk/client-bedrock-runtime
1-4. backend.tsの作成
下記フォルダとファイルを手動作成してください。
amplify/backend.ts
その後backend.tsに下記記述を記載します。
import { defineBackend } from '@aws-amplify/backend';
defineBackend({});
1-5. IAMユーザー(アクセスキー)の作成
下記手順に沿って、IAMユーザー(アクセスキー)の作成を行なってください。権限は必要に応じて絞った方がいいですが、今回はとりあえず検証ということでAdministratorAccessで実行します。
https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/access-keys-admin-managed.html
1-6. configの設定
項番1-5のアクセスキーを使って、AWSのアクセスキーをセットしてください。
aws configure --profile <プロファイル>
AWS Access Key ID [None]: ********
AWS Secret Access Key [None]: ********
Default region name [None]: ap-northeast-1
Default output format [None]: json
1-7. Sandboxの立ち上げ
Amplify Gen2ではSandboxという、本番環境に移行する前にバックエンドのリソースをテストできる一時的な環境を立ち上げることができます。
npx ampx sandbox --profile <プロファイル>
※Amplify Gen2が立ち上げたことのないアカウントでサンドボックスを立ち上げようとすると、Amplify Gen2の初期化が求められます。画面に表示される指示に従って、初期化を行ってください。
1-8. サンドボックス確認
サンドボックスが立ち上がっているかコンソールから確認ができます。
まず、下記URLよりAmplifyのコンソール画面へ移動し、「サンドボックスを管理」のボタンをクリックしてください。
https://ap-northeast-1.console.aws.amazon.com/amplify/apps
項番1-1でつけたApp名を含む名前のものがあれば、サンドボックスが立ち上がっていることが分かります。
2. Lambdaの構築
Amplify Gen2のサンドボックス立ち上げができたら、次にBedrockのAPIを利用するLambda関数を作成していきます。
2-1. Lambdaの構築
./amplify/function/invoke-bedrock/resource.tsファイルを作成し、resource.tsに下記のように記載してください。緑でハイライトしている<Lambda function名>は任意の名前で問題ございません。
import { defineFunction } from '@aws-amplify/backend';
export const invokeBedrock = defineFunction({
runtime: 20,
name: '<Lambda function名>',
entry: './handler.ts',
timeoutSeconds: 300,
})
コードの解説を下記にて記載します。
defineFunction
defineFunction
は、Lambda関数を定義するためのAmplify Gen2の関数です。関数のプロパティを設定して、どのようなLambdaを作成するか指定します。
runtime: 20
- Lambda関数のランタイムを指定しています。値の「20」はNode.js 20.xを示します。
name: '<Lambda function名>'
- Lambda関数の名前を指定するプロパティです。
entry: './handler.ts'
- Lambda関数のエントリーポイントを指定しています。
timeoutSeconds: 300
- Lambda関数の最大実行時間(タイムアウト)を指定しています。この場合、300秒(5分)経過すると、実行中のLambda関数がタイムアウトして強制終了されます。
ちなみに、この設定値は下記Amplify Gen2の公式ページを参考に作成しております。
Amplify Docs(Configure Functions)
https://docs.amplify.aws/react/build-a-backend/functions/configure-functions/
2-2. Lambda関数のコードを記述
./amplify/function/invoke-bedrock/handler.tsファイルを作成し、handler.tsに下記のように記載してください。今回はClaude3.5を呼び出すコードを記載しています。
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";
import { APIGatewayProxyResult } from 'aws-lambda';
interface LambdaEvent {
inputText: string;
}
// Bedrock API呼び出し用のクライアントを作成する
const bedrockRuntime = new BedrockRuntimeClient({ region: "us-east-1" }); // リージョンを適切に設定してください
export const handler = async (event: LambdaEvent): Promise<APIGatewayProxyResult> => {
try {
// Bedrock APIに渡す必要のある変数を事前に定義する
const accept = 'application/json';
const contentType = 'application/json';
const modelId = 'anthropic.claude-3-5-sonnet-20240620-v1:0';
const messages = [{ role: "user", content: event.inputText }];
const body = JSON.stringify({
anthropic_version: "bedrock-2023-05-31",
max_tokens: 1000,
messages: messages
});
// Bedrock APIをクライアントから実行する
const command = new InvokeModelCommand({
body: body,
modelId: modelId,
accept: accept,
contentType: contentType
});
const response = await bedrockRuntime.send(command);
const text = JSON.parse(Buffer.from(response.body).toString('utf8'));
return {
statusCode: 200,
headers: {
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
},
body: JSON.stringify(text)
};
} catch (error) {
console.error('Error:', error);
return {
statusCode: 500,
headers: {
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
},
body: JSON.stringify({ error: 'An error occurred while processing your request.' })
};
}
};
上記handlerのコードの解説を下記にて記載いたします。
- 変数の定義
const accept = 'application/json'; const contentType = 'application/json'; const modelId = 'anthropic.claude-3-5-sonnet-20240620-v1:0'; const messages = [{ role: "user", content: event.inputText }];
accept
とcontentType
はAPIリクエストとレスポンスの形式を指定するためのヘッダーです。messages
には、ユーザーからの入力をrole: "user"
として設定しています。この形式はChatGPTや類似のモデルが一般的に使用するメッセージ構造です。
- APIリクエストの構築
const body = JSON.stringify({ anthropic_version: "bedrock-2023-05-31", max_tokens: 1000, messages: messages });
body
には、Bedrock APIに送信するリクエストペイロードが含まれています。anthropic_version
はAPIのバージョン、max_tokens
は生成されるテキストの最大トークン数を指定しています。
- Bedrock APIの呼び出し
const command = new InvokeModelCommand({ body: body, modelId: modelId, accept: accept, contentType: contentType }); const response = await bedrockRuntime.send(command);
InvokeModelCommand
を使用して、定義したペイロードをBedrock APIに送信します。response
はAPIからの応答で、response.body
には結果が含まれており、これをBuffer
を使用して文字列に変換し、さらにJSON.parse
でデータを抽出しています。
- レスポンスの返却
return { statusCode: 200, headers: { 'Access-Control-Allow-Headers': 'Content-Type', 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'OPTIONS,POST,GET' }, body: JSON.stringify(text) }; } catch (error) { console.error('Error:', error); return { statusCode: 500, headers: { 'Access-Control-Allow-Headers': 'Content-Type', 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'OPTIONS,POST,GET' }, body: JSON.stringify({ error: 'An error occurred while processing your request.' }) }; }
- 成功した場合、HTTPステータス200とともに、生成されたテキストをレスポンスとして返します。エラーが発生した場合、HTTPステータス500を返し、エラーメッセージを含めます。headersの設定については下記にて記載します。
headers
Access-Control-Allow-Headers: 'Content-Type'
- クライアントから送信されるリクエストのヘッダーとして
Content-Type
を許可します。
- クライアントから送信されるリクエストのヘッダーとして
Access-Control-Allow-Origin: '*'
- すべてのオリジン(クライアント)からのアクセスを許可します。今回のように「
*」
が設定されていると、どのウェブサイトからでもリクエストが可能です。
- すべてのオリジン(クライアント)からのアクセスを許可します。今回のように「
Access-Control-Allow-Methods: 'OPTIONS,POST,GET'
- 許可するHTTPメソッドを指定しています。
OPTIONS
はプリフライトリクエスト(CORSのチェック)、POST
はデータ送信、GET
はデータ取得に使用されます。
- 許可するHTTPメソッドを指定しています。
2-3. backend.tsにLambdaのコードを記述
import { defineBackend } from '@aws-amplify/backend';
import { invokeBedrock } from './function/invoke-bedrock/resource'
import * as iam from 'aws-cdk-lib/aws-iam';
import { Stack } from 'aws-cdk-lib';
const backend = defineBackend({
invokeBedrock
});
backend.addOutput({
custom: {
invokeBedrockFunctionName: backend.invokeBedrock.resources.lambda.functionName,
},
});
// Lambda function permissions
const bedrockStatement = new iam.PolicyStatement({
actions: [
"bedrock:*"
],
resources: ["*"]
})
backend.invokeBedrock.resources.lambda.addToRolePolicy(bedrockStatement)
こちらの記述に関しても下記にて解説いたします。
- Backend定義
const backend = defineBackend({ invokeBedrock });
- defineBackend: この部分では、
invokeBedrock
関数をバックエンドリソースとして定義しています。
- カスタム出力の追加
backend.addOutput({ custom: { invokeBedrockFunctionName: backend.invokeBedrock.resources.lambda.functionName, }, });
addOutput
: このメソッドは、スタックの出力を追加するために使われます。ここでは、Lambda関数の名前(invokeBedrockFunctionName
)を出力します。backend.invokeBedrock.resources.lambda.functionName
:invokeBedrock
に関連付けられたLambda関数の名前を取得し、invokeBedrockFunctionName
というキーで出力しています。
- Lambda関数へのBedrock APIアクセス権限付与
const bedrockStatement = new iam.PolicyStatement({ actions: [ "bedrock:*" ], resources: ["*"] })
- Lambda関数にBedrock APIの使用を許可するためのIAMポリシーを定義するクラスです。
- ポリシーの適用
backend.invokeBedrock.resources.lambda.addToRolePolicy(bedrockStatement)
invokeBedrock
関数にBedrock APIにアクセスするためのbedrockStatement
ポリシーを追加する設定です。
2-4. サンドボックスの立ち上げ
ここまで記述したら、項番1-7で実施したsandboxの立ち上げを実行し、Lambdaができるか見てみましょう。
npx ampx sandbox --profile <プロファイル>
Lambdaのコンソール画面へ移動し、項番1-1で記載したapp名を含む関数が発見されればOK
https://ap-northeast-1.console.aws.amazon.com/lambda/home?region=ap-northeast-1#/functions
2-5. LambdaからBedrockへの接続テスト
LambdaからBedrockに接続できるかテストを実施します。
出来上がったLambdaのコンソール画面へ移動し、下記手順を参考にテストを実施してください。
- 「テスト」タブをクリック
- イベント名、イベントJSONを下記の通り入力
- イベント名:任意の名前
- イベントJSON:
{
"inputText": "<bedrockへの質問>"
}
- 「テスト」ボタンをクリック
下記の通りレスポンスが200で返ってくればOK!!
3. API Gatewayの構築
下記Amplify Gen2の公式ページにも記載があるように、API GatewayはAmplify Gen2に専用のコードがあるわけではなく、AWS CDKから生成します。
Amplify Docks(Set up Amplify REST API)
https://docs.amplify.aws/react/build-a-backend/add-aws-services/rest-api/set-up-rest-api/
ですので、今回行うようなAPI Gatewayの細かい設定は、下記のAWS CDK Referenceを参考にしています。
CDK Reference(aws-cdk-lib.aws_apigateway module)
https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_apigateway-readme.html
また、今回のAPI Gatewayは今後の様々なリソースの拡張を踏まえて、細かい制御ができる非プロキシで実装しています。プロキシで実装したい方はそちらも試していただければと思います。
プロキシと非プロキシの違いは下記記事が大変わかりやすかったので、こちらを参考にしていただけますと幸いです。
[初心者向け] Lambda 非プロキシ統合で API Gateway API をビルドする をプロキシ統合にして比較してみる
https://dev.classmethod.jp/articles/for-beginner-build-apigateway-with-noproxy-and-proxy-lambda/
3-1. API Gatewayの構築
backend.tsに下記コードを追記してください
・・・
import { ApiKey, UsagePlan } from 'aws-cdk-lib/aws-apigateway';
import { Stack } from 'aws-cdk-lib';
import {
PassthroughBehavior,
Cors,
LambdaIntegration,
RestApi,
} from "aws-cdk-lib/aws-apigateway";
・・・
// create a new API stack
const apiStackBedrock = backend.createStack("api-stack-nomal-bedrock");
// create a new REST API
const bedrockApi = new RestApi(apiStackBedrock, "RestApiBedrock", {
restApiName: "bedrock-api",
deploy: true,
deployOptions: {
stageName: "dev",
},
defaultCorsPreflightOptions: {
allowOrigins: Cors.ALL_ORIGINS, // Restrict this to domains you trust
allowMethods: Cors.ALL_METHODS, // Specify only the methods you need to allow
allowHeaders: [...Cors.DEFAULT_HEADERS, 'X-Api-Key'], // Specify only the headers you need to allow
},
});
// create a new Lambda integration
const lambdaIntegrationBedrock = new LambdaIntegration(
backend.invokeBedrock.resources.lambda,
{
proxy: false,
integrationResponses: [
{
statusCode: '200',
responseParameters: {
'method.response.header.Access-Control-Allow-Origin': "'*'",
},
responseTemplates: {
'application/json': ''
}
}
],
passthroughBehavior: PassthroughBehavior.WHEN_NO_TEMPLATES,
}
);
// create a new resource path with IAM authorization
const itemsPathBedrock = bedrockApi.root.addResource("items");
// メソッドの追加と応答の設定
itemsPathBedrock.addMethod("POST", lambdaIntegrationBedrock, {
apiKeyRequired: true,
methodResponses: [
{
statusCode: '200',
responseParameters: {
'method.response.header.Access-Control-Allow-Origin': true,
},
responseModels: {
'application/json': {
modelId: 'Empty'
}
}
}
]
});
// create a new IAM policy to allow Invoke access to the API
const apiRestPolicyBedrock = new iam.Policy(apiStackBedrock, "RestApiPolicyBedrock", {
statements: [
new iam.PolicyStatement({
actions: ["execute-api:Invoke"],
resources: [
`${bedrockApi.arnForExecuteApi("*", "/items", "dev")}`,
`${bedrockApi.arnForExecuteApi("*", "/items/*", "dev")}`
],
}),
],
});
下記より上記コードの解説をいたします。
- APIスタックの作成
const apiStackBedrock = backend.createStack("api-stack-nomal-bedrock");
- createStack:
backend
オブジェクトを使用して、新しいAPIスタック(api-stack-nomal-bedrock
)を作成します。
- REST APIの作成
// create a new REST API
const bedrockApi = new RestApi(apiStackBedrock, "RestApiBedrock", {
restApiName: "<API Gatewayの名前>",
deploy: true,
deployOptions: {
stageName: "dev",
},
defaultCorsPreflightOptions: {
allowOrigins: Cors.ALL_ORIGINS, // Restrict this to domains you trust
allowMethods: Cors.ALL_METHODS, // Specify only the methods you need to allow
allowHeaders: [...Cors.DEFAULT_HEADERS, 'X-Api-Key'], // Specify only the headers you need to allow
},
});- RestApi: 新しいREST APIを作成します。
restApiName
: API Gatewayの名前を任意でつけます。deploy
: このAPIを自動的にデプロイするかどうかを指定します。deployOptions
: APIをデプロイする際の設定を定義します。ここでは、stageName
として"dev"
を指定しています。defaultCorsPreflightOptions
: CORSのプリフライトオプションを指定します。allowOrigins
: 許可されるオリジンを指定します。ここではすべてのオリジン(Cors.ALL_ORIGINS
)が許可されています。allowMethods
: 許可されるHTTPメソッドを指定します。ここではすべてのメソッドが許可されています。allowHeaders
: 許可されるヘッダーを指定します。ここではデフォルトのヘッダーに加え、X-Api-Key
も許可されています。
- Lambda統合の作成
const lambdaIntegrationBedrock = new LambdaIntegration(
backend.invokeBedrock.resources.lambda,
{
proxy: false,
integrationResponses: [
{
statusCode: '200',
responseParameters: {
'method.response.header.Access-Control-Allow-Origin': "'*'",
},
responseTemplates: {
'application/json': ''
}
}
],
passthroughBehavior: PassthroughBehavior.WHEN_NO_TEMPLATES,
}
);LambdaIntegration
: Lambda関数との統合を定義します。proxy
:false
に設定すると、リクエストのマッピングテンプレートを使用することができます。integrationResponses
: Lambda関数からの応答を定義します。ここでは、HTTPステータスコード200に対して、CORSヘッダーを設定しています。passthroughBehavior
: リクエストがマッピングテンプレートにマッチしない場合の処理を指定します。PassthroughBehavior.WHEN_NO_TEMPLATES
に設定すると、マッピングテンプレートがない場合にリクエストがそのまま転送されます。
- リソースパスの作成とメソッドの追加
// create a new resource path with IAM authorization
const itemsPathBedrock = bedrockApi.root.addResource("items");
// メソッドの追加と応答の設定
itemsPathBedrock.addMethod("POST", lambdaIntegrationBedrock, {
apiKeyRequired: true,
methodResponses: [
{
statusCode: '200',
responseParameters: {
'method.response.header.Access-Control-Allow-Origin': true,
},
responseModels: {
'application/json': {
modelId: 'Empty'
}
}
}
]
});addResource
: APIのルートに新しいリソースパス(items
)を追加します。これは、APIのエンドポイントの一部になります。addMethod
:items
リソースにPOST
メソッドを追加し、先ほど作成したLambda統合(lambdaIntegrationBedrock
)を指定します。apiKeyRequired
:true
に設定すると、このメソッドを呼び出すためにはAPIキーが必要になります。methodResponses
: メソッドに対する応答の設定を行います。ここではHTTPステータスコード200の応答に対して、CORSヘッダーを許可しています。また、応答モデルとしてEmpty
を指定しています。
- IAMポリシーの作成
// create a new IAM policy to allow Invoke access to the API
const apiRestPolicyBedrock = new iam.Policy(apiStackBedrock, "RestApiPolicyBedrock", {
statements: [
new iam.PolicyStatement({
actions: ["execute-api:Invoke"],
resources: [
`${bedrockApi.arnForExecuteApi("*", "/items", "dev")}`,
`${bedrockApi.arnForExecuteApi("*", "/items/*", "dev")}`
],
}),
],
});Policy
: IAMポリシーを作成します。このポリシーはAPIのInvoke
アクセスを許可します。PolicyStatement
: このポリシーのステートメントを定義します。actions
:"execute-api:Invoke"
は、APIを呼び出すための権限を示しています。resources
: ポリシーが適用されるリソースを指定します。ここでは、/items
エンドポイントおよびその下のすべてのリソースに対して、Invoke権限を許可しています。
3-2. API Key / 使用プランの作成
先ほどAPI Gateway作成の記述をしたbackend.tsに下記コードを追記してください
・・・
// Create API Key
const apiKeyBedrock = new ApiKey(apiStackBedrock, 'ApiKeyBedrock', {
apiKeyName: '<API Keyの名前>',
description: '<API Keyの説明>',
});
// Create Usage Plan
const usagePlanBedrock = new UsagePlan(apiStackBedrock, 'UsagePlanBedrock', {
name: '<使用プランの名前>',
apiStages: [
{
api: bedrockApi,
stage: bedrockApi.deploymentStage,
},
],
});
// Add API Key to Usage Plan
usagePlanBedrock.addApiKey(apiKeyBedrock);
// Add Usage Plan to API
backend.addOutput({
custom: {
ApiKey: [apiKeyBedrock.keyId, apiKeyBedrock.keyId],
},
});
// add outputs to the configuration file
backend.addOutput({
custom: {
API: {
[bedrockApi.restApiName]: {
endpoint: bedrockApi.url,
region: Stack.of(bedrockApi).region,
apiName: bedrockApi.restApiName,
},
},
},
});
以下より上記コードの解説をします。
- APIキーの作成
// Create API Key
const apiKeyBedrock = new ApiKey(apiStackBedrock, 'ApiKeyBedrock', {
apiKeyName: '<API Keyの名前>',
description: '<API Keyの説明>',
});apiKeyName
: 作成するAPIキーの名前を指定します。description
: APIキーに関する説明を追加します。
- 使用プランの作成
// Create Usage Plan
const usagePlanBedrock = new UsagePlan(apiStackBedrock, 'UsagePlanBedrock', {
name: '<使用プランの名前>',
apiStages: [
{
api: bedrockApi,
stage: bedrockApi.deploymentStage,
},
],
});name
: 使用プランの名前を指定します。apiStages
: この使用プランが適用されるAPIおよびそのステージを定義します。
- APIキーを使用プランに追加
// Add API Key to Usage Plan
usagePlanBedrock.addApiKey(apiKeyBedrock);addApiKey
: 作成したAPIキー(apiKeyBedrock
)を使用プラン(usagePlanBedrock
)に追加します。
- 出力の追加
// Add Usage Plan to API
backend.addOutput({
custom: {
ApiKey: [apiKeyBedrock.keyId],
},
});addOutput
: デプロイ時に表示される出力を追加します。ここでは、APIキーのIDを含むカスタムオブジェクトを指定しています。ApiKey
: 出力オブジェクトに、作成したAPIキーのID(apiKeyBedrock.keyId
)を追加しています。配
- 構成ファイルへの出力の追加
// add outputs to the configuration file
backend.addOutput({
custom: {
API: {
[bedrockApi.restApiName]: {
endpoint: bedrockApi.url,
region: Stack.of(bedrockApi).region,
apiName: bedrockApi.restApiName,
},
},
},
});apiName
: APIの名前を指定します。addOutput
: 再度出力を追加しています。ここでは、APIに関する情報をカスタムオブジェクトとして定義しています。API
: APIの情報を含むオブジェクトを作成します。[bedrockApi.restApiName]
: APIの名前をキーとして使用します。endpoint
: APIのエンドポイントURLを指定します。これはAPIを呼び出すために使用されます。region
: APIがデプロイされているAWSリージョンを取得しています。Stack.of(bedrockApi).region
でリージョン情報を取得しています。
3-3. サンドボックスの立ち上げ
ここまで記述したら、項番1-7で実施したsandboxの立ち上げを実行し、API Gatewayができるか見てみましょう。
※この前の項番でsandboxを立ち上げっぱなしの場合、変更は随時行われているので、改めて下記コマンドを実行するする必要はありません。
npx ampx sandbox --profile <プロファイル>
API Gatewayのコンソール画面へ移動し、項番3-1で記載した名前のAPI Gatewayが発見されればOK
3-4. API Gateway → Lambda → Bedrockとの接続テスト
下記手順でテストを実行してください。
- 作成したAPI Gatewayをクリックする
- 「POST」をクリックする
- 「テスト」タブをクリックする
- リクエスト本文にBedrockへのリクエストを記載する
{
"inputText": "<Bedrockへの質問>"
}
- 「テスト」ボタンをクリックする
ステータスが200でBedrockからの回答があれば、ここまでの構築は完了!
3-5. サンドボックスの削除
ここまででテスト環境の立ち上げは完了したので、次の項番からデプロイの実行方法を確認していきます。サンドボックスが立ち上げっぱなしだと、本番環境のデプロイができないので、一旦削除します。
下記コマンドを実行してください。
npx ampx sandbox --profile <プロファイル名> delete
re you sure you want to delete all the resources in your sandbox environment (This can’t be undone)? と聞かれますので、y(yes)と返答すれば削除が実行されます。
4. Amplify Gen2とGitHubと連携しデプロイをする
こちらは以前に下記記事を書きましたので、こちらの項番2の手順を参考にしてください!
上記手順を実施後、デプロイされたAPI Gatewayから項番3で行った下記手順でのテストを実行し、ステータスが200でBedrockからの回答があれば、全て完了です。
- 作成したAPI Gatewayをクリックする
- 「POST」をクリックする
- 「テスト」タブをクリックする
- リクエスト本文にBedrockへのリクエストを記載する
{
"inputText": "<Bedrockへの質問>"
}
- 「テスト」ボタンをクリックする
まとめ
いかがでしょうか?
今回Amplify Gen2でBedrock APIを呼び出すLambda、API Gatewayを作成しました。今回バックエンド側ですが、こちらのAPIを用いればフロントからBedrockを呼び出すことが可能になります。
フロントは今回Amplify Gen2を立ち上げた際にできたsrcディレクトリをいつものReactのsrcディレクトリに入れ替えるだけで、作成可能ですので、下記記事を参考にチャットアプリを作っていただけますと幸いです。