サーバレスアーキテクチャ
入門ハンズオン
アマゾンウェブサービスジャパン株式会社
半場光晴
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
このスライド：
https://bit.ly/28Jm2RR
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
自己紹介
• 半場光晴 はんばみつはる
• ソリューションアーキテクト
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
TECHNICAL &
BUSINESS
SUPPORT
AWS
MARKETPLACE
APPLICATION
SERVICES
PLATFORM
SERVICES
Analytics
Support
Big Data
& HPC
Business
Apps
Security
Containers
Hadoop
Identity
Source
Code
Functions
Streaming
Push
Notifications
Build
Tools
Identity
Data
Pipelines
Mobile
Analytics
Deployment
Data Store
Machine
Learning
Mobile
Backend
DevOps
Real-time
HYBRID CLOUD
MANAGEMENT
Virtual
Desktops
Direct
Connect
Sharing &
Collaboration
Identity
Federation
Email &
Calendaring
Deployment
Directories
Backups
Storage
Gateway
Integrated
Management
Development
Email
Account
Management
Backup
Solutions
Architects
Databases
Security
& Pricing
Reports
Mobile
& Web
Front-end
Notifications
Orchestration
Training &
Certification
App
Sync
Search
Partner
Ecosystem
Development
Queuing
Data
Warehousing
Professional
Services
Mobile
ENTERPRISE
APPS
SECURITY &
MANAGEMENT
Virtual Private
Networks
Identity &
Access
Encryption
Keys
Configuration
Monitoring
Dedicated
INFRASTRUCTURE
SERVICES
Industry
Solutions
Regions
Availability
Zones
Databases
Compute
Storage
SQL, NoSQL,
Caching
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Networking
CDN
Agenda
1.
2.
3.
4.
5.
6.
ServerがLess？
AWSのアーキテクチャパターン
今日のゴール
ハンズオン
後片付け
アンケート回答
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Agenda
1. ServerがLess？
2. AWSのアーキテクチャパターン
3. 今日のゴール
4. ハンズオン
5. 後片付け
6. アンケート回答
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
ServerがLess？
サーバーなどもう必要ない
という意味ではなく、
開発者は、もうサーバーのことをあれこれ考えな
くて良い
なぜなら、
クラウドが、まるっとサーバーの面倒見るから
というような意味です
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Agenda
1. ServerがLess？
2. AWSのアーキテクチャパターン
3. 今日のゴール
4. ハンズオン
5. 後片付け
6. アンケート回答
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWSのアーキテクチャパターン
① General Web Architecture
② Serverless Architecture
③ 2-Tier Architecture
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
① General Web Architecture
クライアントは
HTTP(S)でWebサーバと
通信
Elastic Load Balancing
(以下ELB)
Amazon
Elastic Compute Cloud
(以下EC2)
サーバサイドは
ELB + EC2 + RDS
といった基本構成
Amazon
Relational Database Service
(以下RDS)
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
① General Web Architecture
‣
‣
メリット
‣ 実績が多く枯れた構成
‣ カスタマイズ性が高い
‣ 場合によっては後述のサーバレスアー
キテクチャよりスケールしやすい
デメリット
‣ サーバのスペック、台数などスケール
を意識して設計する必要がある
‣ サーバの運用は利用者に任されている
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
② Serverless Architecture
Amazon Cognito
(以下Cognito)
クライアントアプリはCognitoから
Temporary Credentialsを得た後、
JSONでWeb APIと通信
Amazon API Gateway
(以下API GW)
AWS Lambda
(以下Lambda)
サーバサイドは
API GW/Lambda/DynamoDB
といったマネージドサービスを用い、
EC2やELBを利用しない
Amazon DynamoDB
(以下DynamoDB)
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
② Serverless Architecture
‣
‣
メリット
‣ クライアント側の実装は従来とあまり
変わらずノウハウを活かせる
‣ サーバの運用、スケールはAWSに一任
できる
‣ CognitoによるセキュアなAPIアクセ
ス制御が可能
‣ コスト効率が高い
デメリット
‣ カスタマイズ性が低い
‣ 運用ノウハウが枯れていない
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
③ 2-Tier Architecture
クライアントアプリはCognitoから
Temporary Credentialsを得た後、
AWS SDKを通じて各AWSリソース
のAPIを直接叩く
Cognito
Amazon
Mobile Analytics
(以下MA)
Lambda
サーバサイドは各AWSリソースを
セッティングしておくのみ
(左図は一部の例)
DynamoDB
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
③ 2-Tier Architecture
‣
メリット
‣ インフラの運用、スケールはAWSに一任
できる
‣
‣
‣
上限値の緩和申請は除く
Cognitoによるセキュアなアクセス制御が
可能
‣ Web APIの設計は不要
‣ コスト効率が高い
デメリット
‣ カスタマイズ性が低い
‣ 運用ノウハウが枯れていない
‣ クライアントサイドが各AWSリソースに
依存する
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Q: どのアーキテクチャを採用すべきか?
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Q: どのアーキテクチャを採用すべきか?
A:
三者択一でなく
メリット/デメリットを
参考に適材適所で
組み合わせを
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
今日はサーバレスでビジネスロジックに集中！
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
キーとなる２つのサービス
Amazon
API Gateway
AWS
Lambda
可用性の高い
どのようなスケールであっても、
コンピューティングインフラストラクチャで
簡単に API の配布、保守、監視、保護が行える
アップロードされたコードを実行する
全面的に管理されたサービス
コンピューティングリソースの管理をすべて担当する
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amazon API Gateway
Web APIの作成・保護・運用と公開を簡単に
• 特徴
Mobile Apps
API Gateway
Cache
– OS、キャパシティ等インフラの管理不要
– バックエンドとしてLambda、既存Webシス
テムを利用可能
– スロットリング/キャッシュ
AWS Lambda
functions
API
Gateway
Endpoints on
Amazon EC2 /
Amazon Elastic
Beanstalk
Websites
Services
Amazon
CloudWatch
Monitoring
(https://aws.amazon.com/jp/api-gateway/)
• 価格体系
Any other publicly
accessible endpoint
(https://aws.amazon.com/jp/api-gateway/pricing/)
– 呼び出し回数とキャッシュ容量
– 100万回の呼び出しにつき$3.5
– キャッシュ容量に応じて$0.02/時〜$3.8/時
AWS
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Lambda
イベントをトリガーにコードを実行するコンピュートサービス
インフラ管理不要
ビジネスロジックにフォーカスできる
コードをアップロードするだけで、あ
とはAWS Lambdaが以下をハンドリ
ング
高いパフォーマンス
イベントのレートに合う
ようにLambdaが自動で
スケール
細やかな料金
100ミリ秒単位でのコンピュート
時間に対する価格設定
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Lambda
サービスの組み合わせ
■リアルタイムデータ処理として
■イメージのリサイズやサムネイルの作成
元画像
1
3
リアルタイム
Amazon Kinesis
サムネイル画像
Amazon S3 Bucket イベント
2
AWS Lambda
集計処理
Cloudwatch logsやSNSなど
との連携も可能
■SWF Workerとして
（バッチジョブフローのタスクとして）
■値チェックや別テーブルへのコピー
Amazon DynamoDB
Table and Stream
AWS Lambda
別テーブルを
更新
画像処理
AWS Lambda
プッシュ通知
配信処理
AWS Lambda
AWS
Lambda
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Agenda
1. ServerがLess？
2. AWSのアーキテクチャパターン
3. 今日のゴール
4. ハンズオン
簡易掲示板
http://j.mp/20151121_serverless
5. 後片付け
6. アンケート回答
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amazon
S3
Amazon
Cognito
Amazon
API Gateway
AWS
Lambda
http://j.mp/20151121_serverless
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amazon
DynamoDB
① S3のStaticWebsiteにアクセス
１
• S3の静的ウェブサイトホス
ティング機能でホストされた
HTML, JS, CSSにアクセス。
以降は全てAjaxで処理する。
http://j.mp/20151121_serverless
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
② Cognitoから認証/設定情報取得
１
2
• AWSのリソースにアクセスする
ための一時的な認証情報を
Cognitoから取得。ハードコー
ドしておく必要はない。
• Cognitoにユーザごとの設定値
（プルダウン選択や投稿者名）
を保存、取得する
http://j.mp/20151121_serverless
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
③ AjaxでAPI Gatewayを叩く
１
2
• Cognitoから取得した認証情
報を用いる。
• 新規コメント投稿や投稿内容
の取得を行う。
3
http://j.mp/20151121_serverless
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
④ APIがLambdaをキック
１
2
• LambdaでDynamoDBにア
クセスし、情報の登録/取得
を行う。
• No servers！
3
4
http://j.mp/20151121_serverless
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
⑤ LambdaでDynamoDBを操作
１
• 情報の取得と更新を行う。
2
3
4
http://j.mp/20151121_serverless
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
5
今日学べる技術
① S3 静的ウェブサイトホスティング
１
② Cognito Indentity & Cognito Sync
③ API Gateway (IAM認証, CORS)
2
④ Lambda Function
⑤ DynamoDB
3
4
http://j.mp/20151121_serverless
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
5
Agenda
1. ServerがLess？
2. AWSのアーキテクチャパターン
3. 今日のゴール
4. ハンズオン
5. 後片付け
6. アンケート回答
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
ハンズオンの注意点
•
以下の URL から Asset_20160531.zip をダウンロードしてください。
https://bit.ly/28K0PWq
– コピペすると File not found になる場合があります
•
ディレクトリ構成
–
lambda_functions
•
•
–
readTimeline.js
writeTimeline.js
static_website
•
•
•
index.html
favicon.ico
js
–
–
–
for_copy_and_paste
•
–
handson.js
lib
…
cli_script.sh
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
マネジメントコンソールログイン
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Management Consoleにログインする
 AWSのホームページ（http://aws.amazon.com/）から、
管理コンソール「AWS Management Console」にログイン
します。
1. [アカウント] をクリック
2. [AWS マネジメント コンソール] をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Management Consoleにログインする
 作成したAWSアカウント情報を入力してサインインします。
1. メールアドレス入力
2. クリック
3. パスワード入力
4. クリックしてサインイン
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Management Consoleにログインする
•
MFA を設定しているアカウントは Authentication Code を入力します。
–
MFAの詳細は以下URLを参照
http://aws.amazon.com/jp/iam/details/mfa/
1. Authentication Code を入力
2. クリックしてサインイン
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
リージョンを変更する
注意
このハンズオンは全て [Tokyo]で実施します。
 Asia Pacific(Tokyo)リージョンに変更します。
1. リージョン選択メニュー
2. [Asia Pacific(Tokyo)]
を選択
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
ここからハンズオン始まります
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コレ
S3バケットの作成
※Chrome推奨！
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
S3を選択する
 サービス一覧を表示してS3を選択します
1. [ サービス一覧 ]ボタン
2. [ S3]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
バケットを作成する
 配信用のバケットを作成します
※初めて作成する場合は見た目が異なるかもしれません（次ページ）
1. [ Create Bucket ]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
（参考）バケットを作成する
 初めて作成する場合は以下のようになっているかもしれません
1. [ Create Bucket ]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
バケットを作成する
 [YYYYMMDD-serverless-handson-xxxx]というバケット名で[ Tokyo ]
リージョンに作成します
1. [YYYYMMDD-serverless-handson-xxxx]を入力
YYYYMMDDは今日の日付、xxxxは名
前等で置き換えてください。
Txtなどでコピーしておいてください
2. [Tokyo]を選択
3. [Create]を選択
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
バケットを作成する
 作成したバケットがリストに表示されるのでクリックします
作成したバケットをクリック
1. [YYYYMMDD-serverless-handson-xxxx]を入力
YYYYMMDDは今日の日
付、xxxxは名前等で置
き換えてください。
2. [Tokyo]を選択
3. [Create]を選択
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
静的Webサイトホスティングの設定をする
 [Static Website Hosting]をenableにし、静的コンテンツを配信する設定
を行います
1. [Properties]をクリック
2. [Static Website Hosting]
をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
静的Webサイトホスティングの設定をする
 [Enable website hosting]を選択し、Indexドキュメントの設定をします
1. [Enable website hosting]を選択
2. [index.html]と入力
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
3. [Save]
をクリック
バケットポリシーの設定をする
 Webサイトとして外部から誰でもアクセス可能にするためバケットポリ
シーを設定します
1. [Add bucket policy]を選択
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
バケットポリシーの設定をする
 Webサイトとして外部から誰でもアクセス可能にするためバケットポリ
シーを設定します
1. Assetsからコピペしバケット名を
次ページを参照し修正する
2. [Save]をクリックした後、
[Close]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
バケットポリシーの設定をする
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
実際に作成したバケット名
"Action": [
に置き換えてください
"s3:GetObject”
],
"Resource": [
"arn:aws:s3:::yyyymmdd-serverless-handson-yourname/*”
]
}
※これをコピペすると不要な改行が入ったりするため、
]
}
Asset/s3_bucket_policy.txtからからコピーするか手打ちしてください
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
ハンズオン用ファイルをアップロードします
 ダウンロードしたAsetのうち、static_websiteディレクトリの中身を全て
アップロードします
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
確認
 ブラウザからバケットの[Endpoint]にアクセスし、正しく設定されている
ことを確認します

http://20151121-serverless-demo.s3-website-ap-northeast-1.amazonaws.com/
S3バケットを参照し、各自自分のエンドポイントを指定する
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コレ
Cognitoの設定
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Cognitoを選択する
 サービス一覧を表示してCognitoを選択します
1. [ サービス一覧 ]ボタン
2. [Cognito]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Identity Poolを作成する
 ハンズオン用に新たにCognitoのIdenetity Poolを作成します
1. [Manage Federated Identities]を
クリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Identity Poolを作成する
 [Create new identity pool]をクリックして作成します
1. [Create new ideneity pool]
をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Identity Poolを作成する
 [YYYYMMDDHandsonPool]という名前で作成します
 ハンズオン用に新たにCognitoのIdenetity Poolを作成します
 [Enable access to unauthenticated identities]にチェックを入れ、ゲス
トユーザによるアクセスを許可します
YYYYMMDDは今日の日付、xxxxは名
前等で置き換えてください。
Txtなどでコピーしておいてください
1. [YYYYMMDDHandsonPoolxxxx]と入力
2. [Enable access to ~]にチェック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Identity Poolを作成する
 画面下部までスクロールし、[Create Pool]をクリックします
1. [Create Pool]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Identity Poolを作成する
 [Allow]をクリックしてデフォルトのIAM Roleを作成します
1. [Allow]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Identity Poolを作成する
 完了（SDKのダウンロードになっていればOK）
最後に使うので、txtにコピーなど
を残しておいてください
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コレ
DynamoDBのテーブルを作成
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
DynamoDBを選択する
 サービス一覧を表示してDynamoDBを選択します
1. [DynamoDB]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
テーブルを作成する
 [Create table]をクリックし、テーブルを作成します
1. [Create table]をクリック
← 初めての場合はこんな画面です
クリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
テーブルを作成する
 [YYYYMMDD-serverless-handson]という名前でテーブルを作成します
 プライマリキーとして[Track]を[String]で追加し、ソートキーとして
[Timestamp]を[Number]で設定します
1. [YYYYMMDD-serverless-handson-xxxx]と入力
2. [Track]、[String]と入力
4. [Timestamp]、[Number]と入力
3. [Add sort key]
をチェック
• テーブル名はYYYYMMDDを本日の年月日
で置き換えてください。
• ｘｘｘｘは名前などに置き換えてください。
5. [Create]をクリック
• 後でテーブル名を使うため、txtにコピーを。
• PKの大文字小文字に注意してください。
©2016,
Amazon Web Services, Inc. or its affiliates. All rights reserved.
テーブルを作成する
 完了
1. [Enable website hosting]を選択
2. [index.html]と入力
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Lambdaファンクションを作成
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Lambdaを選択する
 サービス一覧を表示してLambdaを選択します
1. [ サービス一覧 ]ボタン
2. [Lambda]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Lambda Functionを作成する
 [Create a Lambda function] をクリックしてLambdaを作成します
※初めての場合はこんな
画面かもしれません
1. [Create a Lambda function]をクリック
[Get Started]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Lambda Functionを作成する
 予め用意されたBlueprintから”simple-mobile-backend”を選びます
 ”mobile”を入力するとフィルタリングできます
1. “mobile” と入力して絞りこむ
2. [simple-mobile-backend]
をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コメントを投稿するLambda Functionを作成する
 Nameに[YYYYMMDDhandsonWriteTimelinexxxx]と入力し、Runtimeと
して[Node.js 4.3]、Code entry typeは[Edit code inline]を選択する
1. [YYYYMMDDhandsonWriteTimelinexxxx]
と入力
2. [Node.js 4.3]を選択
3. [Edit code inline]を選択
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コメントを投稿するLambda Functionを作成する

画面をスクロールし、先にダウンロードしたファイルから[lambda_functions/writeTimeline.js]
の内容をブラウザ上のインラインエディタにコピーし、テーブル名を修正します
1.作成したDynamoDBテーブル名に修正する
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コメントを投稿するLambda Functionを作成する
 画面をスクロールし、Roleのセレクトボックスから
[*Basic with DynamoDB]を選択し、DynamoDBにアクセスできる
Roleを作成します
1. [*Basic with DynamoDB]を選択
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コメントを投稿するLambda Functionを作成する
 新しいウィンドウが開いたら[Allow]をクリックし、Roleを作成します
1. [Allow]をクリック
この画面が表示されない場合は
ポップアップブロックを確認してください
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コメントを投稿するLambda Functionを作成する
 作成したRoleが設定されていることを確認し、[Allow]をクリックします
1. 作成したRoleが選択されていることを確認
２. [Next]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コメントを投稿するLambda Functionを作成する
 設定した内容を確認し、[Create function]をクリックします
1. [Create function]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コメントを投稿するLambda Functionを作成する
 Lambda functionが作成できました
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コメントを投稿するLambda Functionを作成する
 Lambda functionが作成できました
画面右上に表示される
ARNの情報を覚えておいてください。
txtにメモなど。
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コメントを投稿するLambda Functionを作成する
 Lambda functionをテストします
1. [Test]をクリック
2. [Test event]のJSONを編集
{
"track": "Test",
"comment": "Hello AWS Lambda",
"name": "xxxx"
}
3. [Save and Test]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コメントを投稿するLambda Functionを作成する
 Lambda functionのテスト結果を確認します
1. スクロールダウンしてページ下部を表示
2. 成功になっていることを確認
3. 内容が[Test event]で入力した値と一致することを確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
コメントを投稿するLambda Functionを作成する
 テスト結果がDynamoDBに書き込まれていることを確認します
1. DynamoDBに書き込まれていることを確認する
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
タイムラインを読み込むLambda Functionを作成する
 同様の手順で、もう一つLambda Functionを作成してください。
 Function name, コピーするソースコードが異なるので注意してください。
Nameは[YYYYMMDDhandsonReadTimelinexxxx]
と入力
lambda_functions/readTimeline.js
からコピー
DynamoDBのテーブル名を修正
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
タイムラインを読み込むLambda Functionを作成する
 Lambda functionをテストします
1. [Test]をクリック
2. [Test event]のJSONを編集
{
"track": "Test"
}
3. [Save and Test]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
タイムラインを読み込むLambda Functionを作成する
 Lambda functionのテスト結果を確認します
1. スクロールダウンしてページ下部を表示
2. 成功になっていることを確認
3. 取得した内容が先ほど書き込んだ内容と一致することを確認
4. 内容が[Test event]で入力した値と一致することを確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Lambda Function作成完了
 ２つのLambda Functionが作成できました
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
APIを作成
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
APIを作成する
1. APIを作成する
2. リソース [/comments] を作成する
3. [GET]メソッドを作成する
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
GETメソッドの動作確認
GETメソッドのAuthを設定
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
POSTメソッドの動作確認
POSTメソッドのAuthを設定
4. [POST]メソッドを作成する
5. CORSを有効にする
6. Cognito Unauth Identityに対応
7. APIをDeployする
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
API Gatewayを選択する
 サービス一覧を表示してAPI Gatewayを選択します
1. [ サービス一覧 ]ボタン
2. [API Gateway]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
APIを作成する
 [Create API]をクリックしてAPIを作成します
1. [Create API]をクリック
※初めてAPIを作る場合はまずGet Startedをクリックします
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
APIを作成する
 [YYYYMMDDHandsonAPI]という名前で作成します
1. [YYYYMMDDHandsonAPIxxxx]と入力
YYYYMMDDを本日の年月日で置
き換えてください
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
2. [Create API]を
クリック
APIを作成する
 APIが作成できたので続けてリソースやメソッドを定義していきます
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
APIを作成する
1. APIを作成する
2. リソース [/comments] を作成する
3. [GET]メソッドを作成する
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
GETメソッドの動作確認
GETメソッドのAuthを設定
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
POSTメソッドの動作確認
POSTメソッドのAuthを設定
4. [POST]メソッドを作成する
5. CORSを有効にする
6. Cognito Unauth Identityに対応
7. APIをDeployする
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
リソースを作成する
 [Actions] > [Create Resource]をクリックして子リソースを定義します
1. [Actions]をクリック
2. [Create Resource]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
リソースを作成する
 [comments]という名前のリソースを作成します
1. [comments]と入力
2. [Create Resource]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
リソースを作成する
 リソース [comments] が作成できました
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
APIを作成する
1. APIを作成する
2. リソース [/comments] を作成する
3. [GET]メソッドを作成する
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
GETメソッドの動作確認
GETメソッドのAuthを設定
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
POSTメソッドの動作確認
POSTメソッドのAuthを設定
4. [POST]メソッドを作成する
5. CORSを有効にする
6. Cognito Unauth Identityに対応
7. APIをDeployする
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを作成する
 [comments]にメソッドを追加します
2. [Actions]をクリック
3. [Create Method]をクリック
1. [/comments]を選択
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを作成する
 [comments]に[GET]メソッドを追加します
1. [GET]を選択
2. [✓]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを作成する
 Integration typeとして[Lambda Function]を選択し、[ap-northeast-1]
の[YYYYMMDDhandsonReadTimeline] を選択してSaveをクリック
1. [Lambda Function]を選択
2. [ap-northeast-1]を選択
4. [Save]をクリック
3. [YYYYMMDDhandsonReadTimeline]
と入力
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを作成する
 Lambda FunctionへのPermissionを与える
1. [OK]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを作成する
 [comments]に対する[GET]メソッドが作成できました
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
注意！ここからの設定中、ひとつ前の画面に戻るために
ブラウザの[戻る]や左の[Resources]を使わないでください
※設定中のメソッド情報が失われる恐れがあります
戻るときはここから!!
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Method Request
 [Method Request]をクリック
1. [Method Request]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Method Request
 Query Parameterを設定する
1. [URL Query String…]をクリックして開く
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Method Request
 Parameter ”track” を追加する
1. Add query stringをクリック
2. Name に “track” と入力
3. チェックマークをクリック
4. 追加されたことを確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Method Request
 Method Requestの設定が完了しました
1. [Method Execution]をクリックして前の画面に戻ってください
（ブラウザの[戻る]や左メニュのリソースをクリックしないこと！）
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Method Request
1. [Auth]が“None” であることを確認
2. [Query Strings]が”track”で
あることを確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Integration Request
 [Integration Request]をクリック
1. [Integration Request]を
クリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Integration Request
 [Body Mapping Templates]をクリックして開く
1. クリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Integration Request
 Body Mapping Templateを設定する
1. [When there … (recommended]
を選択
4. チェックマークをクリック
3. [application/json]と入力
2. [Add mapping template]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Integration Request
 Mapping Templateを設定する
2. 鉛筆マークをクリック
1. [appliation/json]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Integration Request
 Mapping Templateを設定する
1. 下記の内容入力
#set($inputRoot = $input.path('$'))
{
"track": "$input.params('track')"
} ※上記をコピペすると不要な改行が入ったりするので
テキストからコピーするか手打ちしてください
2. [Save]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Integration Request
 [Method Execution]をクリックして戻る
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Integration Request
 GETメソッドをテストする
4. [Response body]が先ほどLambdaで
作成したitemと一致することを確認
1. [Test]をクリック
2. [track]に”Test”と入力
3. [Test]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Method Request
 [Method Request]の認可機能を有効にする
1. [Method Request]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Method Request
 Authorization typeを[AWS_IAM]に変更する
1. [AWS_IAM]を選択する
２. チェックマークをクリックして確定
（忘れがち！)
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
メソッドを設定する – Method Request
 Authorization typeを[AWS_IAM]に変更する
1. AWS_IAMが選択されていることを確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Integration Request
 [Integration Request]の認可機能を有効にする
1. [Integration Request]を
クリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Integration Request
 APIコール時に使用したクレデンシャルを使ってLambda functionを実行
するように設定する
1. チェックを入れる
注:ここがチェックできなくなっている場合、
Method Request > Auth Type の設定が
AWS_IAM で保存できていません！
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GETメソッドを設定する – Integration Request
 GETメソッド設定完了
1. [Auth]が“AWS_IAM” であることを確認
2. [ARN]をメモっておいてください
3. [Query Strings]が”track”であることを再確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
APIを作成する
1. APIを作成する
2. リソース [/comments] を作成する
3. [GET]メソッドを作成する
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
GETメソッドの動作確認
GETメソッドのAuthを設定
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
POSTメソッドの動作確認
POSTメソッドのAuthを設定
4. [POST]メソッドを作成する
5. CORSを有効にする
6. Cognito Unauth Identityに対応
7. APIをDeployする
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを作成する
 [comments]にPOSTメソッドを追加します
2. [Actions]をクリック
3. [Create Method]をクリック
1. [comments]を
選択
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを作成する
 [comments]に[POST]メソッドを追加します
1. [POST]を選択
2. [✓]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを作成する
 Integration typeとして[Lambda Function]を選択し、[ap-northeast-1]
の[YYYYMMDDhandsonPostTimeline] を選択する
1. [Lambda Function]を選択
2. [ap-northeast-1]を選択
4. [Save]をクリック
3. [YYYYMMDDhandsonWriteTimeline]
©2016, Amazon
Web Services, Inc. or its affiliates. All rights reserved.
と入力
POSTメソッドを作成する
 Lambda FunctionへのPermissionを与える
1. [OK]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを作成する
 POSTメソッドが作成できました
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
注意！メソッドの設定中、ひとつ前の画面に戻るために
ブラウザの[戻る]や左の[Resources]を使わないでください
※設定中のメソッド情報が失われる恐れがあります
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Integration Request
 [Integration Request]をクリック
1. [Integration Request]を
クリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Integration Request
 APIコール時に使用したクレデンシャルを使ってLambda functionを実行
するように設定する
1. [Body Mapping Template]をクリックして開く
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Integration Request
 Mapping Templateを設定する
1. [When there … (recommended]
を選択
4. チェックマークをクリック
3. [application/json]と入力
2. [Add mapping template]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Integration Request
 Mapping Templateを設定する
2. [$input.json(‘$’)]と入力
$input.json('$')
2. [Save]を選択
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Integration Request
 POSTメソッドの設定は以上。[Method Execution]をクリックして戻る
1. [Method Execution]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Integration Request
 POSTメソッドをテストする
{
"track": "Test",
"comment": "Hello API GW",
"name": “xxxx"
1. [Test]をクリック
}
2. [Request body]を編集
3. [Test]をクリック
4. [Logs]の最後に
に”successfully
completed execution”
とhttp statusコード
が”200”となっていること
を確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Integration Request
 テスト結果がDynamoDBに書き込まれていることを確認する
Itemの情報がAPI Gatewayで指定
した内容と一致することを確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Method Request
 [Method Request]の認可機能を有効にする
1. [Method Request]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Method Request
 Authorization typeを[AWS_IAM]に変更し、[✔]をクリック
1. [AWS_IAM]を選択する
2. [✔]をクリックする
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Method Request
 AWS_IAMが設定できたことを確認し、[Method Execution]から戻る
2. [Method Execution]をクリック
1. 選択内容が確定していることを確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Method Request
 [Method Request]設定完了
1. AWS_IAMが
反映されていることを確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Integration Request
 [Integration Request]の認可機能を有効にする
1. [Integration Request]を
クリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Integration Request
 APIコール時に使用したクレデンシャルを使ってLambda functionを実行
するように設定する
1. チェックを入れる
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
POSTメソッドを設定する – Integration Request
 POSTメソッド設定完了
1. [Auth]が“AWS_IAM” であることを確認
2. [ARN]をメモっておいてください
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
APIを作成する
1. APIを作成する
2. リソース [/comments] を作成する
3. [GET]メソッドを作成する
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
GETメソッドの動作確認
GETメソッドのAuthを設定
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
POSTメソッドの動作確認
POSTメソッドのAuthを設定
4. [POST]メソッドを作成する
5. CORSを有効にする
6. Cognito Unauth Identityに対応
7. APIをDeployする
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Cross Origin Resource Sharingの設定を行う
 JavaScriptから呼び出せるようにCORSの設定を行う
2. [Actions]をクリック
1. [comments]をクリック
3. [Enable CORS]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
CORSの設定を行う
 JavaScriptから呼び出せるようにCORSの設定を行う
1. [POST]と[GET]にチェック
2. [Enable CORS and replace ~]
をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
CORSの設定を行う
 JavaScriptから呼び出せるようにCORSの設定を行う
1. [Yes, replace existing values]
をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
CORSの設定を行う
 [OPTIONS]メソッドが追加されました
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
APIを作成する
1. APIを作成する
2. リソース [/comments] を作成する
3. [GET]メソッドを作成する
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
GETメソッドの動作確認
GETメソッドのAuthを設定
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
POSTメソッドの動作確認
POSTメソッドのAuthを設定
4. [POST]メソッドを作成する
5. CORSを有効にする
6. Cognito Unauth Identityに対応
7. APIをDeployする
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Cognito Unauth Indentity対応
 [OPTIONS]メソッドの[Integration Response]をクリック
1. [OPTIONS]をクリック
2. [Integration Response]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Cognito Unauth Indentity対応
 [HTTP Status 200] の [Header Mappings]を開き、
[Access-Control-Allow-Headers]の編集ボタンをクリック
1. 鉛筆マークをクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Cognito Unauth Indentity対応
 [x-amz-security-token]を追加し、[✔]をクリック
1. [,x-amz-security-token]を追加
2. [✔]をクリック
変更前: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token’
変更後: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,x-amz-security-token'
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Cognito Unauth Indentity対応
 [Method Execution]をクリックし、戻る
1. [Method Execution]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
APIを作成する
1. APIを作成する
2. リソース [/comments] を作成する
3. [GET]メソッドを作成する
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
GETメソッドの動作確認
GETメソッドのAuthを設定
1.
2.
3.
4.
Method Requestの設定
Integration Requestの設定
POSTメソッドの動作確認
POSTメソッドのAuthを設定
4. [POST]メソッドを作成する
5. CORSを有効にする
6. Cognito Unauth Identityに対応
7. APIをDeployする
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
API を Deploy する
 [Deploy API]ボタンをクリック
1. [Deploy API]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
API を Deploy する
 Stage nameに”demo”と入力し[Deploy API]ボタンをクリック
1. [demo]と入力
2. [Deploy]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
API を Deploy する
 Deploy完了！[Invoke URL]をメモしておいてください。
1. このURLをメモ
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
作成したAPI専用SDKを生成(Optional)
 JavaScript用のコードをダウンロードすることができます
1. [SDK Generation]タブをクリック
2. [JavaScript]を選択
3. [Generate SDK]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
IAMの設定
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
一時的な認証情報への権限付与
• CognitoのIdentity Poolで作
成される一時認証情報で、
認証
API Gateway, Lambdaを呼
び出せるようにする
☓
☓
http://j.mp/20151121_serverless
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Lambda→DynamoDBは設定済み
• Lambda function作成中に、
DynamoDBのテーブルにア
認証
クセスできるRoleをfunction
に設定済み
☓
☓
http://j.mp/20151121_serverless
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
○
S3へのアクセスは権限不要
○
認証
• Static Website Hosting目的
で使っており、バケットは既
にPublicである
☓
☓
http://j.mp/20151121_serverless
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
○
アクセスを許可するリソース名（ARN）を集める
それぞれ、マネジメントコンソールでARNの場所を探してみてください
※以下に記載したARN文字列は例であり、このまま利用することはできません
Lambda
 YYYYMMDDhandsonWriteTimeline
 arn:aws:lambda:ap-northeast-1:XXXXXXXX:function:YYYYMMDDhandsonWriteTimeline
 YYYYMMDDhandsonReadTimeline
 arn:aws:lambda:ap-northeast-1:XXXXXXXXXX:function:YYYYMMDDhandsonReadTimeline
 API Gateway
 /comments – GET – Method Request
 arn:aws:execute-api:ap-northeast-1:XXXXXXXXXXXX:XXXXXXXXX/*/GET/comments
 /comments – POST – Method Request
 arn:aws:execute-api:ap-northeast-1:XXXXXXXXXXXX:XXXXXXXXX/*/POST/comments
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
IAMの設定を行う
 Services > Security & Identity > IAMをクリック
1. [Services] メニューから
3. [IAM] をクリック
2. [Security & Identity にカーソルを合わせ
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
IAMの設定を行う
 左メニューから[Roles]をクリック
[Roles]を
クリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
IAMの設定を行う
 Cognitoで作成した一時認証用Roleをクリック
1. Cognitoで作成した
Pool名でフィルタリング
2. [〜〜Unauth_Role] のRole Nameを
クリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
IAMの設定を行う
 画面をスクロールし、Permissionsタブの[Create Role Policy]をクリック
1. [Create Role Policy]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
IAMの設定を行う
 Policy Generatorにチェックが入った状態で、[Select]をクリック
1. [Select]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
IAMの設定を行う
 Effectとして”Allow”、AWS Serviceとして”AWS Lambda”を選択し、
Actionsで”InvokeFunction”にチェックを入れる
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
IAMの設定を行う
 ARNに先ほど確認したLambda functionのARNを入力し、
[Add Statement]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
IAMの設定を行う
 Statementが一つ追加されたことを確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
IAMの設定を行う
 あと3つのARNについても同様に追加し、計4つのStatementを作る。
追加できたら[Next Step]をクリック
 LambdaとAPI Gatewayで選択するサービスが異なることに注意
1. [Next Step]をクリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
IAMの設定を行う
 Policy Documentが自動生成されたことを確認し、[Apply Policy]をクリック
1. [Apply Policy]を
クリック
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
IAMの設定を行う
 Inline Policyが追加されたことを確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
動作確認
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
各自の環境に合わせて情報修正
 static_website/js/cognitoOperator.js
 ファイル冒頭の cognitoPoolId の値を今回作った
Cognito Identity PoolのIDにしてください
 static_website/js/lib/apiGateway-js-sdk/apigClient.js
 55行目にある endpoint の値を今回作った
API GatewayのInvoke URLにしてください
 API GatewayのDeploy時にメモったものです
 それぞれS3にアップロードしなおしてください
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
今日学べた技術
① S3 静的ウェブサイトホスティング
１
② Cognito Indentity & Cognito Sync
③ API Gateway (IAM認証, CORS)
2
④ Lambda Function
⑤ DynamoDB
3
4
http://j.mp/20151121_serverless
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
5
実装確認
 Cognito Identity, Cognito Sync, API Gateway にアクセスしている箇所を確
認しましょう。
http://j.mp/20151121_serverless
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Agenda
1. ServerがLess？
2. AWSのアーキテクチャパターン
3. 今日のゴール
4. ハンズオン
5. 後片付け
6. アンケート回答
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
終了後、以下のリソースを削除する





今回作成したS3のバケット
DynamoDBのテーブル
Lambdaファンクション
API GatewayのAPI
Cognito Identity Pool
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Agenda
1. ServerがLess？
2. AWSのアーキテクチャパターン
3. 今日のゴール
4. ハンズオン
5. 後片付け
6. アンケート回答
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.
©2016, Amazon Web Services, Inc. or its affiliates. All rights reserved.

3位 3位