AWS Step Functions を AWS Amplify から呼び出した #ゆるWeb札幌

ゆるWeb勉強会@札幌 OnLine #21 での発表資料
https://mild-web-sap.connpass.com/event/262287/
https://www.youtube.com/watch?v=ILL00xelET8&t=6447s

AWS Amplify から AWS Step Functions の呼び出し方の話。

Transcript

1. AWS Step Functions を
   AWS Amplify から
   呼び出した
   ゆるWeb勉強会@札幌
   OnLine #21
   2022/10/31
   木原卓也 / @tacck
   1
   ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
   

   View Slide

2. About me
   ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌 2
   • Name
   • Kihara, Takuya / 木原 卓也
   • Organization
   • Co-op Sapporo / コープさっぽろ
   • Communities
   • Yuru-Web Spporo / ゆるWeb勉強会@札幌
   • Amplify Japan User Group
   • AWS Community Builders Program (Q2 2021, 2022)
   Category: Front-end Web and Mobile
   • Figure-Skating Skill I Love
   / 好きなフィギュアスケートの技
   • Spread Eagle
   

   View Slide

3. お品書き
   • AWS Step Functions
   • AWS Step Functions をAWS Amplify から呼び出す
   • Why
   • How / Easy vs Simple
   • やってみる
   • まとめ
   3
   ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
   

   View Slide

4. AWS Step Functions
   4
   ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
   

   View Slide

5. AWS Step Functions
   AWS Step Functions は、デベロッパーが AWS のサービスを利用して分散型アプリケーションを構
   築し、プロセスを自動化し、マイクロサービスのオーケストレーション、データと機械学習のパイプラインを
   構築できるようにするビジュアルワークフローサービスです。
   • イベント駆動型アーキテクチャ
   • ワークフローをGUIで構築可能
   • 一部サービスを実行可能 (AWS SDK も呼び出し可能)
   • 他のサービスから呼び出し可能
   • 実行結果（実際に処理されたフロー）の可視化
   5
   ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
   https://aws.amazon.com/jp/step-functions/
   

   View Slide

6. 一部サービスを実行可能
   Service
   Lambda Amazon EMR on EKS
   AWS Batch CodeBuild
   DynamoDB Athena
   Amazon ECS/AWS Fargate Amazon EKS
   Amazon SNS API Gateway
   Amazon SQS AWS Glue DataBrew
   AWS Glue Amazon EventBridge
   SageMaker AWS Step Functions
   Amazon EMR AWS SDK integrations (Over two hundred)
   6
   ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
   https://docs.aws.amazon.com/step-functions/latest/dg/welcome.html
   

   View Slide

7. ワークフローをGUIで構築可能
   • Workflow Studio
   7
   ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
   https://docs.aws.amazon.com/step-functions/latest/dg/workflow-studio-components.html
   

   View Slide

8. 他のサービスから呼び出し可能
   8
   ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
   https://docs.aws.amazon.com/step-functions/latest/dg/concepts-invoke-sfn.html
   Service
   AWS Lambda, using the StartExecution call. (*)
   Amazon API Gateway
   Amazon EventBridge
   AWS CodePipeline
   AWS IoT Rules Engine
   AWS Step Functions
   (*) Lambda から AWS SDK を経由して Step Functions 呼び出すように実装することが可能
   

   View Slide

9. AWS Step Functions を
   AWS Amplify から呼び出す
   9
   ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
   

   View Slide

10. Why
    • 楽しそう
    • AWS Amplify のロジック実装は Frontend 中心
    • バックエンドに持っていくなら Lambda Functions ほぼ一択
    • AWS AppSync の Resolver に実装できるが、 VTL のハードル高。
    • Amplify Studio + Figma でフロントのコーディング量低下
    • 諸条件あるが、楽をできる場面が生まれた。
    • バックエンドもコーディング量を減らす工夫ができないか？
    そんなこんなで AWS Step Functions を呼びたい!!
    10
    ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
    

    View Slide

11. How / Easy vs Simple
    • 実装が簡単な (Easy) やり方か、
    構成がスッキリした (Simple) やり方か。
    • フロントエンドから、 Step Functions を呼び出し、
    その中で SNS を使ってメールを送信する、
    という流れで考える。
    • これができれば、今後 Step Functions を呼び放題になる。
    11
    ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
    

    View Slide

12. Easy / Lambda Functions 経由
    • Good
    • 利用例も多くわかりやすい
    • Amplify CLI の標準機能で
    Lambda 呼び出しまですぐできる
    • Bad
    • Step Functions 以降を別途用意
    • Amplify + CDK or 別プロジェクト
    • コード量低減の目標に対し
    Lambda の実装が必須
    12
    ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
    

    View Slide

13. Simple / AppSync 経由
    • Good
    • Lambda不要(コード量削減)
    • AppSync HTTP リゾルバで
    AWS SDK の汎用的な処理
    • Amplify + CDK でリソースを
    統合管理
    • Bad
    • リゾルバ追加のために
    VTLを書く必要あり
    13
    ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
    

    View Slide

14. やってみる
    14
    ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
    

    View Slide

15. まとめ
    15
    ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
    

    View Slide

16. まとめ
    • Amplify から Step Functions を呼ぶ方法は、現在二種類。
    • Step Functions にロジックを持っていく、と考えた場合、
    実際のロジックは Lambda Functions が必要なはずなので、
    「ノーコード」では無い。(AWSも言っていない)
    • ただ、ロジック間の繋ぎ、サービス間の繋ぎを
    Step Functions に任せることで、
    Lambda 内のコードを減らすことはできそう。
    • バックエンドに詳しく無い人が、ロジックを必要とする場合の
    選択肢としては十分に使える。
    16
    ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
    

    View Slide

17. 終
    17
    ゆるWeb勉強会@札幌 OnLine #21 / #ゆるWeb札幌
    

    View Slide