こんにちは、駆け出しアーキテクトのやまぱんです。
最近 Azure の IaC 、bicep や ARM Template を触ることがあります。
そこでハマった時など Azure Portal 操作時の HTTP リクエストを F12(開発者ツール)を使って見比べることがあります。
今回はその方法について、ストレージ アカウントの作成を例にしてまとめてみます。
なにか間違ってる点や補足などなどあればコメントもらえれば嬉しいです！
やること
Azure Portal でストレージ アカウントの作成する際の HTTP リクエストを Edge でみてみましょう！
そして ARM Template と比較してみます。
事前準備
- 行う操作：ストレージ アカウントのデプロイ
- ブラウザ： Microsoft Edge
(Google Chrome など他のブラウザでも同様のことは大体同じ方法でできます。)
参考：下記サイトで Chrome や Firefox でのやり方が記載されています。
https://programmer-life.work/html_css/html-request
Azure Portal でストレージ アカウントの作成する際の HTTP リクエストを Edge でみてみる
ストレージ アカウント作成画面までいく
- Azure Portal → 検索窓で 「ストレージ アカウント」 → 「作成」
道なりに下記画面まで行きます。
この際、[作成]はまだ押しません
【今回のキモ】開発者ツールを準備
F12 を押して開発者ツールを立ち上げて、[ネットワークタブ] で レコーディングマーク(赤くなってる)ことを確認します。
ストレージ アカウントを [作成]
準備ができたら、[作成] をクリックしてストレージ アカウントを作成します。
-
デプロイ直後
-
デプロイ完了後
なにやらいろいろでてるのが確認できます。
実際の HTTP リクエストを確認する
今回のメインです。
さっき何やら作成された項目のうち上の方のやつをクリックして比較的分量の多いやつを選択します。
右クリックして [値のコピー] をして VS Code などのテキストエディタで確認することができます。
値のコピーをして VS Code などのテキストエディタで開きましょう。
json 形式なので、VS Code の json 拡張機能で整形(json format)すると見やすいのでおすすめです。
または HAR ファイルとしてエクスポートすることも可能です。
HAR ファイルについては深くは触れませんが、HAR ファイルを見るツールがあったり、そのまま VS Code で見ることも可能です。
デプロイ時の Template ファイルと実際のリクエストを比較する
今回のメイン２です。
デプロイ時のテンプレートとパラメータファイルをダウンロードする
下記はデプロイ前にダウンロードした画面ショットです。
デプロイ後からでも、Azure Portal → リソースグループ → デプロイ → 該当の操作を選択 → 「テンプレート」ブレードからもダウンロード可能です。
比較してみる
先ほど実際の リクエストを VS Code で開き json format して、Azure Portal からダウンロードテンプレートファイル、パラメータファイルと比較してみます。
左が Azure Portal からダウンロードしたもので、右が実際の通信のリクエストです。
画面ショットを参考までにのせます。
リクエストの中にそのままテンプレートファイルやパラメータファイルの情報が入ってることが分かります。ほぼ ARM Template そのまま。
-
上部にはパラメータファイルの内容があります。
-
後半にはテンプレートファイルの内容があります。
何が嬉しいんだってばよ
ARM Template や bicep などを触ってるときになぜかうまくいかなくて、「パラメータの設定おかしいかなー」とか思った時に実際 Azure Portal での操作時の通信を確認、比較して TROUBLE SHOOTING のヒントになったりします。
参考
*マイクロソフトの公式 Docs
https://learn.microsoft.com/ja-jp/azure/azure-portal/capture-browser-trace
- 開発者ツールでできること一覧がまとまっています
- その他
あとがき
本筋とは全く関係ないですが、F12 を押して開発者ツールを使うと SNS などでたまに出回ってくる、銀行残高数億円みたいな画面ショットも簡単につくることができます。
例えば、、、
-
夢・・・ 100 億円ゲットだぜ！！
-
実際は・・・こんなことしてます
