(Optional) API Gateway の設定

step4-7-1

Amazon API Gateway について詳しく知りたい場合は、こちらを参照ください。


4.7.1 REST API の作成

  1. API Gatewayの画面を開く
  2. REST API構築 を押す

step4-7-3

ダイアログが表示された場合は OK を押す

step4-7-4


4.7.2 API の作成

  1. プロトコルは REST を選択
  2. 新しいAPI を選択
  3. API名に {お名前}-yyyymmdd を入力
  4. APIの作成 を押す

step4-7-5


4.7.3 API リソースの作成

アクション -> リソースの作成 を選択

step4-7-6


4.7.4 リソース名を設定

  1. リソース名に datas と入力
  2. リソースの作成 を選択
    1. リソースパスに自動で反映されます

step4-7-7


4.7.5 API リソースの作成

先程作成した datas を選んだ状態で、アクションリソースの作成を選択

step4-7-8


4.7.6 API子リソースの作成

  1. リソース名に deviceid を入力
  2. リソースパスは {deviceid} に修正
    1. { } で囲む必要があるので注意
  3. リソースの作成を押す

step4-7-9


4.7.7 メソッドの設定

先程作成した {deviceid} を選択した(背景が青い)状態で アクションメソッドの作成 を選択

step4-7-10


4.7.8 メソッドの定義

  1. GET を選択
  2. 横のチェックマークをクリック

step4-7-11


4.7.9 GET 実行時の Lambda 呼び出し設定

  1. 統合タイプは Lambda 関数 を選択
  2. Lambda プロキシ統合の使用にチェックを入れる
  3. リージョンは今回のハンズオンで利用しているリージョンを選択
  4. Lambda に 4-6 で作成した Lambda 関数の名前({お名前}-yyyymmdd-api)を入力
  5. 保存 を押す

step4-7-12

API Gateway から Lambda を実行しても良いかの確認が表示されるので OK を押す

step4-7-13


4.7.10 API Gateway の設定の確認

以下の画像のような構成が表示されていることを確認する

step4-7-14


4.7.11 CORS の設定

{deviceid} を選択した(背景が青色)状態で アクション -> CORSの有効化 を選択

step4-7-15


4.7.12 CORS の有効化

  1. CORS を有効にして既存の CORS ヘッダーを置換 を押す
  2. 確認画面が出るので はい、既存の値を置き換えます を押す

step4-7-16


4.7.13 デプロイの実行

アクションAPIのデプロイ をクリック。 これによって作成した API が公開され、Global からアクセス可能な URI が作成される。

step4-7-17

  1. デプロイされるステージは 新しいステージ を選択
  2. ステージ名は handson と入力
  3. デプロイ を押す

step4-7-18

生成されたURLをメモしておく。

step4-7-19


4.7.14 動作確認

  1. こちら からソースコードをダウンロード
  2. DrawGraph フォルダ内 js/crateGraph.js を開き、以下の箇所を編集
    1. 1行目の device_name に作成したモノの名前を入力: var device_name = "{お名前}-yyyymmdd"
    2. 2行目 API Gatewayのデプロイ時に表示されたURLを入力: var hosturl = "https://xxx.execute-api.ap-northeast-1.amazonaws.com/handson"
  3. 上記の修正後にご自分のPCから DrawGraph フォルダ内 drawGraphIndex.html をブラウザで起動
  4. 以下のようなグラフが表示されればOK

step4-7-20

上記のグラフでは DynamoDB に保存されたデバイスの TEMPERATURE の値を表示しています。