jQueryからAmazon API Gatewayを使用する

概要

AWSから新サービス API Gateway がリリースされました。Lambda (あるいは外部のHTTP) と連携させることで、他のAWSシステムやバックエンドシステムが提供する機能をREST APIとして公開することが可能となります。

Gateway APIを使った最も分かりやすい例は、下のフローのようにLamdaファンクション (Node.jsやJava) を介してバックエンドのDBからデータを取得したり更新する構成かと思います。

EC2 <-(HTTP)-> API Gateway <-> Lambda <-> DB (RDS, DynamoDB...)

ここでは手始めに、jQuery経由でAPI Gatewayをコールする方法について説明します。

※2015年8月1日時点、Gateway APIのTokyoリージョンは提供されていません。ただしリージョンブリッジが可能なため、Lambda以降のシステムをTokyoリージョンで構築することは可能です。

実装

jQuery側はいつも通り$.ajax()をコールするだけ。urlにはAPI Gatewayから発行されたURLを指定します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
  (function() {
    var data = {
      'id': 'xxx'
    }

    $.ajax({
      type: 'POST',
      url: '{ENDPOINT_URL}',
      data: JSON.stringify(data),
      success: function(data) {
        console.log(data);
      }
    });
  })();
</script>

ただしこの状態でリクエストを送信すると、CORSの制限に引っかかり、API GatewayからNo 'Access-Control-Allow-Origin' header is present on the requested resource.といったエラーが返されます。

この問題を回避するには、API Gateway側でCORSを有効化する必要があります。
詳細は Enable CORS for a Method in API Gateway に記載されてますが、基本的には対象リソースの"Method Response"、"Integration Response"を編集するだけです。

Method Responseの設定

Integration Responseの設定

"Integration Response"の"Mapping value"では、シングルクォートを値に含める必要がある点に注意して下さい。

最後に"Deploy API"を実行してデプロイすれば問題は解決します。

ここでは console.log(data) の結果として、API Gatewayのバックエンドで実行されているLambdaファンクションの戻り値が表示されています。