61
Copyright © 2016. All rights reserved. Copyright © 2017 All rights reserved. 2017/01/17 ハハハハハ ハハハハ Serverless Meetup Tokyo #2 2017/03/11 ハハハハハ ハハハハ JAWS DAYS 2017 AWS ハハハハハハハ AWS でででで でででででRESTful API でででで Copyright © 2017. All rights reserved.

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

Embed Size (px)

Citation preview

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

2017/03/11 ハンズラボ 株式会社

JAWS DAYS 2017 AWS ワークショップ

AWS で始めるサーバレスな

RESTful API システム

Copyright © 2017. All rights reserved.

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

2 Copyright © 2017 All rights reserved.

ハンズオンで使用するファイル

・以下から圧縮ファイルをダウンロードして下さいhttps://s3-ap-northeast-1.amazonaws.com

/hands-lab-handson/jawsdays_handson.zip

・解凍すると以下の4フォルダがあります   /API Gateway   ( API Gateway の設定用テキスト)   /Demo   (動作確認用のフロントの静的ファイル)    /DynamoDB   ( DynamoDB のテーブル構築用テキスト)   /Lambda   ( Lambda 関数の作成用テキスト)

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

3 Copyright © 2017 All rights reserved.

ハンズラボ株式会社

• 情シス部門 東急ハンズの各種システムの内製開発と運用保守

• 外販 自社開発の経験を活かした受託開発、内製支援

東急ハンズのシステム子会社

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

自己紹介

• 名前:加藤 雅之

• 所属:ハンズラボ株式会社

• 担当: 東急ハンズ - AWS インフラ、 IT統制 ハンズラボ 外販 - AWS 構築運用支援等

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

5 Copyright © 2017 All rights reserved.

AWS Samurai 2015 / 2016 を連続受賞

2015 長谷川 2016 青木

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

6 Copyright © 2017 All rights reserved.

今日の内容

サーバレス( Serverless )とは

RESTful API について4つの REST の原則設計でのポイント

BaaS と FaaSAWS のサーバレス

SPA(Single Page Application) のすゝめサーバレスとの相性フロントエンドとの完全分離

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

7 Copyright © 2017 All rights reserved.

今日の内容

hands - on1. DynamoDB のテーブル作成2. Lambda 実行用ロールの作成3. Lambda 実装4. API Gateway の作成とデプロイ5.動作確認6. S3 へ静的ファイルの設置7. Cloudfront でキャシュ作成

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

8 Copyright © 2017 All rights reserved.

サーバレス( Serverless )とは

冗長性と可用性が担保される様なインフラの構築運用や、 OSやミドルウェアを気にする必要が無い、開発に集中出来るアーキテクチャー

  BaaS (バックエンドサービス)データベースや認証、メッセージング等のサービス

  FaaS ( Function as a Service )必要な物はコードのみで処理を実行させる

注意:サーバは存在します

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

9 Copyright © 2017 All rights reserved.

主に使用される AWS のサーバレス

Amazon S3 (ファイルストレージ)Amazon Cloudfront (コンテンツデリバリーネットワーク)Amazon DynamoDB ( NoSQL データベース)Amazon API Gateway (アプリケーションインターフェース)AWS Lambda (コード実行サービス)Amazon Cognito (認証認可サービス)Amazon SQS (メッセージキューイング) 等々。。。

特に定義は無いですが、EC2 インスタンスが影に見えない事

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

10 Copyright © 2017 All rights reserved.

RESTful API とは

REST ( Representational State Transfer )の原則に沿った形で設計された API ( Application Programming Interface )

その1 ステートレス性 他のリクエスト情報から完全に分離しているその2 統一インターフェース  HTTP 定義通りのメソッドを使用するその3 アドレス可能性  URI で表されるユニークなアドレスを持つその4 接続性 別のリンクを含めて辿る事が出来る

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

11 Copyright © 2017 All rights reserved.

その1 ステートレス性

セッション情報等のクライアント側の状態を持たず、他のリクエスト情報からも完全に分離されている。ステートフルとステートレスの違いは、オライリーで RESTful の本を監訳している方の有名なブログが分かりやすい。

http://yohei-y.blogspot.jp/2007/10/blog-post.html

 客: A セットください。店員:サイドメニューは? 客:ポテトで店員:ドリンクは? 客:コーラで店員:以上で良いですか? 客:はい

 客: A セットください。店員:サイドメニューは? 客: A セットをポテトで店員:ドリンクは? 客: A セットをポテトとコーラで店員:以上で良いですか? 客: A セットをポテトとコーラで。以上

ステートレスステートフル

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

12 Copyright © 2017 All rights reserved.

その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 メソッドで

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

13 Copyright © 2017 All rights reserved.

その3 アドレス可能性

URI ( URL / URN )にて簡単に指し示す事が出来るユニークなアドレスを持つ

URI (Uniform Resource Identifier ) 識別子 名前とアドレスを識別する書き方

URL (Uniform Resource Locator) 住所 場所を示す書き方のルールで Web アドレスで用いられる

URN (Uniform Resource Name) 名前 名前を永続的に識別する書き方のルールで ISBN 等がある

言語や実装依存の拡張子やパスを含めない → 環境が変わっても同じ URI で動作

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

14 Copyright © 2017 All rights reserved.

その4 接続性

リソースの中に関連性を持つ URI のハイパーメディアリンクを含む事が出来る。

もちろん無理にリンクを設ける必要はない

例えば、商品購入リストのリソースの中に、個別商品のハイパーメディアリンク( URI )が記載されていれば接続性を保持している事になる。

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

15 Copyright © 2017 All rights reserved.

API 設計で最初にすること

まずは、とにかくシンプルに何をどうするを考える

何 = リソース(情報)の洗い出し

どうする =  CRUD(http メソッド )

シンプル = リソースの関連性を単純化する

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

16 Copyright © 2017 All rights reserved.

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記事のコメント一覧

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

17 Copyright © 2017 All rights reserved.

SPA(Single Page Application) のすゝめ

単一ページで構成される Web アプリケーション主に HTML と Javascript で構成されており、 DOM 操作でページ切り替えや Ajax非同期更新を行う   Angular や React や Vue.js 等々のフレームワークやライブラリがある 

細かく非同期で更新をかけたい SPA と、疎結合でマイクロサービス化されている RESTful API は相性が良い

UI/UX をフロントエンドに任せることで、うまく分離して作業を進める事が出来る。また API とのやり取りをリソース情報のみに徹底する事は、アプリ対応等に派生した場合も別対処する必要は無い。

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

18 Copyright © 2017 All rights reserved.

ハンズオン

Let’s hands - on1. DynamoDB のテーブル作成2. Lambda 実行用ロールの作成3. Lambda 実装4. API Gateway の作成とデプロイ5.動作確認  〜 以下、補足説明 〜6. S3 へ静的ファイルの設置7. Cloudfront でキャシュ作成

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

19 Copyright © 2017 All rights reserved.

DynamoDB  サービスを開く

マネイジメントコンソールにログインしたら、左上の「サービス」メニューをクリック

データベースグループにある「 DynamoDB」をクリック

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

20 Copyright © 2017 All rights reserved.

DynamoDB  テーブル作成

「テーブルの作成」ボタンをクリック

テーブル名 →  handson_dbプライマリーキー →  idプライマリーキー 属性 → 文字列

テーブル設定 → デフォルト設定の仕様

保存ボタンでテーブル作成

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

21 Copyright © 2017 All rights reserved.

DynamoDB  テーブル情報の確認

概要タブが選択されている事を確認

右の様な画面で テーブル名 プライマリーパーティションキー テーブルの状態

を作成した通りか確認

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

22 Copyright © 2017 All rights reserved.

DynamoDB  アラームの確認

アラームタブを選択

handson_db の  ReadCapacity  WriteCapacityのアラームが作成されている事を確認

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

23 Copyright © 2017 All rights reserved.

DynamoDB  キャパシティの確認

容量タブを選択

読み込み容量ユニット及び、書き込み容量ユニットがそれぞれ 5 となっている事を確認

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

24 Copyright © 2017 All rights reserved.

DynamoDB  初期データ挿入 1

項目タブを選択

項目の作成ボタンをクリック

項目の作成画面が開いたら左上の、選択項目からText  を選択 ※ 1参考画像

テキスト入力形式画面が開いたら、DynamoDB JSONのチェックボックスをチェック ※ 2参考画像

2 参考画像

1 参考画像

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

25 Copyright © 2017 All rights reserved.

DynamoDB  初期データ挿入 2

ハンズオンファイルからDynamoDB フォルダ内にあるDynamoDB_sampleData_xxx.txtをテキストエディタで開く ※ xxx は mac / win の環境です

テキストの内容を、 DynamoDB JSON の画面に全て貼り付け

左側の行数箇所にエラーが出ていない事を確認したら、保存

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

26 Copyright © 2017 All rights reserved.

DynamoDB  初期データ確認

正しく反映されているか内容を確認

修正したいデータにチェックをつけて、アクションから編集も可能です

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

27 Copyright © 2017 All rights reserved.

Lambda 実行ロール  IAM サービスを開く

左上のサービスをクリック

セキュリティ、アイデンティティグループにある IAM をクリック

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

28 Copyright © 2017 All rights reserved.

Lambda 実行ロール 新しいロールの作成 1

IAM サービス画面に入ったら、左側のロールをクリック

「新しいロールの作成」ボタンをクリック

※IAM の権限作成は強力な権限です。うまく開かない等がありましたらチューターをお呼び下さい

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

29 Copyright © 2017 All rights reserved.

Lambda 実行ロール 新しいロールの作成 2

ロール名の設定でlambda_execと入力し、次へをクリック

ロールタイプの選択でAWS Lambda の右にある 選択 をクリック

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

30 Copyright © 2017 All rights reserved.

Lambda 実行ロール 新しいロールの作成 3

AmazonDynamoDBFullAccessとAWSLambdaBasicExecutionRoleの2つのみをチェックして、次のステップをクリック

設定した通りの内容になっているかを確認して、ロールの作成ボタンをクリック

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

31 Copyright © 2017 All rights reserved.

Lambda 実装 サービスを開く

左上のサービスをクリック

コンピューティンググループにある Lambda をクリック

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

32 Copyright © 2017 All rights reserved.

Lambda 実装 作成画面を開く

まだ作成した事がない場合は、「今すぐ始める」ボタンをクリック

既に作成した事がある場合は、「 Lambda 関数の作成」ボタンをクリック

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

33 Copyright © 2017 All rights reserved.

Lambda 実装 関数の作成 1

設計図の選択画面から画面中央にあるブランク関数をクリック

トリガーの設定では、そのまま次へ

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

34 Copyright © 2017 All rights reserved.

Lambda 実装 関数の作成 2

関数の設定フェーズにて

名前 →  api_get_handson説明 → データ個別取得ランタイム →  Node.js 4.3

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

35 Copyright © 2017 All rights reserved.

Lambda 実装 関数の作成 3

Lambda 関数のコード フェーズにて

コードエントリタイプ → コードをインラインで編集

ハンズオンファイルからLambda フォルダ内にあるLambda_sampleCode_xxx.txtをテキストエディタで開く ※ xxx は mac / win の環境です

テキストの内容を、コードの箇所に全て貼り付け

左側の行数箇所にエラーが出ていない事を確認

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

36 Copyright © 2017 All rights reserved.

Lambda 実装 関数の作成4

環境変数の入力箇所のそれぞれに →  TABLE_NAME       →  handson_db

ハンドラ  index.handler  →  index.getロール → 既存のロールを選択既存のロール →  lambda_exec

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

37 Copyright © 2017 All rights reserved.

Lambda 実装 関数の作成 5

詳細設定をクリックしタイムアウトを 10秒へ

次へをクリックして、内容が設定した通りか確認をしたら「関数の作成」以下のように「あめでとうございます」となっているか確認

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

38 Copyright © 2017 All rights reserved.

Lambda 実装 関数の作成6

左側のダッシュボードをクリックし、同様の作業( 「作成画面を開く」 から「関数の作成5」)を以下を変更しながら繰り返す

関数の作成2にて名前 →  api_getall_handson説明 → データ一括取得

関数の作成4にてハンドラ  index.handler  →  index.getall

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

39 Copyright © 2017 All rights reserved.

Lambda 実装 関数の作成 7

関数の作成2にて名前 →  api_put_handson説明 → データ登録

関数の作成4にてハンドラ  index.handler  →  index.put

左側のダッシュボードをクリックし、同様の作業( 「作成画面を開く」 から「関数の作成5」)を以下を変更しながら繰り返す

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

40 Copyright © 2017 All rights reserved.

Lambda 実装 関数の作成 8

関数の作成2にて名前 →  api_delete_handson説明 → データ削除

関数の作成4にてハンドラ  index.handler  →  index.delete

左側のダッシュボードをクリックし、同様の作業( 「作成画面を開く」 から「関数の作成5」)を以下を変更しながら繰り返す

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

41 Copyright © 2017 All rights reserved.

Lambda 実装 関数の作成9

左側の関数をクリックし、4つの lambda 関数が登録されている事を確認

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

42 Copyright © 2017 All rights reserved.

API Gateway の作成 サービスを開く

左上のサービスをクリック

アプリケーションサービスグループにある API Gateway をクリック

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

43 Copyright © 2017 All rights reserved.

API Gateway の作成 作成画面を開く

まだ作成した事がない場合は、「今すぐ始める」ボタンをクリック

既に作成した事がある場合は、「 API の作成」ボタンをクリック

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

44 Copyright © 2017 All rights reserved.

API Gateway の作成  API のインポート 

Swagger  から インポートをチェックして、右の Swagger ファイルの選択からハンズオンファイルの API Gateway フォルダ内にあるapiGateway_sample.ymlを選択し、インポート

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

45 Copyright © 2017 All rights reserved.

API Gateway の作成  Lambda の紐付け 1  

リソースメニューの /resouce の GET をクリックし、統合タイプ  Lambda 関数Lambda プロキシ統合の仕様にチェックLambda 関数 api_getall_handsonで保存する。権限追加のダイアログはそのまま OK を行う

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

46 Copyright © 2017 All rights reserved.

API Gateway の作成  Lambda の紐付け 2  

リソースメニューの /resouce /{resourceId} の DELETE をクリックし、統合タイプ  Lambda 関数Lambda プロキシ統合の仕様にチェックLambda 関数 api_delete_handsonで保存する。権限追加のダイアログはそのまま OK を行う

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

47 Copyright © 2017 All rights reserved.

API Gateway の作成  Lambda の紐付け 3  

リソースメニューの /resouce /{resourceId} の GET をクリックし、統合タイプ  Lambda 関数Lambda プロキシ統合の仕様にチェックLambda 関数 api_get_handsonで保存する。権限追加のダイアログはそのまま OK を行う

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

48 Copyright © 2017 All rights reserved.

API Gateway の作成  Lambda の紐付け 4  

リソースメニューの /resouce /{resourceId} の PUT をクリックし、統合タイプ  Lambda 関数Lambda プロキシ統合の仕様にチェックLambda 関数 api_put_handsonで保存する。権限追加のダイアログはそのまま OK を行う

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

49 Copyright © 2017 All rights reserved.

API Gateway の作成  Mock の紐付け 1  

リソースメニューの /resouce の OPTIONS をクリックし、統合タイプ  Mockで保存する。

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

50 Copyright © 2017 All rights reserved.

API Gateway の作成  Mock の紐付け 2  

リソースメニューのの /resouce /{resourceId} の OPTIONS をクリックし、統合タイプ  Mockで保存する。

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

51 Copyright © 2017 All rights reserved.

API Gateway の作成  CORS の設定 1  

リソースメニューの  /resouce 配下の OPTIONS をクリックし、右下の統合レスポンスをクリック

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

52 Copyright © 2017 All rights reserved.

API Gateway の作成  CORS の設定 2  

表内の左端にある三角(▶)をクリックし、更にヘッダーのマッピングの三角をクリック

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

53 Copyright © 2017 All rights reserved.

API Gateway の作成  CORS の設定 3  

レスポンスヘッダー3種の右端にある鉛筆クリックし、マッピングの値を、ハンズオンファイルの API Gateway フォルダ内にあるapiGateway_options.txtの通りに入力。入力後は右端のチェックマークをクリックで確定。※前後のシングルクオーテーションも必要です。

同様の作業を リソースメニューの /resouce / {responceID } の OPTIONSに対しても行って下さい。

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

54 Copyright © 2017 All rights reserved.

API Gateway の作成 デプロイ 

アクションの API のデプロイをクリック 新しいステージを選択しステージ名 →  handsonでデプロイをクリック

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

55 Copyright © 2017 All rights reserved.

API Gateway の作成 エンドポイントを確認 

エンドポイント( URL )をメモ

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

56 Copyright © 2017 All rights reserved.

動作確認 エンドポイントの登録 

ハンズオンファイルの DEMO フォルダ内にあるIndex.html をテキストエディタで開く

139 行目の API_endpoint を先程メモしたエンドポイントに書き換えて保存

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

57 Copyright © 2017 All rights reserved.

動作確認  

ハンズオンファイルの DEMO フォルダ内にあるIndex.html をブラウザで開いて色々と動作を確認

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

58 Copyright © 2017 All rights reserved.

動作詳細  

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 )

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

59 Copyright © 2017 All rights reserved.

時間の関係上、本日は省略しますが  

クライアントでの動作にて問題が無いことを確認しましたら、以下を実行する事で完全なサーバレスでの動作になります。

・動作検証済みの DEMO フォルダ内容を S3 のバケットにアップロード

・対象のバケットに対してのキャッシュ配信を CloudFront にて設定

 ※ S3 は CloudFront からのみのアクセス許可を行うと良い

更に、 Route53 にてドメインを取得し CloudFront へ DNS を向け、Certificate Manager にて証明書を取得し CloudFront へ紐付ければ、AWS のみで完結するサーバレスの基本形が完成します。

そこからは Cognito と連携させてログイン機能(認証認可)を行ったり、 WAF や KMS と連携させてセキュアにしてみたり、アイデア次第で様々な機能を持ったシステムを構築してく事が可能です。

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

60 Copyright © 2017 All rights reserved.

最後に

サーバレスでもシステム運用は必要です。もちろんステートレスな構成が故の、デプロイの難しさやログの追尾性等の問題があります。

魔法の様な銀の弾丸では無いが、特性にマッチした部分で活用出来るようになると非常に有効なシステムとなります。

多少無理でも大丈夫そうなら是非サーバレスで!

大事なことは「やっていく気持ち」

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

61 Copyright © 2017 All rights reserved.

そんなエンジニアを募集中!

求むエンジニア!ハンズラボは積極的に技術者採用中です。