第20回 Tokyo Jazug Night での資料です https://jazug.connpass.com/event/136488/

1. サーバーレスWebアプリをつくろう
～AWSとくらべながら～
第20回 Tokyo Jazug Night
2019/7/18
平林 拓将（ひらりん）

2. すみません。代打の代打です。

3. 自己紹介
Name
• 平林 拓将（ひらりん）
Work
• テクニカルトレーナー/アーキテクト
• 研修の講師などをしつつ社内開発をしています
Like
• C# ＆ Microsoft Azure（Logic Apps/Functions/Cosmos DB）
• LINE関連API、VUI（スマートスピーカー）など
Social
• Twitter：@himarin269
• GitHub：himanago
• Blog：http://himanago.hatenablog.com/ 3

4. もともとの登壇予定…
ちょまどさん
⇒「Functions ＋ スマートスピーカー（仮）」
かずきさん
⇒「サーバーレスで遊ぼう」
（知名度も実力も違いすぎる…何を話せば…）
4

5. たぶんこれがきっかけ
5
Qiitaに上げてたハンズオン資料
（本体はGitHub）

6. なので、今回はそのハンズオンの話をします
サーバーレスWebアプリケーションを作るハンズオン
• Functions＋Blob Storage＋Cosmos DB
• デモを交えつつ、各サービスの連携での注意点など
ハンズオンを作ったのは社内勉強会で講師をしたとき
• AWSでほぼ同じハンズオンを社内で別の講師がやったものを
Azureでトレースしてみたものがこれ
せっかくなのでAWSで使うサービスもご紹介
• AWSで同じものを作るとしたら…？という比較
• AWSはど素人なので違っていたらマサカリください
6

7. つくるもの
簡易TODOアプリ
• CRUDといえばこれ
• Vue.jsをつかってみたけど
あんまりVueっぽくない
• 認証機能等はなし
7

8. サーバーレスとは？
サーバーがないのではなく、サーバーを意識しなくていいもの
よく挙げられる特徴
8
サーバーの管理が不要 オートスケーリング
イベントドリブン
＆
ステートレス
実行した分だけの課金

9. Azureにおける代表的なサーバーレス
Azure Functions
• イベント駆動型のコード実行環境（Function as a Service）
9

10. FaaS（Function as a Service）のメリット
10
関数
アプリ
ランタイム
ミドルウェア
OS
サーバー機
ネットワーク
ストレージ
関数
アプリ
ランタイム
ミドルウェア
OS
サーバー機
ネットワーク
ストレージ
関数
アプリ
ランタイム
ミドルウェア
OS
サーバー機
ネットワーク
ストレージ
アプリ
ランタイム
ミドルウェア
OS
サーバー機
ネットワーク
ストレージ
オンプレミス IaaS PaaS FaaS
自
分
で
管
理
自
分
で
管
理
自
分
で
管
理
管
理
不
要
管
理
不
要
管
理
不
要
関数
こ
れ
だ
け
！

11. Functions＝サーバーレスというわけではない
App Serviceプランがある
• 常時稼働するサーバー上で関数を動かす
Durable Functionsがある
• 関数コードでステートフルな処理を実現
• キューやストレージなどを意識せずそれらを使ったステート管理が可能
• サーバーレスはステートレスであるべきという主張
• シンプルなイベントドリブンな関数ではなくなる
• 意識しない部分が増えるという意味では「さらなるサーバーレス」と言える気も
11

12. アーキテクチャ
12
サーバーレス！
Webサーバー不要

13. AWSの場合
13
https://github.com/aws-samples/lambda-refarch-webapp

14. 認証の仕組みをつける場合（Azure）
Azure AD B2Cを使う
14参考：Azure API Management を使って Azure Functions に認証つけてみた
https://blog.okazuki.jp/entry/2019/07/14/202125

15. 認証の仕組みをつける場合（AWS）
Amazon Cognitoを使う
• 認証まで含めたチュートリアルが公開されている
15
https://aws.amazon.com/jp/getting-started/projects/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/

16. Azure vs AWS
Azure 役割 AWS
Azure Blob Storage
静的Webサイト
ホスティング Amazon S3
Azure
API
Management
RESTful APIの公開 API Gateway
Functions
CRUD処理 AWS Lambda
Azure Cosmos DB NoSQLデータベース Amazon DynamoDB
Azure AD B2C 認証機能 Amazon Cognito
16

17. Demo：
サーバーレスWebアプリ作成
ハンズオンをやってみます
17

18. ハンズオンの構成
STEP1：Azure Cosmos DBアカウント・コンテナー作成
STEP2：Azure FunctionsでのAPI作成
STEP3：Azure Blob Storageでの静的Webサイトホスティング
18
ハンズオンのQiita記事はこちら（本体はGitHub）
https://qiita.com/himarin269/items/d4b1001e088c23ff40f3

19. Demo：STEP1
19
Azure Cosmos DB
アカウント・コンテナー作成

20. AWSの場合：Amazon DynamoDB
20
https://aws.amazon.com/jp/getting-started/projects/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/module-3/

21. Demo：STEP2
21
Azure FunctionsでのAPI作成

22. AWSの場合：Lambda＋API Gateway
22
https://aws.amazon.com/jp/getting-started/projects/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/module-3/
LambdaではDynamoDBに
書き込むための権限を
IAMロールで与えてあげる
必要がある

23. AWSの場合：Lambda＋API Gateway
Lambdaは直接HTTPリクエストを受けない
23
あくまでも「イベント発生時にコードを実行」という役割
⇒ API GatewayがHTTPリクエストを受け付け、
そこで発生するイベントをきっかけにLambdaが動く

24. Demo：STEP3
24
Azure Blob Storageでの
静的Webサイトホスティング

25. AWSの場合：Amazon S3
25
https://aws.amazon.com/jp/getting-started/projects/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/module-1/
アクセス許可設定のほか、
Webサイトホスティングの
有効化の操作が必要

26. まとめ
比較しての感想など
26

27. 比較してみての感想
Azureいいなとおもったところ
• 静的Webサイトの公開やサービス間連携はAzureのほうが楽
• 操作数が圧倒的に少ない印象
• Functionsのトリガー / 入出力バインディングが便利
• サービス間の連携がポータル上で簡単にできる、かつわかりやすい
• AWSは複数の種類のサービスを一覧できない
• サブスクリプション・リソースグループのありがたみ
• AWSはこれができない ↓
27

28. 比較してみての感想
AWSいいなとおもったところ
• AWSは無料枠が多くて個人でも
使いやすい印象
• DynamoDBに無料枠があるのが
正直うらやましい…
• Cosmos DBも安価に使えたら…
• 安くなったとはいえ、最低月3,000円
近くかかってしまうので個人で使う
のはけっこうつらい
28
https://aws.amazon.com/jp/free/

29. まとめ
Azureやっぱりいい
• AWSもさわってみてAzureの良さを再認識
AWSもいい
• チュートリアルや無料枠が充実していてユーザー数が多いのも納得
• 豊富なチュートリアルをAzureで真似してみるのも◎
サーバーレス、クラウドネイティブ、そしてマルチクラウド
• マルチクラウドでいいとこどりのサービス構築もできるように
29

30. その他
かずきさん にまとめていただきました
30
Azure の機能を使った野良ハンズオン資料の紹介
https://blog.okazuki.jp/entry/2019/07/13/114542