EventBridgeとAmplify + Stripeで 「イベント駆動」な Webサービスを開発する/aws-dev-day-2022

Transcript

1. EventBridgeとAmplify + Stripeで 「イベント駆動」な Webサービスを開発する AWS Dev Day 2022 Japan

   @hidetaka_dev Nov 2022 1

2. 今日のトピック • AWS AmplifyとStripeを利用して、 SaaSやECのフロントエンド開発をスムーズにできる • 決済やサブスクリプションなど、 顧客・契約の状態と連動したWFも、Amazon EventBridgeでスムーズに •

   AWS AppSync・AWS Step Functionsを活用して、 決済・サブスクに関する運用効率化（決済OPS）をはじめよう 2 AWS Dev Day 2022 Japan

3. 岡本 秀高 ( @hidetaka_dev ) • Stripe Developer Advocate (ex-developer

   in Digitalcube) • JavaScript / TypeScript developer ◦ AWS Lambda / CDK ◦ Next.js / React ◦ WordPress / Alexa / etc • AWS Samurai 2017 / AWS Community Day APAC 2017 • QiitaでStripeに関する Dev blogを週2/3本で更新中 ◦ https://qiita.com/hideoka moto ◦ 年間120記事ペース 3 AWS Dev Day 2022 Japan

4. 今日のトピック • AWS AmplifyとStripeを利用して、 SaaSやECのフロントエンド開発をスムーズにできる • 決済やサブスクリプションなど、 顧客・契約の状態と連動したWFも、Amazon EventBridgeでスムーズに •

   AWS AppSync・AWS Step Functionsを活用して、 決済・サブスクに関する運用効率化（決済OPS）をはじめよう 4 AWS Dev Day 2022 Japan

5. SaaSやECなどのサービス開発を、Amplifyで効率化 • サービスのGUI提供に必要な機能が、 AWS Amplifyには揃っている ◦ 認証・認可 ◦ RESTまたはGraphQL API

   ◦ ホスティング・SSL ◦ CLIやSDK, UI Component, Figmaなどのツール ◦ etc.. • サービスの「コア機能以外」を、 AWS Amplifyと関連ツールで効率的に実装できる 5 AWS Dev Day 2022 Japan

6. ビジネスに欠かせない「課金機能」をAPI as a Serviceで • Stripeなど、決済やサブスクリプションに特化したSaaS ◦ PCI DSS準拠 ◦

   サービスの停止率が低い（99.999% uptime for the last 90 days） • サブスクリプションの契約プランや割引、請求など 「お金に関わる機能要件」の構築・保守コストを、SaaSで抑える • AWSのAPIを呼び出すように、 StripeのAPIをアプリ・システムから利用して課金・請求管理機能を実装 6 AWS Dev Day 2022 Japan

7. StripeのAPIキー3種 ・Publishable API Key ・Secret API Key ・Limited API Key

   Secret / Limited API keyは、 Secrets Managerで 安全に管理する Amplify CLIを利用して、 APIキーの保管と利用を 手軽に実現する 7 AWS Dev Day 2022 Japan Amplify CLIで、安全にAPIキーを管理

8. layer:AWS-Parameters-and-Se crets-Lambda-Extensionが登 場 (2022/10) LayerをLambdaに登録すると、 HTTPリクエストで Secretが取得できる 環境変数で、 キャッシュのTTLや タイムアウトなども設定可能

   8 AWS Dev Day 2022 Japan Tips: Secretの取得はLambda Layerで https://docs.aws.amazon.com/ja_jp/secretsmanager/la test/userguide/retrieving-secrets_lambda.html#retrievi ng-secrets_lambda_env-var

9. Stripeは、同じメールアドレスで 複数のCustomerデータが作 れる Stripe Customer IDと Cognito User PoolsのIDを マッピングして重複を回避

   手早い方法は、 Metadataでのマッピング 検索性を求める場合、 DynamoDBでテーブルを用意 9 AWS Dev Day 2022 Japan Stripeの顧客情報と、Amplifyのユーザー情報の紐付け

10. Cognitoには、 情報更新時のWebhookがない StripeのWebhookで、 顧客データ更新を受け付ける Customer metadataから Cognitoのuser idを取得、 AWS SDKで更新処理

    DynamoDBを使う場合は、 DynamoDB StreamでもOK 10 AWS Dev Day 2022 Japan IDの同期は、Stripe -> CognitoでSyncしよう

11. Tips: ユーザーDBを作るか作らないか • いずれ必要になる可能性が高い ◦ Metadataでの紐付けでは難しいことへの対応 ▪ １ユーザーに、複数のCustomerやSubscriptionを紐づけ ▪ 親子アカウントやチームなどの関係性ができる場合

    ◦ Stripe APIにアクセスする時間の省略 ▪ Stripe Webhookで、事前にDBへ必要情報をSyncする ▪ 顧客からの取得（GET）系をAWS内で完結させる • 実行したいクエリ・ユースケースに応じて、利用するDBを選択 11 AWS Dev Day 2022 Japan

12. Tips: UIの表示系を、契約に応じて制御する • ３つの方法 ◦ Stripe APIから都度取得する ▪ 実装の手間は少ない ▪

    HTTPSリクエストが出るので、少し時間がかかる ◦ Stripe Webhook経由で、CognitoのUser Metadataにもたせる ▪ Amplify SDKでクライアント側からデータが取れる ▪ リスト系データの保存が難しい ◦ Stripe Webhook経由で、ユーザーDBにもたせる ▪ 柔軟性はもっとも高い 12 AWS Dev Day 2022 Japan

13. AWS AmplifyとStripeでフロントエンドを効率的に開発 • Stripeを使って、サブスクリプションの契約管理ができる ◦ ただし契約系以外のUIはStripeのみで提供できない • AWS Amplifyを使えば、サービスのUIから認証系、UI Component、

    アクセス管理にCI / CDとSaaSのフロントに必要なものが揃う • セキュリティのために、Stripeのサーバー側APIキーはSecrets Storeへ • StripeのCustomerとCognito Userの紐付け方法は、 アプリ・サービスの状況や要件に応じて決定しよう 13 AWS Dev Day 2022 Japan

14. 今日のトピック • AWS AmplifyとStripeを利用して、 SaaSやECのフロントエンド開発をスムーズにできる • 決済やサブスクリプションなど、 顧客・契約の状態と連動したWFも、Amazon EventBridgeでスムーズに •

    AWS AppSync・AWS Step Functionsを活用して、 決済・サブスクに関する運用効率化（決済OPS）をはじめよう 14 AWS Dev Day 2022 Japan

15. 同期的に処理できないこと に 対応するシステムを作るため ・銀行振込・コンビニ決済 ・サブスクの契約更新 ・未払いの検知・入金確認 顧客やシステムの「状態」を 「イベント」として システムに通知する仕組み Stripeでは、150種類以上の

    Webhookイベントをサポート 15 AWS Dev Day 2022 Japan なぜイベント駆動にするのか

16. システムもサブスクリプションも、「運用」が大切 • サブスクリプションは、「契約し続けてもらう」必要がある ◦ 使わないサブスクサービスは、解約される ▪ 競合他社への乗り換え: 「もっと安いor便利なサービスにしよう」 ▪ 需要の消失:

    「子どもが成長したので、もう使わない」 • システムも、「動き続けてもらう」必要がある ◦ 環境の変化で、「変更してないコード」も時に動かなくなる ▪ SaaSやAWSのAPI仕様変更 ▪ OS・ランタイム・ライブラリの更新や統廃合 16 AWS Dev Day 2022 Japan

17. EventBridgeなどのメッセージサービスに、状態を集約 • StripeのイベントやAWSリソースのイベントを投入する ◦ EventBridgeは「どのイベントを待ち受けるか」で設定できる ◦ ただし強い速達性やスケールを求める場合は、 SNSやSQSが向いているケースもある • 「この状態になったら」「このワークフローを実行する」で設計

    ◦ 例: 決済に失敗したら、EC2インスタンスを停止する ◦ 例: CloudFormationの立ち上げに失敗したら、顧客に返金する 17 AWS Dev Day 2022 Japan

18. StripeのWebhook APIは、 署名検証などの実装が必要 Amazon EventBridgeの クイックスタートで、 Webhookの受信部分を CloudFormationから セットアップできる Stripe

    -> AWS連携を 実質ノーコードで実現 18 AWS Dev Day 2022 Japan Amazon EventBridgeでWebhook連携を効率化 https://aws.amazon.com/jp/about-aws/whats-n ew/2022/08/amazon-eventbridge-supports-rec eiving-events-github-stripe-twilio-using-webho oks/

19. Stripe Webhookのイベントは リソースの詳細情報が見れる JSONで構造化（ネスト）した データがくるので、 Stripe API Docsを参照に 読み解く必要がある 読み解くと、

    EventBridgeのフィルターで 複雑な条件検索が可能になる 19 AWS Dev Day 2022 Japan Stripeのイベントから「契約・顧客の状態」を知る

20. クイックスタート利用の場合 Sourceでstripe.comを指定 detail-typeで Stripeのリソース名を指定 detailで、JSON構造に対応した 条件を書くと、絞り込み 右の例: 「5000円以上の請求書」に 関する全てのイベント 20

    AWS Dev Day 2022 Japan EventBridgeでのフィルターの例

21. EventBridgeに「状態」を集約し、システムの起点にする • AWS内のAPIイベントや、StripeのイベントをEventBridgeへ • 顧客・契約・システムの状態と、その状態に対する処理を EventBridgeのルールとして明示的に定義 ◦ CDKやCloudFormationで、コード管理も可能 • 「XXの場面では、この作業を」という「運用タスク(OPS)」を、

    手続き・処理として整理して、AWSで自動化・効率化しよう 21 AWS Dev Day 2022 Japan

22. 今日のトピック • AWS AmplifyとStripeを利用して、 SaaSやECのフロントエンド開発をスムーズにできる • 決済やサブスクリプションなど、 顧客・契約の状態と連動したWFも、Amazon EventBridgeでスムーズに •

    AWS AppSync・AWS Step Functionsを活用して、 決済・サブスクに関する運用効率化（決済OPS）をはじめよう 22 AWS Dev Day 2022 Japan

23. 変化した「状態」をどう処理するか？ • EventBridgeで、「この状態になったら、処理を起動」は定義できる • 「どのような処理を、どの順番で実行するか？」 ◦ 複数のデータを、繰り返し処理する ◦ 失敗した時の、リカバリーや返金フロー ◦

    別のリソースが「特定の状態」になることを待機する 23 AWS Dev Day 2022 Japan

24. ワークフローを設計・実行 AWSのAPI呼び出しが可能 ローコードにWFが作れる ChoiceやWaitで、 条件分岐や待機も可能 ・失敗したら、 　10秒後にリトライ ・3回失敗したら、 　キャンセルして返金 24

    AWS Dev Day 2022 Japan AWS StepFunctionsで、手続き処理をローコードに

25. Stripe + Step Functionsで、簡易WPホスティングWS 25 AWS Dev Day 2022 Japan

    10月に開催したAWS連携WS Stripe Webhookで サブスク契約完了を通知 EventBridge -> StepFunctions StepFunctionsから、 CloudFormationを起動 同様の仕組みで、 解約時のリソース削除も対応 https://zenn.dev/stripe/books/workshop-amazon-eventbridge-no-code

26. Workflow Studio ドラッグ&ドロップで 処理ステップの編集が可能 AWS API呼び出しの引数は APIパラメータから設定 入力/出力タブで、 ステップに渡すデータの 編集や指定が可能

    26 AWS Dev Day 2022 Japan ワークフローはGUIで設定可能

27. ステートマシンをJSONに GUIで設計して、 完成したらJSONを取得 CDKやCloudFormation化で 完成したWFのコード管理も コード管理の現場でも、 設計はWorkflow Studioで 効率化することが可能 27

    AWS Dev Day 2022 Japan Workflow Studioで作って、JSONで共有・管理する

28. イベント駆動では、 ユーザーが「今の状態」を 把握しにくい APIポーリングでも可能 AppSyncの Mutation / Subscriptionで 状態変化をLiveに通知できる MutationはLambdaまたは

    EventBridge API Destinationで 28 AWS Dev Day 2022 Japan ユーザーとのコミュニケーションにAppSync

29. 日本語名: API送信先 EventBridgeのルールで、 外部APIを呼び出せる 入力トランスフォーマーで リクエストBodyのJSON定義も エラーハンドルや データ処理を加えたい場合は 引き続きLambdaを用意しよう 29

    AWS Dev Day 2022 Japan EventBridgeで、外部APIを呼び出す (API Destination)

30. Webhookで、ユーザーとの関係を構築しよう • システムもサブスクリプションも、 リリースor契約からが本番 • それぞれのWebhookイベントで、 「システム上で何が起きたか」「契約が今どうなっているか」を システムや人間が簡単に把握・対処できるようになる • SaaSのAPI

    / Webhookからの情報を収集して、 QuickSightなどを使ったビジネス分析も 30 AWS Dev Day 2022 Japan

31. うまくいった施策・システムを 横に展開 or SaaS化する 31

32. Stripe Appsで、自動化・効率化の「横展開」 • Webhookを利用した「仕組み化」に成功すると、 成功施策の横展開やパッケージ化が可能になることも • Stripe Appsで、 StripeとWebhookの処理システムとの連携や配布が簡単に ◦

    必要なもの ▪ Webhookを処理するAPIシステム（AWSで構築） ▪ React + TypeScript + 専用UI FWでダッシュボードウィジェット 32 AWS Dev Day 2022 Japan

33. Stripe Appsの例: RPAツールとStripeで顧客データ連携 33 AWS Dev Day 2022 Japan

34. 決済システム / 決済OPSからはじめるDX • 守りの決済と攻めの決済 ◦ 守りの決済: 顧客が正しく・ストレスなく決済できる環境づくり ▪ 決済・請求システムの安定稼働

    ▪ 金額や取引内容の正確性 ▪ 不正利用の予防やスムーズな対処 ◦ 攻めの決済: 顧客がよりお得に、便利にサービスを利用できる仕組み ▪ 契約期間・利用累計額に応じた優待や提案 ▪ 従量課金プランや休会など、ユースケースにあったプランの企画 ▪ 決済データを元にしたレコメンドや在庫予測 34 AWS Dev Day 2022 Japan

35. 決済システム / 決済OPSからはじめるDX • AWSのマネージドサービスとSaaSで、 システムの安定稼働や正確さなどの「守り」を固めよう • EventBridge / Webhookを活用した「状態の把握」で、

    顧客や契約、システムに応じた柔軟な「攻めの運用」を目指そう • イベント駆動で疎結合なシステムとして構築し、 Stripe Appsなどで「成功したシステム」をas a Service化しよう 35 AWS Dev Day 2022 Japan