API GatewayでAPIを作ると、カンタンにSDKを生成できる。
https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-generate-sdk.html
JavaScriptのSDKを使うためのコードをすぐ忘れるから覚え書きしておく。
ドキュメント
使い方に関するドキュメントは下記。
https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-generate-sdk-javascript.html
https://github.com/aws-samples/aws-api-gateway-developer-portal/blob/master/dev-portal/public/apigateway-js-sdk/README.md
生成されるSDKはAPIの内容によって変わるけど、ひな形っぽいものは下記のリポジトリにある。
https://github.com/aws-samples/aws-api-gateway-developer-portal/tree/master/dev-portal/public/apigateway-js-sdk
APIを作る
testresourceという名前のリソースの下にMOCK統合のGETだけ作る。
https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-mock-integration.html
ブラウザで動かすJavaScriptから呼ぶので、CORSの設定もしておく。
https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-cors.html
そしてデプロイする。
ちなみに、Swagger+API Gateway拡張をYAMLでエクスポートしたものは下記。
SDKを生成する
ダウンロードしたzipを解凍すると、「apiGateway-js-sdk」というディレクトリができる。
このディレクトリの直下にあるapigClient.jsから、APIの内容に依存して決まる部分を抜粋。
SDKを使うhtmlファイルを作る
apiGateway-js-sdkの直下に、下記のhtmlファイルを置く。
<head>
<script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="lib/url-template/url-template.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="apigClient.js"></script>
</head>
<body>
<script type="text/javascript">
var apigClient = apigClientFactory.newClient();
var params = {
};
var body = {
};
var additionalParams = {
headers: {
},
queryParams: {
}
};
apigClient.testresourceGet(params, body, additionalParams)
.then(function(result){
console.log(result);
}).catch( function(result){
console.log(result);
});
</script>
</body>
実行結果
Chromeの開発者ツールのコンソールでログを見ると、下記のように、200を受け取ってることを確認できる。
{data: "", status: 200, statusText: "", headers: {…}, config: {…}}
補足: CORSを有効化しない場合
testresourceという名前のリソースの下にMOCK統合のGETだけ作って、CORS有効化しない。
それをSwagger+API Gateway拡張をYAMLでエクスポートしたものは下記。
この状態でSDK生成する。
apigClient.jsから、APIの内容に依存して決まる部分を抜粋。
Optionsメソッドがないことがわかる。
生成したSDKのメソッドを、前述のhtmlファイルから呼び出す。
Chromeの開発者ツールで見ると、エラーメッセージが出る。
Failed to load https://apiid12345.execute-api.ap-northeast-1.amazonaws.com/prod/testresource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
curlで叩くと200が返る。
$ curl https://apiid12345.execute-api.ap-northeast-1.amazonaws.com/prod/testresource -D -
HTTP/2 200
content-type: application/json
content-length: 0
date: Mon, 12 Mar 2018 13:19:44 GMT
x-amzn-requestid: 077cda4f-25f8-11e8-b5d1-bfdb1a3c89cc
x-cache: Miss from cloudfront
via: 1.1 2073c441ee99d33346c543d5962f8235.cloudfront.net (CloudFront)
x-amz-cf-id: 6nw40DxLedcPGExQbMfH4lHOy4mz7wVLQywHb7rAsF6fxQA03yptZA==