🌍

Terraformの差分を見やすくするwebアプリを作った

2020/11/25に公開

AWS

はじめに

インフラ構成管理ツールのTerraformを仕事で使っています。
書いたテンプレート通りにawsなりgcpなりのインフラを作ったり消したりしてくれるアレです、お世話になっています。

そんなTerraformですが、applyコマンド実行前に、コマンド実行前後のインフラ構成の差分が出力されます、また差分を確認するためのplanコマンドもあります。
そんな差分を表現する文字列を事前によく見て、時にはチームの誰かに確認を取ってから実際にインフラリソースへとテンプレートの内容を反映させるような作業フローで業務を行っています。
そのような業務フローでは、

Aさん「terraform planの実行結果slackに貼りました、大丈夫ですかね?」
わたし「う～ん大丈夫じゃないですかね、applyしちゃってください」

そして消される消えてはいけない設定…みたいな事案が発生してしまいがちです。
言い訳すると見づらいと見落としてしまうので、見やすくする方法無いかなと思って色々試しみたらWebアプリの形にできました。

つくったもの

こちらです、その名もterradiff。
静的Webサイトとして作れたのでgithub.ioにデプロイしました。
terraform planの実行結果をコピペするとgithubのコミット差分みたいな色合いで出力してくれます。
明らかに関係ない行はある程度無視します、ある程度大雑把に実行ログをコピペしてOKです。
構文解析が追い付かないほど手作業で内容を書き換えてもエラーを吐いたりはしないですが、お手柔らかにお願いします。

技術的解説

技術選定

成果物はVue.jsで作ったSPAです。
入力文字列の内容を画面の右側に良い感じに出力するような処理を書いています。
Vueには変数の内容をHTMLテンプレートとして解釈、表示してくれるv-htmlという機能があるため、それを使っています。

そのまま表示させるとボタンだろうがフォームだろうがなんでも作れて遊べてしまうので脆弱性の塊です。
ユーザーが直接触ることができない変数に対して使うのが健全な機能です。
今回はHTMLタグとして解釈できそうな文字列を除外する処理を挟むことで脆弱性を回避しています。

github.ioを選択した理由

深い理由はありません、無料のサービスであることが前提です。
他にも静的サイトの無料ホスティングには

Firebase Hosting
GitLab Pages
Netlify

等が有名どころとしては存在するようです。
たまたま使ってみる気になった、というところが大きいです。

苦労したところ

そんなに無いというか思ったより順調に完成しました、工数でいうと2人日くらいです。
リソースの追加、削除、更新のコンテキストを区別して、HTMLの背景色、文字色を変える処理を作るのが楽しいポイントでした。
構文解析を名乗るには烏滸がましい簡素な解析処理ですが。

内容を一行ずつ解析するだけだと、{[(がネストしていった場合の閉じカッコがどのような文脈なのか理解できなくなってしまうので、ネストの情報をうまい事格納して閉じカッコに適用するような仕組みを作るのが山場でした。

あとは実際のplan結果を過去ログから貼り付けていって例外的な挙動が無いかひたすら確認していきます。
作ったばかりなので今後も不具合があるかもしれませんし、Terraformのバージョン違いによってうまく動かない部分があるかもしれません。
その際はgithubまでご一報いただいたり、一緒に仲良く開発してもらえれば幸いです。
Terraformerの皆さんに使っていただけたら嬉しいです。