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

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

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

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

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

一部サービスを実行可能 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

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

他のサービスから呼び出し可能 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 呼び出すように実装することが可能

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

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

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

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

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

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

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

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

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