Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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 の呼び出し方の話。

Kihara, Takuya

October 31, 2022
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

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