血と汗となみだを流す

クラウドエンジニアになるための修業の場

Developers.ioの記事を読んでやってみる「AWS Cogito + API Gateway」

対象

やってみる

前提

  • 機能を理解するのが目的なので、terraformは使わずにAWSコンソールからポチポチ
  • ローカル環境はMac

Angular SPA でログインし、API Gateway を呼び出す

手順

  • 認可不要の API を定義し、SPAからデータを取得してみる
  • Cognito User Pools を作成し、新しいユーザーを用意する
  • Cognito User Pools から払い出された IDトークンが必要になるよう API Gateway に制限をかける
  • SPA にサインイン機能を追加する
  • SPA から制限付きAPIをコールする

準備

ローカル環境でもSPA(Single Page Application)を検証できるようにする

$ brew install npm
  • angular-http-serverをインストール(グローバルインストールしたら ng new でプロジェクト作れなかったのでグローバルインストールはしなかった)
$ npm install angular-http-server
  • Angular CLIインストール
$ npm install -g @angular/cli
  • Anglura CLIバージョン確認
$ ng -v
  • 存在感がすごい
➜  spa ng -v

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.4
Node: 9.11.1
OS: darwin x64
Angular:
...
- プロジェクト作成

$ ng new cognitotest

- プロジェクトをbuild

$ cd cognitotest $ ng build

- HTTPサーバ起動

$ cd dist $ angular-http-server

- `http://localhost:8080/` にアクセスして確認
[f:id:Anorlondo448:20180425062759p:plain]

### TypeScriptインストール
- インストール

$ npm install -g typescript



## 認可不要のAPIを使ってDynamoDBのデータを取得する
- [Amazon DynamoDB のデータを API Gateway と Angular( D3.js ) でサーバーレス可視化する](https://dev.classmethod.jp/server-side/serverless/visualize-dynamodb-serverless/)を見ながら作る
### Angular + D3.js でデータ可視化の準備をする
- tsファイルを作成

$ cd cognitotest/dist $ touch data.ts $ touch vote-bar-chart.ts

- 実装(ソースコピペ)
-