はじめに
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まわりも勉強したい……
参考サイト