コード(VSCode+Mermaid)でAWSの構築フローを書いてみた件
目次
はじめに
AWS環境を構築する上で各サービスをどのような順番で作るかを整理したくなる場面はないでしょうか？
例えば、サブネットを作るためにはVPCが存在しないと作れないように各サービスには依存関係があり、それらを可視化したくなるような時があります。
今回はそのような依存関係を可視化できるような構築フローを書いてみます。
どのように書くかというとVSCode+Mermaid.jsを使って、コードで書いてみたいと思います。
構築フローが必要になるケース
例えば、以下のようなケースがあると思います。
- 複数人で構築を分担する必要があるケース
- 時間が限られているため、同じような手順は省略し、最短経路でつくりたいケース
コードで書くと何が嬉しいか
例えば、以下のような点が挙げられます。
- 規則性やルールがあり、機械的に書ける場合は生産性が上がる
- 物によっては手で書くよりキレイに書ける
- コードの方が共有と再利用がしやすい
VSCodeとは？
VSCode(Visual Studio Code)はMicrosoftが提供する統合エディターです。
詳細はこちらの公式ページを参考にしてみてください。
Mermaid.jsとは？
グラフやチャート図が書けるJavascriptのライブラリです。
詳細はこちらの公式ページを参考にしてみてください。
今回の環境
VSCode用にMermaidのプラグインが提供されているため、そちらを使ってMarkdown形式で構築フローを書いていきます。
準備
今回はWIndows10に上記をインストールして試します。
こちらの記事を参考にさせていただきました。
「使ってみよう！VSCode+mermaid – 自主的20%るぅる」
VSCodeインストール
こちらの公式ページから自身の環境にあったインストーラをダウンロードして、インストールしましょう。
Mermaidのプラグイン追加
VSCodeの左にある「Extensions」のアイコンを選択します。
検索バーに「mermaid」と入力すると、候補が出てくるので、「Markdown Preview Mermaid Support」を選択して「Install」を押します。
少し待つとインストールが完了します。
サンプル
環境が整ったら、VSCodeで以下のような.mdファイルを作成してPreviewをみてみましょう。
サンプルコード
mermaid_sample.md:
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
プレビュー方法
サンプルコードを保存したら、VSCode上でCtrl + k + v を押してみましょう。
別タブが開き、グラフのプレビューが表示されるはずです。
コードで編集した内容がすぐにプレビュー画面に反映されるので便利です。
プレビュー結果
こんな感じのグラフが描画できたら成功です！
AWS構築フロー
では、いよいよAWSの構築フローを描いてみます。
AWSシステム構成図
今回は下図のような構成を想定しています。
コード
上記のような構成をつくるための構築フローをコードで表現すると以下のようになります。
aws-flow.md:
```mermaid
graph TB
subgraph AWS環境
%% START
ID1000(("開始")) ----> ID1001["VPC作成"]
%% VPC
ID1001 ----> ID1002["サブネット作成"]
ID1001 ----> ID1003["インターネットGW作成"]
ID1001 ----> ID1005["SG作成"]
ID1002 ----> ID1006["ルートテーブル作成"]
ID1002 ----> ID1501
ID1002 ----> ID1701
ID1003 ----> ID1006
ID1005 ----> ID1505
ID1005 ----> ID1602
%% IAM
ID1000 ----> ID1201["IAMロール作成"]
ID1201 ----> ID1501
ID1201 ----> ID1505
%% EC2
ID1005 ----> ID1501["EC2インスンタンス作成(公式AMI)"]
ID1501 ----> ID1502["OS設定・APデプロイ"]
ID1502 ----> ID1504["カスタムAMI作成"]
ID1504 ----> ID1505["起動テンプレート作成"]
%% LB
ID1001 ----> ID1601["ターゲットグループ作成"]
ID1601 ----> ID1602["ALB作成"]
ID1602 ----> ID1701
%% AutoScalingGroup
ID1505 ----> ID1701["AutoScalingグループ作成"]
ID1701 ----> ID1702["EC2インスタンス起動"]
%% RDS
ID1002 ----> ID2002["RDSサブネットグループ作成"]
ID2002 ----> ID2003["RDSデータベース作成"]
ID2003 ----> ID2004["ユーザ・テーブル作成"]
ID1005 ----> ID2003
%% END
ID1702 ----> ID5001(("終了"))
ID1006 ----> ID5001
ID2004 ----> ID5001
end
```
"[]"で括ることで箱の中にテキストを書いたり、任意のIDを指定して"---->"で繋ぐことで線を書いたりできます。
今回はコードの書き方の詳細は割愛しますが、他にも色々な表現ができるみたいなので、興味がある人は調べて試してみてください！
プレビュー結果
下図のような構築フローが出力されたら成功です！
無事に依存関係を表現することができました！
ちなみに今回は比較的シンプルな例で実装してみましたが、もっと複雑なフローだと絵的に見にくくなるかもしれません。
終わりに
今回はVSCode+Mermaidというエディター環境でAWSの構築フローを書いてみました。
絵心がなくてもJavascriptがサポートしてくれるのは心強いです。。笑
IaCがトレンドとなっている今、設計資料もIaC化にチャレンジしてみるというのも面白いかもしれませんね。
こういった類のものは得てして自己満足で終わりかねませんが、周りでコード化の文化が根付いるような環境であれば、有効活用できるやもしれません。
以上。
