テクノロジー 2025.3.7

【アップデート】AWS Step Functions Workflow StudioがVSCodeで利用可能になったので試してみた

AKIHISA

最初にまとめ
AWS Step Functionsとは？
アップデート内容
やってみた
VSCodeから実行できるコマンド
まとめ
関連記事

みなさんこんにちは！開発統括部のAKIHISAです！

2025/3/7にAWS Step Function Workflow Studioが、VSCode上にてAWS Toolkit拡張機能を通じて利用できるようになりました！
今までもAWS Toolkit上からワークフローを編集できましたが、ステートマシン定義ファイルを直接編集していたようでした。

より直感的にワークフローを組めるWorkflow Studioを利用できるようになったのは嬉しいアップデートです！

【ライターの紹介】
AKIHISA

■保有資格
・応用情報技術者試験
・AWS Certified Cloud Practitioner
・AWS Certified Solutions Architect - Associate
・AWS Certified Developer - Associate
・AWS Certified SysOps Administrator - Associate
・AWS Certified Data Engineer - Associate
・AWS Certified Solutions Architect - Professional
・AWS Certified DevOps Engineer - Professional
・AWS Certified Advanced Networking - Specialty
・AWS Certified Security - Specialty
・AWS Certified Machine Learning - Specialty
・AWS Certified Database - Specialty
・AWS Certified Data Analytics - Specialty
・AWS Certified: SAP on AWS - Specialty
・Pythonエンジニア認定基礎試験
・Pythonエンジニア認定データ分析試験
・Pythonエンジニア認定実践試験
・Oracle Certified Java Programmer, Silver SE 11
・G検定
製造業からIT業界未経験でALHへ入社
AWSでの開発環境整備に力を入れており、IaC(Infrastructure as Code)やCI/CDを得意としている。
現在のプロジェクトでは、AWS環境にて構築しているWebサービスの運用保守エンジニアとして参画中。
好きなAWSサービスはAWS CDKとAmazon Bedrock。

最初にまとめ

VSCode上から視覚的にStep Functionsのステートマシンを作成できるようになった。
AWSのAPIアクションをデバッグする時は、IAMロールを指定して実行する。
ステートマシン全体をテストすることはできなさそう。
コマンドパレットから簡単にデプロイできる。
CDKソースからワークフローを画像として抽出できる（Workflow Studioで編集はできない）。

AWS Step Functionsとは？

AWS Step Functionsは、ワークフローを自動化するためのサービスです。

Lambda関数やECSタスクなど複数のAWSサービスをステートマシンとして連携させ、順番に実行したり条件分岐やエラーハンドリングを組み込んだりする「ステートマシン」を作成できます。

過去にもStep Functionsについて紹介した記事があるのでご確認ください。

【AWS】Step Functionsを使ってDynamoDBテーブルを操作してみよう！【ハンズオン】

2023.7.27

アップデート内容

AWS Step Functions Workflow Studio is now available in the AWS Toolkit for Visual Studio Code, enabling you to visually create, edit, and debug state machine workflows directly in your local development environment.
AWS Step Functions Workflow Studio が AWS Toolkit for Visual Studio Code で利用できるようになりました。
これにより、ローカル開発環境で直接、ステートマシンワークフローを視覚的に作成、編集、デバッグできるようになります。

https://aws.amazon.com/jp/about-aws/whats-new/2025/03/aws-step-functions-workflow-studio-vs-code-ide

今まではマネジメントコンソール上からしかWorkflow Studioを利用できなかったので、より簡単に始めることができるようになり便利です！

やってみた

AWS Toolkitをインストールする

VSCodeの拡張機能に「amazonwebservices.aws-toolkit-vscode」と入力して、出てくるAWS Toolkitをインストールします。

拡張機能がインストールされ、ツールバーにAWS Toolkitが表示されたらOKです！

新しいステートマシンを作ってみる

ツールバーのAWS Toolkitから「EXPLORER > Asia Pacific(Tokyo) > Step Functions」を開きます。

AWS上にデプロイされたステートマシンの一覧が並んでますが、今回は「Step Functions」を右クリックして「Create a new Step Functions state machine」をクリックします。

（コマンドパレットから「Create a new Step Functions state machine」と入力しても作成できます）

ステートマシンのテンプレートを選びます。

ここではHello worldテンプレートを選びました。

ステートマシンの定義ファイルをYAMLかJSONのどちらかから選択します。

ここではYAMLを選びました。

ステートマシンの定義ファイルが作成されました！ここで、右上に表示されているStep Functionsアイコンをクリックします。

Workflow Studioが表示されました！

簡単にするためにHello Worldステート以外全て削除します。

ちっちゃいステートマシンになりました。右上のSave Fileをクリックして保存してみます。

ファイル名は選択した拡張子に合わせて「***.asl.yml」「***.asl.json」にしてください。
※ aslを抜くとファイルからWorkflow Studioを開けません。

保存できたものの、保存したファイルを開いているわけではないので、一旦開いているWorkflow Studioを閉じます。
VSCodeのエクスプローラーから、保存したファイルを選択します。

すると、先ほど保存したファイルがWorkflow Studioで開かれ、タイトルもファイル名と同じになっています。

デバッグしてみる

アップデート内容を見ると、VSCode上からデバッグできると書いてありました。

これにより、ローカル開発環境で直接、ステートマシンワークフローを視覚的に作成、編集、デバッグできるようになります。

どのようにデバッグできるのかわからなかったので試してみます。

フローステートのデバッグ

フローステートとは、Step Functionsが提供している、フローの流れを制御するためのステートです。
Hello Worldステートは、フローステートのうちのPathステートという、初期状態だと入力をそのまま返すステートです。

テスト状態ボタンをクリックして、テストタブを開きます。

ステートのテストに関する情報が表示されています。 Pathステートの検証なので、入力に次の値を入れて実行してみます。

{

    "text": "Hello World"

}

実行が成功し、入力した値がそのまま出力されています！

アクションステートのデバッグ

アクションステートとは、Step Functionsが提供している、AWSのAPIアクションを呼び出すステートです。

今回はLambdaを呼び出してみます。

まず、AWS LambdaコンソールからLambda関数を作成します。

https://ap-northeast-1.console.aws.amazon.com/lambda/home?region=ap-northeast-1#/create/function

名前を適当に決めて、そのままの設定で関数の作成をクリックします。

関数を作成できました。

Workflow Studioに戻って、左側の状態ブラウザを開き「アクション > AWS Lambda Invoke」を選択し、そのままワークフロー上にドラッグ＆ドロップします。

Lambda:Invokeを選択した状態で右側のインスペクタを開き「APIパラメータ > 関数名 > 関数を入力」を選択、下の入力エリアに先ほど作成したLambdaのARNを入力します。

Lambda:Invokeのテストタブを見ると、実行ロールを入力するところがあります。 IAMロールを利用してAPIを呼び出しているのですね！

コンソールからIAMロールを作成していきます。

https://us-east-1.console.aws.amazon.com/iam/home?region=ap-northeast-1#/roles/create

「信頼されたエンティティを選択」では、ユースケースにStep Functionsを入力して次へ進みます。

「許可を追加」では、すでにLambdaの実行権限が振られているためそのままの設定で次へ進みます。

「名前、確認、及び作成」では、ロール名を適当に決めて次へ進みます。

IAMロールが作成できたら、Workflow Studioに戻って、実行ロールを設定します。

「テストを開始」をクリックすると、Lambdaの呼び出しに成功して期待通りの結果が帰ってきています！

ステートマシン全体のデバッグ

VSCode上のWorkflow Studioを探してみましたが、ステートマシン全体のデバッグは出来なさそうでした。

マネジメントコンソールのWorkflow Studioでデバッグすると、実際のステートマシンに移動します。
なので、実態のないステートマシンでは全体の実行はできないのかもしれません。

VSCodeから実行できるコマンド

ところで、VSCodeのコマンドパレットからStep Functions関連のコマンドを眺めてみたら、3つのコマンドがありました。

AWS:Create a new Step Functions state machine
AWS:Publish state machine to Step Functions
AWS:Render state machine graph from CDK application

このうち、AWS:Create a new Step Functions state machineは先ほど新しいステートマシンを作成するときに利用しましたので、残り二つを試してみます。

Toolkitからデプロイしてみる

ステートマシンの定義ファイルを開き、Workflow Studioを開きます。

ここからデフォルトエディタをクリックし、YAMLファイルの表示に戻します。

ここで、コマンドパレットからAWS:Publish state machine to Step Functionsを実行すると、設定を選択する画面になります。

自分は次のように選択しました。

Asia Pacific (Tokyo) > Quick Create > (先ほど作ったIAMロール) > (好きなステートマシン名)

コンソールを見ると、新しいステートマシンが作成されていました！

作成した通りのステートマシン定義になっています。

かなり簡単にデプロイできます！

AWS CDKで定義されたステートマシンを読み込んでみる

AWS:Render state machine graph from CDK applicationを試すために、CDKプロジェクトを作ってみます。
検証のため、パスステートのみの簡単なステートマシンにします。

import * as cdk from 'aws-cdk-lib';
import {
  aws_stepfunctions as sfn
} from 'aws-cdk-lib';
import { Construct } from 'constructs';

export class MainStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const pass = new sfn.Pass(this, 'Pass')

    new sfn.StateMachine(this, 'SampleStateMachine', {
      definition: pass
    })
  }
}

※ その他CDKプロジェクトの設定は別途必要です。

コマンドパレットからAWS:Render state machine graph from CDK applicationを実行すると、設定を選択する画面になります。

cdk.jsonを選択 > ステートマシンを選択（リソースIDに指定したもの）

すると、CDKで定義したステートマシンの画像が表示されました！