はじめに

BedrockにAPIリクエスト投げるLambda書いたからフロントエンドも作りたいな…と言いつつ数か月経ってしまった。
API Gatewayにリクエスト投げるシンプルなhtml書いてS3+CloudFrontのベタな構成……と思ったらAPI Gatewayにリクエスト投げるところで詰まったので、とりあえずその部分を記事化。

Lambda書いたときの記事

1. ハマリポイント

Lambdaに引数keywordを渡す必要がある。マネコンのLambdaのエディタからテストしたときは以下のようにJSONを手打ちして問題なく動いていた。

…が、API GatewayにLambdaを統合し、API GatewayにPOSTリクエストを送ったとき、どうも上手く引数が渡らない。

KeyErrorとか言われる

調べたところ、POSTリクエストの本文だとフォーマットが都合よくJSON形式にはなってくれないみたいなので、API Gateway側でマッピングテンプレートを設定し、渡す値を整形する必要がある。

おそらく以下のようなフォーマットで渡っちゃってるみたい

キーと値は、 '&' で区切られ、キーと値の組が '=' で結ばれた形でエンコードされます。キーや値が英数字以外の文字であった場合は、パーセントエンコーディングされます。

2. マッピングテンプレート設定方法

API Gateway リソースから「統合リクエストの設定」横の編集ボタンを押す。

マッピングテンプレートのコンテンツタイプにapplication/x-www-form-urlencodedを入力する。
テンプレート本文はJSONフォーマットにPOSTの本文で渡された値をはめ込むイメージで書く。

今回書いたLambdaは引数1つなので、マッピングテンプレートも以下のようにシンプルなものでいけた。

{
    "keyword" : $input.json('$')  
}

POSTリクエストの本文がもっと複雑な構造ならテンプレートももっと複雑になるはず。複数のキーと値の組があるなら&で分割してあげるとか。

$input.json('$')だと何もフィルタしないけど、$input.json('$.hoge')とかで指定してあげると特定のフィールドだけ抽出できそう。

マッピングテンプレートについて(サンプル多数)

JSONPathの詳細

3. html

とりあえずAPI GatewayにPOSTリクエスト投げるだけのシンプルなやつ。
formのactionのURLは適宜書き換え。

<html>
<head>
<meta charset="utf-8">
<title>CreateImages</title>
</head>
<body>
<form method="POST" action="https://restapi_id.execute-api.region.amazonaws.com/stage_name/">
    <div><label>生成したい画像のキーワード：<input type="text" name="keyword"></label></div>
    <input type="submit" value="Submit!">
</form>
</body>
</html>

REST API呼び出し

おわりに

API GatewayのマッピングテンプレートでLambdaからの戻り値も整形できそう(統合レスポンス)なのでこちらも設定が必要そう。
Content-Typeのところから理解がぼんやりしてるのでコード改善しつつAPIまわりも勉強したい……

参考サイト