Amplify Gen2でAPI Gateway + Lambdaを設定して、Bedrockから回答をもらう

technologies

おはようございます!ベンジャミン木村です!

先日投稿した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のインストールがまだでエラーとなる場合は、下記記事が大変わかりやすかったので、ご参照ください。

MacにNode.jsをインストール

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のコードの解説を下記にて記載いたします。

  1. 変数の定義
    •         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 }];
    • acceptcontentTypeはAPIリクエストとレスポンスの形式を指定するためのヘッダーです。
    • messagesには、ユーザーからの入力をrole: "user"として設定しています。この形式はChatGPTや類似のモデルが一般的に使用するメッセージ構造です。
  2. APIリクエストの構築
    •         const body = JSON.stringify({
                  anthropic_version: "bedrock-2023-05-31",
                  max_tokens: 1000,
                  messages: messages
              });
    • bodyには、Bedrock APIに送信するリクエストペイロードが含まれています。anthropic_versionはAPIのバージョン、max_tokensは生成されるテキストの最大トークン数を指定しています。
  3. 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 でデータを抽出しています。
  4. レスポンスの返却
    •         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はデータ取得に使用されます。

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)

こちらの記述に関しても下記にて解説いたします。

  1. Backend定義
    • const backend = defineBackend({
          invokeBedrock 
      });
    • defineBackend: この部分では、invokeBedrock関数をバックエンドリソースとして定義しています。
  2. カスタム出力の追加
    • backend.addOutput({
          custom: {
              invokeBedrockFunctionName: backend.invokeBedrock.resources.lambda.functionName,
          },
      });
    • addOutput: このメソッドは、スタックの出力を追加するために使われます。ここでは、Lambda関数の名前(invokeBedrockFunctionName)を出力します。
    • backend.invokeBedrock.resources.lambda.functionName: invokeBedrockに関連付けられたLambda関数の名前を取得し、invokeBedrockFunctionNameというキーで出力しています。
  3. Lambda関数へのBedrock APIアクセス権限付与
    • const bedrockStatement = new iam.PolicyStatement({
          actions: [
              "bedrock:*"
          ],
          resources: ["*"]
      })
    • Lambda関数にBedrock APIの使用を許可するためのIAMポリシーを定義するクラスです。
  4. ポリシーの適用
    • 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のコンソール画面へ移動し、下記手順を参考にテストを実施してください。

  1. 「テスト」タブをクリック
  2. イベント名、イベントJSONを下記の通り入力
    • イベント名:任意の名前
    • イベントJSON:
      {
      "inputText": "<bedrockへの質問>"
      }
  3. 「テスト」ボタンをクリック

下記の通りレスポンスが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")}`
      ],
    }),
  ],
});

下記より上記コードの解説をいたします。

  1. APIスタックの作成
    • const apiStackBedrock = backend.createStack("api-stack-nomal-bedrock");
    • createStack: backendオブジェクトを使用して、新しいAPIスタック(api-stack-nomal-bedrock)を作成します。
  2. 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も許可されています。
  3. 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に設定すると、マッピングテンプレートがない場合にリクエストがそのまま転送されます。
  4. リソースパスの作成とメソッドの追加
    • // 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を指定しています。
  5. 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,
      },
    },
  },
});

以下より上記コードの解説をします。

  1. APIキーの作成
    • // Create API Key 
      const apiKeyBedrock = new ApiKey(apiStackBedrock, 'ApiKeyBedrock', {
      apiKeyName: '<API Keyの名前>',
      description: '<API Keyの説明>',
      });
    • apiKeyName: 作成するAPIキーの名前を指定します。
    • description: APIキーに関する説明を追加します。
  2. 使用プランの作成
    • // Create Usage Plan
      const usagePlanBedrock = new UsagePlan(apiStackBedrock, 'UsagePlanBedrock', {
      name: '<使用プランの名前>',
      apiStages: [
      {
      api: bedrockApi,
      stage: bedrockApi.deploymentStage,
      },
      ],
      });
    • name: 使用プランの名前を指定します。
    • apiStages: この使用プランが適用されるAPIおよびそのステージを定義します。
  3. APIキーを使用プランに追加
    • // Add API Key to Usage Plan
      usagePlanBedrock.addApiKey(apiKeyBedrock);
    • addApiKey: 作成したAPIキー(apiKeyBedrock)を使用プラン(usagePlanBedrock)に追加します。
  4. 出力の追加
    • // Add Usage Plan to API
      backend.addOutput({
      custom: {
      ApiKey: [apiKeyBedrock.keyId],
      },
      });
    • addOutput: デプロイ時に表示される出力を追加します。ここでは、APIキーのIDを含むカスタムオブジェクトを指定しています。
    • ApiKey: 出力オブジェクトに、作成したAPIキーのID(apiKeyBedrock.keyId)を追加しています。配
  5. 構成ファイルへの出力の追加
    • // 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との接続テスト

下記手順でテストを実行してください。

  1. 作成したAPI Gatewayをクリックする
  2. 「POST」をクリックする
  3. 「テスト」タブをクリックする
  4. リクエスト本文にBedrockへのリクエストを記載する
    • {
      "inputText": "<Bedrockへの質問>"
      }
  5. 「テスト」ボタンをクリックする

ステータスが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からの回答があれば、全て完了です。

  1. 作成したAPI Gatewayをクリックする
  2. 「POST」をクリックする
  3. 「テスト」タブをクリックする
  4. リクエスト本文にBedrockへのリクエストを記載する
    • {
      "inputText": "<Bedrockへの質問>"
      }
  5. 「テスト」ボタンをクリックする

まとめ

いかがでしょうか?

今回Amplify Gen2でBedrock APIを呼び出すLambda、API Gatewayを作成しました。今回バックエンド側ですが、こちらのAPIを用いればフロントからBedrockを呼び出すことが可能になります。

フロントは今回Amplify Gen2を立ち上げた際にできたsrcディレクトリをいつものReactのsrcディレクトリに入れ替えるだけで、作成可能ですので、下記記事を参考にチャットアプリを作っていただけますと幸いです。

Related posts