API Gateway の設定 (Optional)

step4-7-1

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

4.7.1 API Gatewayの画面を開く

こちらをクリックし、API Gatewayの画面を開きます。

4.7.2 REST APIの作成

  1. REST API の 構築 を押下 step4-7-3
  2. ダイアログが表示されるのでOKを押下 step4-7-4

4.7.3 APIの作成

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

4.7.4 API リソースの作成

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

step4-7-6

4.7.5 リソース名を設定

リソース名に datas と入力し、リソースの作成 を選択 (リソースパスに自動で反映されます)

step4-7-7

4.7.6 API リソースの作成

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

step4-7-8

4.7.7 API子リソースの作成

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

step4-7-9

4.7.8 メソッドの設定

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

step4-7-10

4.7.9 メソッドの定義

GET を選択し、横のチェックマークをクリック

step4-7-11

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

  1. 統合タイプは Lambda 関数 を選択
  2. Lambda プロキシ統合の使用にチェックを入れる
  3. リージョンは今回のハンズオンで利用しているリージョンを選択する
  4. Lambda に 4-6. で作成した Lambda 関数の名前({お名前}-yyyymmdd-api)を入力
  5. 保存 を押下 step4-7-12
  6. API GatewayからLambdaを実行しても良いかの確認が表示されるのでOKを押下 step4-7-13

4.7.11 API Gateway の設定の確認

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

step4-7-14

4.7.12 CORSの設定

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

step4-7-15

4.7.13 CORSの有効化

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

step4-7-16

4.7.14 デプロイの実行

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

step4-7-17

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

step4-7-18

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

step4-7-19

4.7.15 動作確認

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

step4-7-20

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