Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2017/03/11 ハンズラボ 株式会社
JAWS DAYS 2017 AWSワークショップ
AWSで始める
サーバレスな
RESTful API システム
Copyright © 2017. All rights reserved.
Copyright © 2017 All rights reserved.1
ハンズオンで使用するファイル
・以下から圧縮ファイルをダウンロードして下さい
https://s3-ap-northeast-1.amazonaws.com
/han...
Copyright © 2017 All rights reserved.2
ハンズラボ株式会社
• 情シス部門
 東急ハンズの各種システムの内製開発と運用保守
• 外販
 自社開発の経験を活かした受託開発、内製支援
東急ハンズのシステム子...
自己紹介
• 名前:加藤 雅之
• 所属:ハンズラボ株式会社
• 担当: 東急ハンズ
- AWSインフラ、IT
統制
ハンズラボ 外販
- AWS構築運用支援
等
Copyright © 2017 All rights reserved.4
AWS Samurai 2015 / 2016を連続受賞
2015 長谷川 2016 青木
Copyright © 2017 All rights reserved.5
今日の内容
サーバレス(Serverless)とは
RESTful APIについて
4つのRESTの原則
設計でのポイント
BaaSとFaaS
AWSのサーバレス
S...
Copyright © 2017 All rights reserved.6
今日の内容
hands - on
1.DynamoDBのテーブル作成
2.Lambda実行用ロールの作成
3.Lambda実装
4.API Gateway の作成とデ...
Copyright © 2017 All rights reserved.7
サーバレス(Serverless)とは
冗長性と可用性が担保される様なインフラの構築運用や、OSやミド
ルウェアを気にする必要が無い、開発に集中出来るアーキテクチャー...
Copyright © 2017 All rights reserved.8
主に使用されるAWSのサーバレス
Amazon S3(ファイルストレージ)
Amazon Cloudfront(コンテンツデリバリーネットワーク)
Amazon Dy...
Copyright © 2017 All rights reserved.9
RESTful APIとは
REST( Representational State Transfer )の原則に沿った形で設計され
たAPI(Application...
Copyright © 2017 All rights reserved.10
その1 ステートレス性
セッション情報等のクライアント側の状態を持たず、他のリクエスト情報か
らも完全に分離されている。
ステートフルとステートレスの違いは、オライ...
Copyright © 2017 All rights reserved.11
その2 統一インターフェース
処理 HTTPメソッド SQL CRUD操作
取得 GET SELECT READ
登録 POST INSERT CREATE
更新 ...
Copyright © 2017 All rights reserved.12
その3 アドレス可能性
URI(URL / URN)にて簡単に指し示す事が出来る
ユニークなアドレスを持つ
URI (Uniform Resource Identi...
Copyright © 2017 All rights reserved.13
その4 接続性
リソースの中に関連性を持つURIのハイパーメディアリンクを含む
事が出来る。
もちろん無理にリンクを設ける必要はない
例えば、商品購入リストのリソー...
Copyright © 2017 All rights reserved.14
API設計で最初にすること
まずは、とにかくシンプルに何をどうするを考える
何 = リソース(情報)の洗い出し
どうする = CRUD(httpメソッド)
シンプル...
Copyright © 2017 All rights reserved.15
API設計でのポイント
・リソース名をなるべく具体的な複数形の名詞にする
・バージョニングをどうするかを考える
おすすめはURIのパスに含める。他にはQueryパラ...
Copyright © 2017 All rights reserved.16
SPA(Single Page Application)のすゝめ
単一ページで構成されるWebアプリケーション
主にHTMLとJavascriptで構成されており、...
Copyright © 2017 All rights reserved.17
ハンズオン
Let’s hands - on
1.DynamoDBのテーブル作成
2.Lambda実行用ロールの作成
3.Lambda実装
4.API Gatewa...
Copyright © 2017 All rights reserved.18
DynamoDB サービスを開く
マネイジメントコンソールにログインしたら、左上の
「サービス」メニューをクリック
データベースグループにある「DynamoDB」を...
Copyright © 2017 All rights reserved.19
DynamoDB テーブル作成
「テーブルの作成」ボタンをク
リック
テーブル名
→ handson_db
プライマリーキー
→ id
プライマリーキー 属性
→ ...
Copyright © 2017 All rights reserved.20
DynamoDB テーブル情報の確認
概要タブが選択されている事を確認
右の様な画面で
テーブル名
プライマリーパーティションキー
テーブルの状態
を作成した通りか...
Copyright © 2017 All rights reserved.21
DynamoDB アラームの確認
アラームタブを選択
handson_dbの
ReadCapacity
WriteCapacity
のアラームが作成されている事を確認
Copyright © 2017 All rights reserved.22
DynamoDB キャパシティの確認
容量タブを選択
読み込み容量ユニット及び、書き込み容量ユニットがそれぞれ 5 となっている事を確認
Copyright © 2017 All rights reserved.23
DynamoDB 初期データ挿入1
項目タブを選択
項目の作成ボタンをクリック
項目の作成画面が開いたら左上の、選択項目から
Text を選択
※ 1参考画像
テキ...
Copyright © 2017 All rights reserved.24
DynamoDB 初期データ挿入2
ハンズオンファイルから
DynamoDBフォルダ内にある
DynamoDB_sampleData_xxx.txt
をテキストエデ...
Copyright © 2017 All rights reserved.25
DynamoDB 初期データ確認
正しく反映されているか内容を確認
修正したいデータにチェックをつけて、アクションから編集も可能です
Copyright © 2017 All rights reserved.26
Lambda実行ロール IAMサービスを開く
左上のサービスをクリック
セキュリティ、アイデンティティグループにあるIAMをクリック
Copyright © 2017 All rights reserved.27
Lambda実行ロール 新しいロールの作成1
IAMサービス画面に入ったら、左側のロールをクリック
「新しいロールの作成」ボタンをクリック
※IAMの権限作成は強力...
Copyright © 2017 All rights reserved.28
Lambda実行ロール 新しいロールの作成2
ロール名の設定で
lambda_exec
と入力し、次へをクリック
ロールタイプの選択で
AWS Lambdaの右にあ...
Copyright © 2017 All rights reserved.29
Lambda実行ロール 新しいロールの作成3
AmazonDynamoDB
FullAccess
と
AWSLambda
BasicExecutionRole
の2...
Copyright © 2017 All rights reserved.30
Lambda実装 サービスを開く
左上のサービスをクリック
コンピューティンググループにあるLambdaをクリック
Copyright © 2017 All rights reserved.31
Lambda実装 作成画面を開く
まだ作成した事がない場合は、
「今すぐ始める」
ボタンをクリック
既に作成した事がある場合は、
「Lambda関数の作成」
ボタン...
Copyright © 2017 All rights reserved.32
Lambda実装 関数の作成1
設計図の選択画面から画面中央にある
ブランク関数
をクリック
トリガーの設定では、そのまま次へ
Copyright © 2017 All rights reserved.33
Lambda実装 関数の作成2
関数の設定フェーズにて
名前
→ api_get_handson
説明
→ データ個別取得
ランタイム
→ Node.js 4.3
Copyright © 2017 All rights reserved.34
Lambda実装 関数の作成3
Lambda 関数のコード フェーズにて
コードエントリタイプ
→ コードをインラインで編集
ハンズオンファイルから
Lambdaフ...
Copyright © 2017 All rights reserved.35
Lambda実装 関数の作成4
環境変数の入力箇所のそれぞれに
→ TABLE_NAME → handson_db
ハンドラ
index.handler → ind...
Copyright © 2017 All rights reserved.36
Lambda実装 関数の作成5
詳細設定をクリックしタイムアウトを10秒へ
次へをクリックして、内容が設定した通りか確認をしたら「関数の作成」
以下のように「あめで...
Copyright © 2017 All rights reserved.37
Lambda実装 関数の作成6
左側のダッシュボードをクリックし、
同様の作業( 「作成画面を開く」 から「関数の作成5」)を
以下を変更しながら繰り返す
関数の作...
Copyright © 2017 All rights reserved.38
Lambda実装 関数の作成7
関数の作成2にて
名前
→ api_put_handson
説明
→ データ登録
関数の作成4にて
ハンドラ
index.handl...
Copyright © 2017 All rights reserved.39
Lambda実装 関数の作成8
関数の作成2にて
名前
→ api_delete_handson
説明
→ データ削除
関数の作成4にて
ハンドラ
index.ha...
Copyright © 2017 All rights reserved.40
Lambda実装 関数の作成9
左側の関数をクリックし、4つのlambda関数が登録されている事を確認
Copyright © 2017 All rights reserved.41
API Gateway の作成 サービスを開く
左上のサービスをクリック
アプリケーションサービスグループにあるAPI Gatewayをクリック
Copyright © 2017 All rights reserved.42
API Gateway の作成 作成画面を開く
まだ作成した事がない場合は、
「今すぐ始める」
ボタンをクリック
既に作成した事がある場合は、
「APIの作成」
ボ...
Copyright © 2017 All rights reserved.43
API Gateway の作成 APIのインポート
Swagger から インポートをチェックして、右のSwaggerファイルの選択から
ハンズオンファイルのAPI...
Copyright © 2017 All rights reserved.44
API Gateway の作成 Lambdaの紐付け1
リソースメニューの /resouce のGETをクリックし、
統合タイプ Lambda関数
Lambdaプロ...
Copyright © 2017 All rights reserved.45
API Gateway の作成 Lambdaの紐付け2
リソースメニューの /resouce /{resourceId} のDELETEをクリックし、
統合タイプ ...
Copyright © 2017 All rights reserved.46
API Gateway の作成 Lambdaの紐付け3
リソースメニューの /resouce /{resourceId} のGETをクリックし、
統合タイプ Lam...
Copyright © 2017 All rights reserved.47
API Gateway の作成 Lambdaの紐付け4
リソースメニューの /resouce /{resourceId} のPUTをクリックし、
統合タイプ Lam...
Copyright © 2017 All rights reserved.48
API Gateway の作成 Mockの紐付け1
リソースメニューの /resouce のOPTIONSをクリックし、
統合タイプ Mock
で保存する。
Copyright © 2017 All rights reserved.49
API Gateway の作成 Mockの紐付け2
リソースメニューのの /resouce /{resourceId} のOPTIONSをクリックし、
統合タイプ ...
Copyright © 2017 All rights reserved.50
API Gateway の作成 CORSの設定1
リソースメニューの /resouce 配下のOPTIONSをクリックし、
右下の統合レスポンスをクリック
Copyright © 2017 All rights reserved.51
API Gateway の作成 CORSの設定2
表内の左端にある三角(▶)をクリックし、更にヘッダーのマッピングの三角をクリック
Copyright © 2017 All rights reserved.52
API Gateway の作成 CORSの設定3
レスポンスヘッダー3種の右端にある鉛筆クリックし、マッピングの値を、
ハンズオンファイルのAPI Gatewayフ...
Copyright © 2017 All rights reserved.53
API Gateway の作成 デプロイ
アクションのAPIのデプロイをクリック 新しいステージを選択し
ステージ名
→ handson
でデプロイをクリック
Copyright © 2017 All rights reserved.54
API Gateway の作成 エンドポイントを確認
エンドポイント(URL)をメモ
Copyright © 2017 All rights reserved.55
動作確認 エンドポイントの登録
ハンズオンファイルのDEMOフォルダ内にある
Index.htmlをテキストエディタで開く
139行目の API_endpoint ...
Copyright © 2017 All rights reserved.56
動作確認
ハンズオンファイルのDEMOフォルダ内にある
Index.htmlをブラウザで開いて色々と動作を確認
Copyright © 2017 All rights reserved.57
動作詳細
Index.htmlの初回読み込み時及び、各タブ選択時
→ https://APIGatewayエンドポイント/resource/ GETメソッド
(ap...
Copyright © 2017 All rights reserved.58
時間の関係上、本日は省略しますが
クライアントでの動作にて問題が無いことを確認しましたら、
以下を実行する事で完全なサーバレスでの動作になります。
・動作検証済みの...
Copyright © 2017 All rights reserved.59
最後に
サーバレスでもシステム運用は必要です。
もちろんステートレスな構成が故の、デプロイの難しさやログの追尾
性等の問題があります。
魔法の様な銀の弾丸では無いが...
Copyright © 2017 All rights reserved.60
そんなエンジニアを募集中!
求むエンジニア!
ハンズラボは積極的に技術者採用中です。
Upcoming SlideShare
Loading in …5
×

AWSで始めるサーバレスな RESTful API システム

14,735 views

Published on

2017年3月11日 JAWS DAYS 2017 のワークショップにてハンズオンを実施した資料です。

Published in: Software
  • Login to see the comments

AWSで始めるサーバレスな RESTful API システム

  1. 1. 2017/03/11 ハンズラボ 株式会社 JAWS DAYS 2017 AWSワークショップ AWSで始める サーバレスな RESTful API システム Copyright © 2017. All rights reserved.
  2. 2. Copyright © 2017 All rights reserved.1 ハンズオンで使用するファイル ・以下から圧縮ファイルをダウンロードして下さい https://s3-ap-northeast-1.amazonaws.com /hands-lab-handson/jawsdays_handson.zip ・解凍すると以下の4フォルダがあります /API Gateway (API Gatewayの設定用テキスト) /Demo (動作確認用のフロントの静的ファイル) /DynamoDB (DynamoDBのテーブル構築用テキスト) /Lambda (Lambda関数の作成用テキスト)
  3. 3. Copyright © 2017 All rights reserved.2 ハンズラボ株式会社 • 情シス部門  東急ハンズの各種システムの内製開発と運用保守 • 外販  自社開発の経験を活かした受託開発、内製支援 東急ハンズのシステム子会社
  4. 4. 自己紹介 • 名前:加藤 雅之 • 所属:ハンズラボ株式会社 • 担当: 東急ハンズ - AWSインフラ、IT 統制 ハンズラボ 外販 - AWS構築運用支援 等
  5. 5. Copyright © 2017 All rights reserved.4 AWS Samurai 2015 / 2016を連続受賞 2015 長谷川 2016 青木
  6. 6. Copyright © 2017 All rights reserved.5 今日の内容 サーバレス(Serverless)とは RESTful APIについて 4つのRESTの原則 設計でのポイント BaaSとFaaS AWSのサーバレス SPA(Single Page Application)のすゝめ サーバレスとの相性 フロントエンドとの完全分離
  7. 7. Copyright © 2017 All rights reserved.6 今日の内容 hands - on 1.DynamoDBのテーブル作成 2.Lambda実行用ロールの作成 3.Lambda実装 4.API Gateway の作成とデプロイ 5.動作確認 6.S3へ静的ファイルの設置 7.Cloudfrontでキャシュ作成
  8. 8. Copyright © 2017 All rights reserved.7 サーバレス(Serverless)とは 冗長性と可用性が担保される様なインフラの構築運用や、OSやミド ルウェアを気にする必要が無い、開発に集中出来るアーキテクチャー BaaS(バックエンドサービス) データベースや認証、メッセージング等のサービス FaaS(Function as a Service) 必要な物はコードのみで処理を実行させる 注意:サーバは存在します
  9. 9. Copyright © 2017 All rights reserved.8 主に使用されるAWSのサーバレス Amazon S3(ファイルストレージ) Amazon Cloudfront(コンテンツデリバリーネットワーク) Amazon DynamoDB(NoSQLデータベース) Amazon API Gateway(アプリケーションインターフェース) AWS Lambda(コード実行サービス) Amazon Cognito(認証認可サービス) Amazon SQS(メッセージキューイング) 等々。。。 特に定義は無いですが、 EC2インスタンスが影に見えない事
  10. 10. Copyright © 2017 All rights reserved.9 RESTful APIとは REST( Representational State Transfer )の原則に沿った形で設計され たAPI(Application Programming Interface) その1 ステートレス性 他のリクエスト情報から完全に分離している その2 統一インターフェース HTTP定義通りのメソッドを使用する その3 アドレス可能性 URIで表されるユニークなアドレスを持つ その4 接続性 別のリンクを含めて辿る事が出来る
  11. 11. Copyright © 2017 All rights reserved.10 その1 ステートレス性 セッション情報等のクライアント側の状態を持たず、他のリクエスト情報か らも完全に分離されている。 ステートフルとステートレスの違いは、オライリーでRESTfulの本を監訳し ている方の有名なブログが分かりやすい。 http://yohei-y.blogspot.jp/2007/10/blog-post.html 客:Aセットください。 店員:サイドメニューは? 客:ポテトで 店員:ドリンクは? 客:コーラで 店員:以上で良いですか? 客:はい 客:Aセットください。 店員:サイドメニューは? 客:Aセットをポテトで 店員:ドリンクは? 客:Aセットをポテトとコーラで 店員:以上で良いですか? 客:Aセットをポテトとコーラで。以上 ステートレスステートフル
  12. 12. Copyright © 2017 All rights reserved.11 その2 統一インターフェース 処理 HTTPメソッド SQL CRUD操作 取得 GET SELECT READ 登録 POST INSERT CREATE 更新 PUT UPDATE UPDATE 削除 DELETE DELETE DELETE PUTしたIDがない場合はCreateとなる POSTはID指定が出来ないCREATE CRUDとSQLとの比較 操作は定義通りのHTTPメソッドで
  13. 13. Copyright © 2017 All rights reserved.12 その3 アドレス可能性 URI(URL / URN)にて簡単に指し示す事が出来る ユニークなアドレスを持つ URI (Uniform Resource Identifier) 識別子 名前とアドレスを識別する書き方 URL (Uniform Resource Locator) 住所 場所を示す書き方のルールでWebアドレスで用いられる URN (Uniform Resource Name) 名前 名前を永続的に識別する書き方のルールでISBN等がある 言語や実装依存の拡張子やパスを含めない → 環境が変わっても同じURIで動作
  14. 14. Copyright © 2017 All rights reserved.13 その4 接続性 リソースの中に関連性を持つURIのハイパーメディアリンクを含む 事が出来る。 もちろん無理にリンクを設ける必要はない 例えば、商品購入リストのリソースの中に、個別商品のハイ パーメディアリンク(URI)が記載されていれば接続性を保持して いる事になる。
  15. 15. Copyright © 2017 All rights reserved.14 API設計で最初にすること まずは、とにかくシンプルに何をどうするを考える 何 = リソース(情報)の洗い出し どうする = CRUD(httpメソッド) シンプル = リソースの関連性を単純化する
  16. 16. Copyright © 2017 All rights reserved.15 API設計でのポイント ・リソース名をなるべく具体的な複数形の名詞にする ・バージョニングをどうするかを考える おすすめはURIのパスに含める。他にはQueryパラメータやヘッダ等もある。 ・メッセージフォーマットを決める おすすめはJSON。他にはXML等も ・ドメインはAPIと分かりやすい物が良い ・URIを見ただけでリソースの関係性が分かるようにする ・リソースの階層は2階層くらいまで https://api.hands-lab.com/v2/users ユーザー一覧 https://api.hands-lab.com/v1/users/15/ ID15 ユーザーの指定 https://api.hands-lab.com/v2/articles/321/comments ID 321記事のコメント一覧
  17. 17. Copyright © 2017 All rights reserved.16 SPA(Single Page Application)のすゝめ 単一ページで構成されるWebアプリケーション 主にHTMLとJavascriptで構成されており、DOM操作でページ切り替 えやAjax非同期更新を行う AngularやReactやVue.js等々のフレームワークやライブラリがある 細かく非同期で更新をかけたいSPAと、疎結合でマイクロサービス化 されているRESTful APIは相性が良い UI/UXをフロントエンドに任せることで、うまく分離して作業を進める 事が出来る。 またAPIとのやり取りをリソース情報のみに徹底する事は、アプリ対 応等に派生した場合も別対処する必要は無い。
  18. 18. Copyright © 2017 All rights reserved.17 ハンズオン Let’s hands - on 1.DynamoDBのテーブル作成 2.Lambda実行用ロールの作成 3.Lambda実装 4.API Gateway の作成とデプロイ 5.動作確認 〜 以下、補足説明 〜 6.S3へ静的ファイルの設置 7.Cloudfrontでキャシュ作成
  19. 19. Copyright © 2017 All rights reserved.18 DynamoDB サービスを開く マネイジメントコンソールにログインしたら、左上の 「サービス」メニューをクリック データベースグループにある「DynamoDB」をクリック
  20. 20. Copyright © 2017 All rights reserved.19 DynamoDB テーブル作成 「テーブルの作成」ボタンをク リック テーブル名 → handson_db プライマリーキー → id プライマリーキー 属性 → 文字列 テーブル設定 → デフォルト設定の仕様 保存ボタンでテーブル作成
  21. 21. Copyright © 2017 All rights reserved.20 DynamoDB テーブル情報の確認 概要タブが選択されている事を確認 右の様な画面で テーブル名 プライマリーパーティションキー テーブルの状態 を作成した通りか確認
  22. 22. Copyright © 2017 All rights reserved.21 DynamoDB アラームの確認 アラームタブを選択 handson_dbの ReadCapacity WriteCapacity のアラームが作成されている事を確認
  23. 23. Copyright © 2017 All rights reserved.22 DynamoDB キャパシティの確認 容量タブを選択 読み込み容量ユニット及び、書き込み容量ユニットがそれぞれ 5 となっている事を確認
  24. 24. Copyright © 2017 All rights reserved.23 DynamoDB 初期データ挿入1 項目タブを選択 項目の作成ボタンをクリック 項目の作成画面が開いたら左上の、選択項目から Text を選択 ※ 1参考画像 テキスト入力形式画面が開いたら、 DynamoDB JSON のチェックボックスをチェック ※ 2参考画像 2 参考画像 1 参考画像
  25. 25. Copyright © 2017 All rights reserved.24 DynamoDB 初期データ挿入2 ハンズオンファイルから DynamoDBフォルダ内にある DynamoDB_sampleData_xxx.txt をテキストエディタで開く ※xxx はmac / win の環境です テキストの内容を、DynamoDB JSONの 画面に全て貼り付け 左側の行数箇所にエラーが出ていない事を 確認したら、保存
  26. 26. Copyright © 2017 All rights reserved.25 DynamoDB 初期データ確認 正しく反映されているか内容を確認 修正したいデータにチェックをつけて、アクションから編集も可能です
  27. 27. Copyright © 2017 All rights reserved.26 Lambda実行ロール IAMサービスを開く 左上のサービスをクリック セキュリティ、アイデンティティグループにあるIAMをクリック
  28. 28. Copyright © 2017 All rights reserved.27 Lambda実行ロール 新しいロールの作成1 IAMサービス画面に入ったら、左側のロールをクリック 「新しいロールの作成」ボタンをクリック ※IAMの権限作成は強力な権限です。 うまく開かない等がありましたらチュー ターをお呼び下さい
  29. 29. Copyright © 2017 All rights reserved.28 Lambda実行ロール 新しいロールの作成2 ロール名の設定で lambda_exec と入力し、次へをクリック ロールタイプの選択で AWS Lambdaの右にある 選択 をクリック
  30. 30. Copyright © 2017 All rights reserved.29 Lambda実行ロール 新しいロールの作成3 AmazonDynamoDB FullAccess と AWSLambda BasicExecutionRole の2つのみをチェックして、 次のステップをクリック 設定した通りの内容になってい るかを確認して、 ロールの作成ボタンをクリック
  31. 31. Copyright © 2017 All rights reserved.30 Lambda実装 サービスを開く 左上のサービスをクリック コンピューティンググループにあるLambdaをクリック
  32. 32. Copyright © 2017 All rights reserved.31 Lambda実装 作成画面を開く まだ作成した事がない場合は、 「今すぐ始める」 ボタンをクリック 既に作成した事がある場合は、 「Lambda関数の作成」 ボタンをクリック
  33. 33. Copyright © 2017 All rights reserved.32 Lambda実装 関数の作成1 設計図の選択画面から画面中央にある ブランク関数 をクリック トリガーの設定では、そのまま次へ
  34. 34. Copyright © 2017 All rights reserved.33 Lambda実装 関数の作成2 関数の設定フェーズにて 名前 → api_get_handson 説明 → データ個別取得 ランタイム → Node.js 4.3
  35. 35. Copyright © 2017 All rights reserved.34 Lambda実装 関数の作成3 Lambda 関数のコード フェーズにて コードエントリタイプ → コードをインラインで編集 ハンズオンファイルから Lambdaフォルダ内にある Lambda_sampleCode_xxx.txt をテキストエディタで開く ※xxx はmac / win の環境です テキストの内容を、 コードの箇所に全て貼り付け 左側の行数箇所にエラーが出ていない 事を確認
  36. 36. Copyright © 2017 All rights reserved.35 Lambda実装 関数の作成4 環境変数の入力箇所のそれぞれに → TABLE_NAME → handson_db ハンドラ index.handler → index.get ロール → 既存のロールを選択 既存のロール → lambda_exec
  37. 37. Copyright © 2017 All rights reserved.36 Lambda実装 関数の作成5 詳細設定をクリックしタイムアウトを10秒へ 次へをクリックして、内容が設定した通りか確認をしたら「関数の作成」 以下のように「あめでとうございます」となっているか確認
  38. 38. Copyright © 2017 All rights reserved.37 Lambda実装 関数の作成6 左側のダッシュボードをクリックし、 同様の作業( 「作成画面を開く」 から「関数の作成5」)を 以下を変更しながら繰り返す 関数の作成2にて 名前 → api_getall_handson 説明 → データ一括取得 関数の作成4にて ハンドラ index.handler → index.getall
  39. 39. Copyright © 2017 All rights reserved.38 Lambda実装 関数の作成7 関数の作成2にて 名前 → api_put_handson 説明 → データ登録 関数の作成4にて ハンドラ index.handler → index.put 左側のダッシュボードをクリックし、 同様の作業( 「作成画面を開く」 から「関数の作成5」)を 以下を変更しながら繰り返す
  40. 40. Copyright © 2017 All rights reserved.39 Lambda実装 関数の作成8 関数の作成2にて 名前 → api_delete_handson 説明 → データ削除 関数の作成4にて ハンドラ index.handler → index.delete 左側のダッシュボードをクリックし、 同様の作業( 「作成画面を開く」 から「関数の作成5」)を 以下を変更しながら繰り返す
  41. 41. Copyright © 2017 All rights reserved.40 Lambda実装 関数の作成9 左側の関数をクリックし、4つのlambda関数が登録されている事を確認
  42. 42. Copyright © 2017 All rights reserved.41 API Gateway の作成 サービスを開く 左上のサービスをクリック アプリケーションサービスグループにあるAPI Gatewayをクリック
  43. 43. Copyright © 2017 All rights reserved.42 API Gateway の作成 作成画面を開く まだ作成した事がない場合は、 「今すぐ始める」 ボタンをクリック 既に作成した事がある場合は、 「APIの作成」 ボタンをクリック
  44. 44. Copyright © 2017 All rights reserved.43 API Gateway の作成 APIのインポート Swagger から インポートをチェックして、右のSwaggerファイルの選択から ハンズオンファイルのAPI Gatewayフォルダ内にある apiGateway_sample.yml を選択し、インポート
  45. 45. Copyright © 2017 All rights reserved.44 API Gateway の作成 Lambdaの紐付け1 リソースメニューの /resouce のGETをクリックし、 統合タイプ Lambda関数 Lambdaプロキシ統合の仕様にチェック Lambda関数 api_getall_handson で保存する。権限追加のダイアログはそのままOKを行う
  46. 46. Copyright © 2017 All rights reserved.45 API Gateway の作成 Lambdaの紐付け2 リソースメニューの /resouce /{resourceId} のDELETEをクリックし、 統合タイプ Lambda関数 Lambdaプロキシ統合の仕様にチェック Lambda関数 api_delete_handson で保存する。権限追加のダイアログはそのままOKを行う
  47. 47. Copyright © 2017 All rights reserved.46 API Gateway の作成 Lambdaの紐付け3 リソースメニューの /resouce /{resourceId} のGETをクリックし、 統合タイプ Lambda関数 Lambdaプロキシ統合の仕様にチェック Lambda関数 api_get_handson で保存する。権限追加のダイアログはそのままOKを行う
  48. 48. Copyright © 2017 All rights reserved.47 API Gateway の作成 Lambdaの紐付け4 リソースメニューの /resouce /{resourceId} のPUTをクリックし、 統合タイプ Lambda関数 Lambdaプロキシ統合の仕様にチェック Lambda関数 api_put_handson で保存する。権限追加のダイアログはそのままOKを行う
  49. 49. Copyright © 2017 All rights reserved.48 API Gateway の作成 Mockの紐付け1 リソースメニューの /resouce のOPTIONSをクリックし、 統合タイプ Mock で保存する。
  50. 50. Copyright © 2017 All rights reserved.49 API Gateway の作成 Mockの紐付け2 リソースメニューのの /resouce /{resourceId} のOPTIONSをクリックし、 統合タイプ Mock で保存する。
  51. 51. Copyright © 2017 All rights reserved.50 API Gateway の作成 CORSの設定1 リソースメニューの /resouce 配下のOPTIONSをクリックし、 右下の統合レスポンスをクリック
  52. 52. Copyright © 2017 All rights reserved.51 API Gateway の作成 CORSの設定2 表内の左端にある三角(▶)をクリックし、更にヘッダーのマッピングの三角をクリック
  53. 53. Copyright © 2017 All rights reserved.52 API Gateway の作成 CORSの設定3 レスポンスヘッダー3種の右端にある鉛筆クリックし、マッピングの値を、 ハンズオンファイルのAPI Gatewayフォルダ内にある apiGateway_options.txt の通りに入力。入力後は右端のチェックマークをクリックで確定。 ※前後のシングルクオーテーションも必要です。 同様の作業を リソースメニューの /resouce / {responceID }のOPTIONS に対しても行って下さい。
  54. 54. Copyright © 2017 All rights reserved.53 API Gateway の作成 デプロイ アクションのAPIのデプロイをクリック 新しいステージを選択し ステージ名 → handson でデプロイをクリック
  55. 55. Copyright © 2017 All rights reserved.54 API Gateway の作成 エンドポイントを確認 エンドポイント(URL)をメモ
  56. 56. Copyright © 2017 All rights reserved.55 動作確認 エンドポイントの登録 ハンズオンファイルのDEMOフォルダ内にある Index.htmlをテキストエディタで開く 139行目の API_endpoint を先程メモしたエンドポイントに書き換えて保存
  57. 57. Copyright © 2017 All rights reserved.56 動作確認 ハンズオンファイルのDEMOフォルダ内にある Index.htmlをブラウザで開いて色々と動作を確認
  58. 58. Copyright © 2017 All rights reserved.57 動作詳細 Index.htmlの初回読み込み時及び、各タブ選択時 → https://APIGatewayエンドポイント/resource/ GETメソッド (api_getall_handson Lambda) GETタブ内のGETボタン → https://APIGatewayエンドポイント/resource/{指定ID}/ GETメソッド (api_get_handson Lambda) PUTタブ内のPUTボタン → https://APIGatewayエンドポイント/resource/{指定ID}/ PUTメソッド (api_put_handson Lambda) DELETEタブ内のDELETEボタン → https://APIGatewayエンドポイント/resource/{指定ID}/ DELETEメソッド (api_delete_handson Lambda)
  59. 59. Copyright © 2017 All rights reserved.58 時間の関係上、本日は省略しますが クライアントでの動作にて問題が無いことを確認しましたら、 以下を実行する事で完全なサーバレスでの動作になります。 ・動作検証済みのDEMOフォルダ内容をS3のバケットにアップロード ・対象のバケットに対してのキャッシュ配信をCloudFrontにて設定 ※S3はCloudFrontからのみのアクセス許可を行うと良い 更に、Route53にてドメインを取得しCloudFrontへDNSを向け、 Certificate Managerにて証明書を取得しCloudFrontへ紐付ければ、 AWSのみで完結するサーバレスの基本形が完成します。 そこからはCognitoと連携させてログイン機能(認証認可)を行ったり、WAFやKMSと連携させてセキュアにし てみたり、アイデア次第で様々な機能を持ったシステムを構築してく事が可能です。
  60. 60. Copyright © 2017 All rights reserved.59 最後に サーバレスでもシステム運用は必要です。 もちろんステートレスな構成が故の、デプロイの難しさやログの追尾 性等の問題があります。 魔法の様な銀の弾丸では無いが、特性にマッチした部分で活用出来 るようになると非常に有効なシステムとなります。 多少無理でも大丈夫そうなら是非サーバレスで! 大事なことは「やっていく気持ち」
  61. 61. Copyright © 2017 All rights reserved.60 そんなエンジニアを募集中! 求むエンジニア! ハンズラボは積極的に技術者採用中です。

×