Chapter 10

Lambda ApiGateway httpメソッド

hello_yogurt
hello_yogurt
2022.07.23に更新

lambdaとapi gatewayとaxios、vueのやり方

lambda作る

import json

def lambda_handler(event, context):
    key1 = event['key1']
    print('key1', key1, sep="\n")
    print('event', event, sep="\n")

    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Headers': '*',
            'Access-Control-Allow-Origin': 'http://localhost:8080',
            'Access-Control-Allow-Methods': 'OPTIONS,POST',
        },
        'body': json.dumps('Hello from Lambda!'),
        'key1': key1
    }


api gateway作る
トリガーを追加
参考
Vue.js と AWS サービスを使って問合せした人の感情を判定するフォームを作る

https://aws.amazon.com/jp/builders-flash/202011/comprehend-emotion-form/?awsf.filter-name=*all

選択肢はそれぞれ「API Gateway」「Create an API」「REST API」「オープン」を選択し、「追加」

Lambda 関数の画面に戻るので、「作成したもの」をクリック

メソッドの作成、POST
右側のチェックマークをクリック

Lambda 関数の項目で「作成した Lambda 関数名)」を入力

OK

統合リクエスト

マッピングテンプレート」をクリックし、「テンプレートが定義されていない場合 (推奨) 」を選択し、「マッピングテンプレートの追加」

「application/json」と入力し、チェックマークをクリック

{
"key1": input.json(".data.key1"),
"key2": input.json(".data.key2"),
"key3": input.json(".data.key3")
}
これはvueのpostが以下の場合
axios
.post(
"https://nfs4jnw0a0.execute-api.ap-northeast-1.amazonaws.com/default/test",
{
data: {
key1 : "明日",
key2 : "この",
key3 : "場所で"
}
}
)

まず、「アクション」から「CORS の有効化」をクリック

「CORS を有効にして既存の CORS ヘッダーを置換」ボタンをクリック

「アクション」から「API のデプロイ」をクリック

ターミナルで(エラーの時は、手入力する)
curl -X POST -H "Content-Type: application/json" -d '{"key1":"aaaa", "key2":"bbb", "key3":"ccc"}' 作成したURL/lambdaのapi名
この場合は、
{
"key1": input.json(".key1"),
"key2": input.json(".key2"),
"key3": input.json(".key3")
}

———————
vueからPOST


OPTIONS
メソッドレスポンス


レスポンスヘッダー
Access-Control-Allow-Headers
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Allow-Methods
4つ入れる

参考

https://qiita.com/ritya/items/d19f9379bc96fb63ad34


OPTIONS
統合レスポンス
ヘッダーのマッピング

Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Amz-Security-Token'
Access-Control-Allow-Origin:'http://localhost:8080
Access-Control-Allow-Credentials: 'true'
Access-Control-Allow-Methods: 'GET,OPTIONS…..’

アクション、CORDの有効化で値は勝手に入るかもしれない(一応こっちのページで確認するべし)


POST
メソッドレスポンス

Access-Control-Allow-Origin
Access-Control-Allow-Credentials
2つ入れる


POST
統合レスポンス

Access-Control-Allow-Origin:'http://localhost:8080
Access-Control-Allow-Credentials: 'true'


全部できたらアクション、APIのデプロイで反映させる