ブラウザ完結のAWS構成図作成ツール「StackBuilder」を作った話
1. はじめに
こんにちは、Easegisのなべです。
今回は、先日リリースしたWebアプリ「StackBuilder」についてご紹介します。
画面イメージ
開発の背景
業務でAWS構成図を作成する機会が多く、以下のような課題を感じていました。
- draw.ioの操作が煩雑：アイコンの配置や整列に時間がかかる
- チーム内での共有・更新が手間：ファイルのやり取りやバージョン管理が面倒
- 図からコードへの転記作業：構成図を見ながら手作業でCDKコードを書く必要がある
これらの課題を解決し、「構成図の作成」から「インフラコードの生成」までを一気通貫で行えるツールを作りたいと思い、開発に至りました。
2. StackBuilderでできること
主な機能
-
プロジェクト単位での構成管理
複数のAWS構成をプロジェクトごとに整理して管理できます -
Web上での構成図作成
draw.ioエンジンを採用し、ブラウザだけで本格的な構成図を作成できます -
CDKコードの自動生成
作成した構成図を解析し、AWS CDKのコードを自動出力します
付属機能
- テンプレート構成からの開始
- draw.io形式でのエクスポート
3. 技術スタック
シンプルな構成で開発スピードを重視しました。
- フロントエンド：Next.js
- インフラ：Firebase (Authentication, Firestore, Hosting)
AWS構成図を作るツールでありながらFirebaseを採用したのは、開発速度とメンテナンス性を優先したためです。認証やデータベースの管理がシンプルに実装でき、早期リリースを実現できました。
4. こだわりのポイント
操作性の向上
キーボードショートカットの充実により、マウス操作を最小限に抑えられるようにしました。オブジェクトの配置や複製など、頻繁に行う操作はキーボードのみで完結できます。
インテリジェントなCDK生成
単なるコード出力ではなく、親子関係を考慮した自動設定を実装しました。
例えば：
- VPC内に配置されたサブネットの自動関連付け
- セキュリティグループの適切な設定
- リソース間の依存関係の解決
これにより、生成されたコードをそのまま実行できる状態を目指しています。
5. 今後の展望
作図機能の改善
現状、構成が複雑になると図が見づらくなる課題があります。今後は以下を検討しています。
- レイアウトの自動最適化：要素の自動整列や間隔調整
- レイヤー機能：論理的なグルーピングによる視認性向上
- 美しい図の作成を優先し、場合によっては完全自動化よりも半自動化にする選択も検討中です
CDKエクスポート機能の拡張
現在は主要なサービス（EC2、VPC、RDS等）に対応していますが、今後は以下を予定しています。
- より多くのAWSサービスへの対応
- カスタム設定の詳細な調整機能
コミュニティ機能の強化
- 他ユーザーが作成した構成の閲覧・利用
- テンプレートの共有・評価システム
- コメントやフィードバック機能
6. まとめ
StackBuilderは「AWS構成図作成の煩わしさを減らし、インフラ開発をもっと楽しく」をコンセプトに開発しました。
まだまだ改善の余地はありますが、同じ課題を感じている方々の助けになれば嬉しいです。
ぜひ一度お試しいただき、フィードバックをいただけると幸いです！
StackBuilder：https://stack-builder.easegis.jp/