JavaSciptでAWS Gatewayを呼び出す | AWSサーバレス構築 Webページ作成

AWSチュートリアル簡易版

ロードマップ

公式チュートリアルで参考とするファイル

公式チュートリアルで使われているソースコード
aws-serverless-webapp-workshop（GitHub）

このうち、
・config.js
・cognito-auth.js
・ride.js
を参考にする。

config.js

API GatewayのデプロイURLと、認証を利用する場合にCognitoの情報を保持する構造体データ
複数のJavaScriptファイル間でグローバル変数として振る舞う。

window._config = {
    cognito: {
        userPoolId: '',
        userPoolClientId: '',
        region: ''
    },
    api: {
        invokeUrl: 'APIGatewayでデプロイしたステージのURL'
    }
};

cognito-auth.js

APIを呼び出す時に認証を必要とさせたいときに利用する。今回の簡易版チュートリアルでは使用しない。

ride.js（call-api.js）

ajaxを利用してAPIを呼び出している。API呼び出し部分だけを抜き出して、新たにJavaScriptファイル「call-api.js」を用意する。

// 引数に、Lambdaに渡すJSONデータと、完了時の関数を渡す
// completeFuncは、引数にJSONデータを受け取るので、引数を１つ渡せるような関数とする 
function requestApi( jsonData, completeFunc ) {
    $.ajax({
        method: 'POST',
        
        url: _config.api.invokeUrl + '/testresource',
        
        data: jsonData,
        
        contentType: 'application/json',
        
        success: completeFunc,

        error: function ajaxError(jqXHR, textStatus, errorThrown) {
            console.error('Error requesting: ', textStatus, ', Details: ', errorThrown);
            console.error('Response: ', jqXHR.responseText);
            alert("データベースサーバーとの通信に失敗しました。");
        }
    });
}

使い方

main.js

call-api.js で準備したAPIコール関数を実行する。APIから応答を受けた後の処理も記述している。

(function MainFunction($) {

    // Lambda側に渡したいデータをJSON形式で準備
    var requestJsonData = {
                            "Key1": "Value1",
                            "Key2": "Value2"
                          };

    // Lambda実行完了時の処理
    function completeRequest( result ) {
        
        // 引数resultは受け取った時点でJSONデータとして認識できる
        // キーを指定してデータを得られる。複数データも配列として指定して取得すれば良い。
        
        // console.log('Response received from API: ', result);
        // const responseData = JSON.parse( result );
        
        console.log( result["ReceivedVal1"] );
        console.log( result["ReceivedVal2"] );
    }

    // ページ読み込み時の処理
    $(function onDocReady() {

        // Lambda実行
        requestApi( JSON.stringify(requestJsonData), completeRequest );
    });

}(jQuery));

index.html

これまでに用意したJavaScriptファイルを順番に読み込んで実行させている。

ブラウザのコンソール上にサーバーから送られている文字列が表示されればOK。
本チュートリアルの目的達成。

<!doctype html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>AWSチュートリアル簡易版テストページ</title>
</head>

<body>

<div>Hello World</div>

<!-- javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="js/config.js"></script>
<script src="js/call-api.js"></script>
<script src="js/main.js"></script>

</body>
</html>