LoginSignup
8
8

More than 5 years have passed since last update.

AWS API Gatewayを触ってみた!

Posted at

AWSから凄いものが出ました!
詳しくはこちらから。
http://aws.typepad.com/aws_japan/2015/07/amazon-api-gateway-build-and-run-scalable-application-backends.html

で、この記事内で使い方が書いてあるんですがSDKを吐き出したあとにどう使うかが
書いてなかったので、そこを補完する形でやってみたことを書いてみたいと思います。
ちなみにJavaScript SDKの方の説明をしていきます。

あと、最終的には動いておりませんので分かる方は教えて下さい!

※慌てて書いた記事なので何か間違い等があるかもしれません。
気付かれた方はお手数ですがコメント欄にてご教授ください。

事前準備

とりあえずEC2などを使ってHTMLが動作する状態まで持って行ってください。

やってみたこと

とりあえずSDK内のREADME.mdに沿って色々やってみました。

とりあえずテストのHTMLを用意してみます。

test.html
<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>

    <script type="text/javascript" src="test.js"></script>
  </head>
</html>

HTMLを生成したところと同じディレクトリにSDK内のlibディレクトリとapigClient.jsを置きました。

次に実行用のjsを作成します。

test.js
var apigClient = apigClientFactory.newClient();

var params = { 
};

var body = { 
};

var additionalParams = { 
    headers: {
    },  
    queryParams: {
    }   
};

apigClient.dataGet(params, body, additionalParams)
    .then(function(result){
        alert("Success");
    }).catch( function(result){
        alert("Error");
    });

これでEC2でnginx動かして実行してみたところ・・・

エラーが返ってきました!

何故に?

原因はクロスドメイン制約に引っかかってたためですね。
で、S3みたいにCORS設定があるのかなと調べてみるとありました。

Enable CORS for a Method in API Gateway

ひゃっほーいと思い、手順にしたがってやってみたのですが・・・

ダメでした!なんでやねん!

CORS設定でやってみたこと

設定手順は25個あるんですが、やってることはヘッダーの追加ですね。
一応、やってみた手順おば。
手順は/dataを作成終わったところからを想定しています。

手順6からいきます。

スクリーンショット_2015-07-10_18_24_06.png

スクリーンショット_2015-07-10_18_25_29.png

スクリーンショット_2015-07-10_18_26_39.png

スクリーンショット_2015-07-10_18_24_06.png

スクリーンショット_2015-07-10_18_29_36.png

スクリーンショット_2015-07-10_18_31_03.png

スクリーンショット_2015-07-10_18_24_06.png

以上です。
ちなみに18〜24は重複した作業になるので多分Amazon側の表記ミスじゃないかなーと思っとります。
(余談ですがJavaScriptのREADME.mdもInclde all of the scripts in yoru webpageと誤字ってたりします・・・)

で、これをやってもSDKでAPIを叩けませんでした・・・

誰か解決法を知っていれば教えて下さい・・・(;´д`)

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8