echo("備忘録");

IT技術やプログラミング関連など、技術系の事を備忘録的にまとめています。

【AWS】cfn-diagramでCloudFormationテンプレートをプレビューする

AWS Serverless Framework CloudFormation

はじめに

以前、以下の記事で「VS Code Conference Japan」で登壇したということを書きました。

makky12.hatenablog.com

その際の登壇資料の「Azure Template Viewer」のスライド(14ページ)で、「CloudFormationにも、こういう拡張機能が欲しい...」と発表したのですが...

※Azure Template Viewerは、Azure Resource Manager(AWSのCloudFormationに該当する機能)のテンプレートの内容をダイアグラムで視覚的に確認できる拡張機能 f:id:Makky12:20201212152830p:plain

なんとCloudFormationにも、そういうツールがありました。(VS Codeの拡張機能ではないけど)

というわけで、今回はそのツールの紹介です。

cfn-diagram

そのツールは「cfn-diagram」という名前で、npmモジュールとして公開されています。

github.com

これを使うことで、Azure Template Viewerのように、CloudFormationテンプレートの内容をダイアグラムで視覚的に確認することができます。

f:id:Makky12:20201211195548p:plain

また、下記形式で出力できます。

  • Draw.io
  • HTML
  • 画像(まだexperimentalな段階。今回は詳しく取り上げません)

Draw.io形式で出力

Draw.io形式で出力する場合、VS Codeの拡張機能である「Draw.io Integration」が必要なので、事前にインストールしておきます。(VS Code Conference Japanでも紹介したやつです)

marketplace.visualstudio.com

インストールしたら、下記コマンドを実行します。

> cfn-dia draw.io -t (CloudFormationテンプレートファイルのパス)  
# 例：  
> cfn-dia draw.io -t ./template.yaml

すると、カレントフォルダに「template.drawio」ファイルが作成され、ダイアグラムがDraw.io Integration内に表示されます。
f:id:Makky12:20201212083006p:plain

また、下記条件でフィルタをかけることもできます。

項目 説明 備考
Filter Resources by Type リソース種別でフィルタリングを設定する AWS::IAM::Role, AWS::Lambda::Function など
Filter Resources by Name リソース名でフィルタリングを設定する
Edge labels 矢印についているラベル(移動するリソース)の表示/非表示を設定する

HTML形式で出力

HTML形式で出力する場合、下記コマンドを入力するだけOKです。

> cfn-dia html -t (CloudFormationテンプレートファイルのパス)  
# 例：  
> cfn-dia html -t ./template.yaml

すると、ダイアグラムがブラウザに表示されます。
f:id:Makky12:20201212083829p:plain

また、 下記操作も行えます。

  • 拡大・縮小
  • ダイアグラム全体の移動
  • 個別アイテムの移動

画像

画像形式は先述の通りまだexperimentalな状態なので、詳しくは説明しませんが、

とのことです。

分かっている問題

公式ページの「Known issues」にもある通り、下記の問題があるそうです。

  • 全部のアイコンがそろっているわけじゃない(一部抜けがある)
  • WSLの環境でHTML出力をしようとすると「Error: spawn wslvar ENOENT」というエラーが出る
    • wsluというモジュールをインストールすれば解決する模様。(自分は未確認)

ここは理解した上で使用してください。

Serverless Frameworkで使用する

ここまでcfn-diagramの使い方を説明してきましたが、肝心の「Serverless Frameworkではどうなのか」というのを最後に紹介したいと思います。

www.serverless.com

結論

で、いきなり結論ですが、serverless.yml(serverless.ts含む)自体は、cfn-diagramではダイアグラム表示できません。(エラーになる)

まあ、当然と言えば当然です。(CloudFormationテンプレート形式じゃないし)

しかし裏を返せば「CloudFormationテンプレート形式なら可能」なので、パッケージング後の「cloudformation-template-update-stack.json」ファイルなら、cfn-diagramでダイアグラム表示できます。

  • 実は「Draw.io形式で出力」「HTML形式で出力」で表示したダイアグラムも、「cloudformation-template-update-stack.json」ファイルをダイアグラム表示したものです。
  • 「cloudformation-template-update-stack.json」ファイルは、デフォルトではルート直下の「.serverless」フォルダに保存されます。
  • 「cloudformation-template-create-stack.json」というファイルもありますが、これはパッケージング後の*.zipファイルを保存するS3バケットの定義になります。(serverless.ymlで定義したリソース定義とは別)

まとめ

いかがでしたでしょうか？

cfn-diagram、非常に導入も使い方も簡単なので、興味がある方は一度使ってみてはいかがでしょうか？

実際僕も便利だなあと思いますし、業務で開発しているサーバーレスアプリの開発でもいい感じに使っていますので、こういう便利なツールをもっと活用していきたいと考えております。

お知らせ

Qiitaで開催中の「Advent Calendar 2020」において、2記事を担当することになりました。
担当するテーマは、サーバーレスとAWS です。

ちなみに、下記のタイトルで記事きます。(確定)

  • サーバーレス(12/18(金))：Serverless Frameworkを始めよう または Serverless Frameworkでクロススタック参照を行う
  • AWS(12/25(金))：aws-sdk-mockでAWSのテストを行う

それでは、今回はこの辺で。