APIGateway + LambdaでAPIを作る【node.js編】

概要
LambdaとAPIGatewayの基本設定
コードデモ（足し算をして結果を返す）
参考

概要

APIGatewayって何？Lambdaって何？という方は下記の記事の項目【APIGatewayとLambdaの概要】チェックしてください。

APIGateway + LambdaでAPIを作る【Python編】

LambdaとAPIGatewayの基本設定

先ほどと同じ記事の「実装に作ってみよう」の項目をチェックしてください。

APIGateway + LambdaでAPIを作る【Python編】

※Lambda関数のランタイム設定で「Node.js 18.x」を選択してください。

コードデモ（足し算をして結果を返す）

HTML・jsでフロント（Lambdaに数値を2つ送る）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>lambdaのデモ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form>
    <p>数値をふたつ入力してください</p>
    <input type="number" id="number1">
    <input type="number" id="number2">
</form>
<p>計算結果：<span class="result"></span></p>
<button>送信する</button>
</body>
</html>
 
<script>
$(function () {
    $('button').on('click',function () {
       
       //formの値をjsonに変換
       var arr = { "key1": $('#number1').val(),"key2":$('#number2').val() };
       var submitData = JSON.stringify(arr);
       
        //ajaxで送信する
        $.ajax('https://設定したApiGatewayのドメイン', {
            type: 'post',
            data: submitData,
            dataType: "json",
        }).then(function (data) {
            console.log(data);
            $(".result").text(data);
        }).fail(function (error) {
            console.log(error);
        })
    });
  });
</script>

Lambda側

export const handler = async (event,context) => {
  //値を受け取る
  const body = JSON.parse(event["body"]);
  const val1 = Number(body.key1);
  const val2 = Number(body.key2);

  //足し算をする
  const result = val1 + val2
  
  //結果をフロントに返す
  return context.succeed({
    statusCode: 200,
    headers: {
          "Access-Control-Allow-Headers" : "Content-Type",
          //特定のサイトからのみアクセスを許可する場合は"*"をドメインに変更。
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
    body: JSON.stringify(result)
  });
};