Web ページから、AWS Lambda の関数に引数付きでアクセスする #AWS

次の AWS Lambda 関数に、API Geteway 経由でアクセスする方法です。
これは、３つの整数、aa,bb,cc を与えて合計 sum を計算するプログラムです。

sum_up.py

# -*- coding: utf-8 -*-
#
#   sum_up.py
#
#                   Oct/20/2017
#
# --------------------------------------------------------------------
import sys
import json

# --------------------------------------------------------------------
def sum_up_handler(event, context):
    sys.stderr.write("*** sum_up_handler *** start ***\n")
#
    aa = 0
    bb = 0
    cc = 0
#
    sys.stderr.write("Received event: " + json.dumps(event, indent=2) + "\n")
    if ('aa' in event):
        sys.stderr.write("aa = " + event['aa'] + "\n")
        aa = int(event['aa'])
#
    if ('bb' in event):
        sys.stderr.write("bb = " + event['bb'] + "\n")
        bb = int(event['bb'])
#
    if ('cc' in event):
        sys.stderr.write("cc = " + event['cc'] + "\n")
        cc = int(event['cc'])
#
    version = "Oct/19/2017 AM 16:42"
#
    sum = aa + bb + cc
#
    sys.stderr.write("version = " + version + "\n")
    sys.stderr.write("sum = " + str(sum) + "\n")
    sys.stderr.write("*** sum_up_handler *** end ***\n")
#
    rvalue = {}
    rvalue['aa'] = aa
    rvalue['bb'] = bb
    rvalue['cc'] = cc
    rvalue['sum'] = sum
    rvalue['version'] = version
    rvalue['language'] = 'Python'
#
    return rvalue
#
# --------------------------------------------------------------------

1) これを、AWS Lambda の関数にする方法は、

python の関数を AWS Lambda で使用する

2) API Gateway の設定は、

API Gateway から Lamda にアクセスする

3) API Gateway で cors を有効にします。

4) Web　ページとスクリプトです。jQuery を使います。

cors.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="cors.js"></script>
<title>AWS API Gateway</title>
</head>
<body>

<div id="answer">answer</div>


<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>


<hr />
Version: Oct/19/2017 PM 15:19<br />

</body>
</html>

次のプログラムの　rest_api_id は、変更して下さい。

cors.js

// -----------------------------------------------------------------------
//
//  cors.js
//
//                      Oct/20/2017
//
// -----------------------------------------------------------------------
jQuery (function ()
{
    jQuery("#outarea_aa").text ("*** cors.js *** start *** PM 18:28")

    getPost()

    jQuery("#outarea_hh").text ("*** cors.js *** end ***")
})

// -----------------------------------------------------------------------
function getPost()
{
    const rest_api_id="bbc2fbufm6"

    const url="https://" + rest_api_id + ".execute-api.ap-northeast-1.amazonaws.com/test"

    const params = {'aa': '121','bb': '304','cc': '256'}

    const args = JSON.stringify(params)

    jQuery.post(url,args,function(res)
        {
        const sum = res.sum
        var str_out = ""
        str_out += "aa = " + params['aa'] + "<br />"
        str_out += "bb = " + params['bb'] + "<br />"
        str_out += "cc = " + params['cc'] + "<br />"
        str_out += "sum = " + sum + "<br />"
        jQuery("#answer").html (str_out)
        })
}

// -----------------------------------------------------------------------