サーバレスブース展示物のアーキテクチャを語る / Serverless Booth Architecture at AWS Summit 2023

Transcript

1. © 2023, Amazon Web Services, Inc. or its affiliates. All

   rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. サーバーレスブース展⽰物の アーキテクチャを語る Daisuke Awaji M I N I - 1 0 Amazon Web Services Japan G.K. Solutions Architect

2. © 2023, Amazon Web Services, Inc. or its affiliates. All

   rights reserved. Daisuke Awaji Amazon Web Services Japan Solutions Architect • ガバメントクラウドを利⽤されるお客様のご⽀援を担当 開発のモダナイゼーション、UX の向上、Mobile Appなど • 好きな AWS サービス AWS AppSync, AWS Lambda, Amazon CloudFront 3 AWS AppSync AWS Lambda Amazon CloudFront

3. © 2023, Amazon Web Services, Inc. or its affiliates. All

   rights reserved. 好きな AWS サービスを投票いただくミニゲームを展⽰しています サーバーレスブースの展⽰物 投票して 集計する

4. © 2023, Amazon Web Services, Inc. or its affiliates. All

   rights reserved. サーバーレスのモチベーション 皆忙しい。だが２週間で作り切らなければならない（しかも⽚⼿間で） サーバーレスのマネージドサービスを活⽤して素早く実装する Amazon API Gateway AWS Step Functions AWS Lambda Amazon DynamoDB AWS Amplify

5. © 2023, Amazon Web Services, Inc. or its affiliates. All

   rights reserved. サーバーレスブースの展⽰物 ブース 来場者 Client Mobile client Amazon API Gateway AWS Step Functions AWS Lambda Amazon DynamoDB Stream Amazon DynamoDB Amazon API Gateway アンケート機能 ダッシュボード機能 AWS Amplify 好きな AWS サービスを投票しよう︕をフルサーバーレスで運営する AWS Lambda 集計処理 Frontend

6. © 2023, Amazon Web Services, Inc. or its affiliates. All

   rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Frontend

7. © 2023, Amazon Web Services, Inc. or its affiliates. All

   rights reserved. サーバーレスブースの展⽰物 ブース 来場者 Client Mobile client Amazon API Gateway AWS Step Functions AWS Lambda Amazon DynamoDB Stream Amazon DynamoDB Amazon API Gateway アンケート機能 ダッシュボード機能 AWS Amplify フロントエンドは React を使⽤して、SPA として公開しています AWS Lambda 集計処理 React Frontend

8. © 2023, Amazon Web Services, Inc. or its affiliates. All

   rights reserved. AWS Amplify Web Frontend、Mobile App の開発を加速するプラットフォーム 様々なバックエンドを数コマンドで構築 認証機能 API 基盤 リアルタイム通知 データストア ストレージ Website Hosting Amazon CloudFront Amazon S3 Amazon DynamoDB Amazon Cognito Amazon API Gateway AWS AppSync AWS IoT Core AWS AppSync Amazon S3

9. © 2023, Amazon Web Services, Inc. or its affiliates. All

   rights reserved. AWS Amplify による Static Website Hosting 静的ウェブサイトのビルド、デプロイ、ホスティングを⾃動化 AWS CodeCommit Amazon S3 Amazon CloudFront AWS Amplify Console Managed Hosting AWS Amplify 開発者 リポジトリ ビルド デプロイ フロントエンドのホスティング

10. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. アンケート機能

11. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. サーバーレスブースの展⽰物 ブース 来場者 Client Mobile client Amazon API Gateway AWS Step Functions AWS Lambda Amazon DynamoDB Stream Amazon DynamoDB Amazon API Gateway アンケート機能 ダッシュボード機能 AWS Amplify 好きな AWS サービスを投票しよう︕をフルサーバーレスで運営する AWS Lambda 集計処理

12. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. アンケートのワークフロー 画⾯遷移のフローでステートを保持したい （ユーザ情報や回答など） ▶ ▶ ▶

13. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Step Functions によるワークフローの構築 複数の処理（Lambda含む）を⼀連のフローとして管理する 異なる⾔語のファンクションの 組み合わせでもOK 実⾏履歴を確認可能、 処理の可視性を向上

14. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Step Functions のコールバックパターン AWS Step Functions workflow ワークフロー Queue Lambda function Task Token, Param Task Token, Result OR Tokenを外部サービスに連携して、 コールバック待機可能 Amazon Elastic Container Service (Amazon ECS) https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/callback-task-sample-sqs.html Task Task Task Start End

15. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Step Functions のコールバックパターン タスク開始時に発⾏した Task Token を 外部プロセスから返されるまで待機するコールバックパターン AWS Step Functions workflow １つめの処理 ２つめの処理 ３つめの処理 １つ⽬の画⾯ ２つめの画⾯ ３つめの画⾯ Token, Param Token, Param Token, Param Task Token が 与えられるまで待つ Task Token が 与えられるまで待つ

16. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Step Functions の ユースケース 6 選 関数オーケストレーション 分岐 エラー処理 ヒューマンインザループ 並列処理 動的並列処理 × Parallel Map Choice Catch & Retry output Input Task token

17. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Step Functions を BFF として利⽤する AWS Step Functions workflow API API API Start End Amazon API Gateway Mobile client AWS Lambda Amazon ECS オンプレミス API Gatewayから同期的に Express ワークフローを コールする BFF (Backend for Frontend) Micro Services Backend

18. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Step Functions をリファクタリングする AWS Lambda Amazon DynamoDB https://serverlessland.com/refactoring-serverless/direct-database-access AWS Step Functions Amazon DynamoDB AWS Step Functions Task: DynamoDBGetItem invokes AWS SDK: GetItem Step Functions Integrationsにより Lambda 関数を呼び出すことなく DynamoDB で読み取り処理を実⾏できます。

19. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. ダッシュボード機能

20. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. サーバーレスブースの展⽰物 ブース 来場者 Client Mobile client Amazon API Gateway AWS Step Functions AWS Lambda Amazon DynamoDB Stream Amazon DynamoDB Amazon API Gateway アンケート機能 ダッシュボード機能 AWS Amplify 好きな AWS サービスを投票しよう︕をフルサーバーレスで運営する AWS Lambda 集計処理

21. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. ダッシュボード機能 投票されたサービスごとに集計してリアルタイムに画⾯に表⽰したい 投票数が膨⼤になることが想定される 投票されたことをトリガーとして 画⾯に結果を表⽰したい

22. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. CQRS Pattern / コマンドクエリ責務分離 ブース 来場者 Client Mobile client Amazon API Gateway AWS Step Functions AWS Lambda Amazon DynamoDB Stream Amazon DynamoDB Amazon API Gateway アンケート機能 ダッシュボード機能 AWS Amplify 書き込み処理と読み込み処理を分離することで、 スループット・レイテンシーを最適化し、柔軟なクエリを実現 書き込み 読み込み AWS Lambda 集計処理

23. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. DynamoDB の Table Design トランザクションテーブル Stream 集計テーブル リクエスト毎に集計せず、集計済みのテーブルを参照する 書き 読み AWS Lambda 集計処理 Service Name Timestamp UserId AWS Lambda 1681106226453 @gee0awa API Gateway 1680662475644 @abc AWS Amplify 1680487166736 @def Service Name Count AWS Lambda 53 API Gateway 24 AWS Amplify 9 トランザクションテーブル 集計テーブル

24. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. API Gateway の Web Socket API サーバーからクライアントへ WebSockets による通知を⾏い、 よりタイムリーに実⾏結果を送信 Step Functions workflow onConnect API Gateway (WebSockets) Step Functions Lambda API Gateway https://aws.amazon.com/blogs/compute/from-poll-to-push-transform-apis-using-amazon-api-gateway-rest-apis-and-websockets/ Amazon DynamoDB ダッシュボード

25. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. まとめ

26. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. まとめ • 限られた期間でサーバーレスのサービスを組み合わせて⾼速に実装 • StepFunctions はサーバーレスなワークフローであり、 可視化されたワークフローと拡張性を実現 • CQRS パターンや、WebSocket を活⽤しすることで スループット最適に、イベント駆動にダッシュボードを実現 投票 して 集計 する

27. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 2023 TOKYO

28. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 50以上 のセッションで 技術解説と事例、 ライブコーディングなどから クラウドネイティブ開発の 最先端 を学ぶ ネットワーキングエリアで 開発どうしが交流できる u ⽇程︓6 ⽉ 21 ⽇（⽔）〜 23 ⽇（⾦） u 開催形態: 6⽉21⽇ 前夜祭（オンラインのみ） 6⽉22⽇-23⽇ 対⾯カンファレンス u 会場︓ベルサール渋⾕ガーデン（東京都渋⾕区） AWS 国内最⼤の開発者向けカンファレンス 「AWS Dev Day 2023 Tokyo」 4年ぶりに 対⾯イベント として開催します 予備登録はこちらから bit.ly/devday-std-2023

29. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 駆け込み歓迎︕ Call for Proposal（セッション公募）に応募しよう AWS Dev Day 2023 Tokyoでは幅広く開発者の皆様から発表していただく 「Call for Proposal」をプログラムに取り⼊れています みなさまのご経験、知⾒、ノウハウをぜひこの場で共有していただけませんか︖ 締め切り︓ 2023 年 4 ⽉ 21 ⽇（⾦）23:59 bit.ly/devdaycfp2023 ―――― ―――― 4 ⽉ 24 ⽇（⽉） まで延⻑します!!

30. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Thank you! © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Please complete the session survey in the mobile app Daisuke Awaji Amazon Web Services Japan G.K. Solutions Architect