ReactとAWS Lambdaを連携して実行する方法

やりたいこと
実現方法
注意点や参考情報

やりたいこと

ReactアプリからAWS Lambdaを実行したいと考えています。
使用する環境は、Reactバージョン18.12.0とTypeScriptバージョン4.9.5です。

実現方法

パッケージインストール

この実装にはaws-sdkを使用します。まず、以下のコマンドで必要なパッケージをインストールします。

Bash

npm install aws-sdk
npm install @aws-sdk/client-lambda

Lambda実行リクエスト処理(React側のコード)

下記のコードでは、ファイル名と拡張子をリクエストとしてLambdaに送信する処理を
実装しています。

簡単なコード解説

LambdaClientを使用してregionとcredentialsを設定します。(L5)
Lambda関数を呼び出す際には、FunctionNameとPayloadを指定するだけで十分です。(L15)
InvokeCommandのインスタンスを生成し、リクエストを組み立てます(L22)
sendメソッドでリクエストを送ります(L24)

TypeScript

// Lambda関連のモジュールをインポート
import { LambdaClient, InvokeCommand } from "@aws-sdk/client-lambda";

// LambdaClientの設定
const lambda = new LambdaClient({
  region: AWS_REGION, 
  credentials: {
    accessKeyId: AWS_KEY,
    secretAccessKey: AWS_SECRET_KEY
  },
});

export const lambdaExe = async (fileName: string, extension: string): Promise<boolean> => {
  // リクエストパラメータの設定（PayloadはJSON形式）
  const lambdaParams = {
    FunctionName: AWS_FUNCTION,
    Payload: JSON.stringify({ "extension": extension, "fileName": fileName })
  };

  try {
    // InvokeCommandのインスタンスを生成
    const lambdaCommand = new InvokeCommand(lambdaParams);
    // コマンドを実行
    const lambdaResponse = await lambda.send(lambdaCommand);
    console.log("Lambda response:", lambdaResponse);
    // ステータスコード200の場合にTrueを返す
    return lambdaResponse.StatusCode === 200;
  } catch (error) {
    console.error("Error:", error);
    return false;
  }
}

Lambda関数の実装（Pythonで記述）

statusCode:200を返す関数です。

TypeScript

import json

def lambda_handler(event, context):
    return {
        'statusCode': 200
    }

注意点や参考情報

AWS Lambdaはドキュメントが豊富で、公式ガイドがとても親切です。英語のドキュメントを読むことに抵抗がなければ、設定やコマンドの詳細まで簡単に確認できます。
今回の内容は、以下の公式ドキュメントを参考にしています。
AWS SDK for JavaScript v3

この記事が少しでも役に立てば幸いです。