Zenn
🦔

Webサーバーを立てずにlambdaを実行するhtml+JavaScript on Cloud9

2023/11/05に公開
AWS
HTML
JavaScript
Lambda
tech

はじめに

Lambdaを実行し、実行結果を表示するhtmlファイルのサンプルコードを残します。
htmlファイル内で、JavaScriptを実行しLambdaを実行します。
htmlファイルからLambdaにアクセスするときのアクセス権は、IAMユーザーで発行したアクセスキーを使用します。

構成

htmlファイルはCloud9で実行します。Cloud9はWebサーバーにはしません。

リソースの準備

検証に必要なリソースを作成します。

アクセスキー

Lambdaにアクセスできる十分な権限を持ったIAMユーザーを作成し、そのIAMユーザーのアクセスキーを作成します。アクセスキーのAccess key ID,Secret access keyをメモしておきます。

Lambda

lambda-sample-python3という名前のLambdaを作成しました。以下のようにコードは受け取った情報を返す単純なものにしました。

lambda-sample-python3
import json

def lambda_handler(event, context):
    # TODO implement
    print("event = "  + json.dumps(event, default=str))
    return {
        'statusCode': 200,
        'body': json.dumps('Hello from Lambda! ' + json.dumps(event, default=str))
    }

html

Cloud9に以下のhtmlファイルを作成します。
accessKeyIdとsecretAccessKeyにはアクセスキーのAccess key IDとSecret access keyを記載します。

test-lambda.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lambda Execution Result</title>
</head>
<body>
<h1>Invoke Lambda and Display Result</h1>
<div id="lambdaResult"></div>

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.6.10.min.js"></script>
<script>
    // 環境変数から認証情報を取得
    //const accessKeyId = process.env.AWS_ACCESS_KEY_ID;
    //const secretAccessKey = process.env.AWS_SECRET_ACCESS_KEY;
    const accessKeyId = "{アクセスキーのAccess key ID}";
    const secretAccessKey = "{アクセスキーのSecret access key}";

    // Lambdaの設定
    AWS.config.update({
        accessKeyId,
        secretAccessKey,
        region: 'us-east-1' // バージニアリージョンを指定
    });

    const lambda = new AWS.Lambda();

    // Lambda関数を呼び出す
    const params = {
        FunctionName: 'lambda-sample-python3', // Lambda関数の名前
        InvocationType: 'RequestResponse', // 同期呼び出し
        Payload: JSON.stringify({ keytest: 'hoge123' }) // ペイロード
    };

    lambda.invoke(params, (err, data) => {
        if (err) {
            console.error('Error calling Lambda function:', err);
        } else {
            const result = JSON.parse(data.Payload);
            let resutlBody = result["body"];
            document.getElementById('lambdaResult').innerText = `Lambda function result: ${resutlBody}`;
        }
    });
</script>
</body>
</html>

動作検証

以下のように、作成したhtmlファイル(test-lambda.html)を右クリックし Preview をクリックします。

Previewで開いたhtmlファイルにて以下のように "Hello from Lambda! {\"keytest\": \"hoge123\"}" と表示されれば成功です。

余談ですが、Lambda実行時のログからもtest-lambda.htmlで受け取った値が表示されています。

以上です。

===

Discussion