Azure のカスタムポータルを作ってみた

この記事は、Microsoft Azure Tech Advent Calendar 2018 - Qiita の 24 日目の記事です。

Azure を実際に検証や運用で使ってみると、どうしても Azure ポータルだけでは事足りないことが出てきますが、そんな時、Azure CLI や Azure PowerShell でツール化することがあると思います。
今回は、Azure の API の勉強がてら、Web アプリケーションとして、ツールを作ってみました。

Azure Util Portal

いろいろ説明するよりも見た方が早いので作ったサイトです。


その前にお決まりです。
このツールは、あくまで個人的に作成したもので、所属する企業・組織に一切関係はありません。
またこのツールは、アカウントの認証を行い、取得したトークンを使って Azure の API へアクセスします。もちろん悪意を持って作ったツールではありませんが、不具合等により、Azure の環境に対して意図しない変更が加わることが考えられます。自己責任のもとご利用ください。


ということで、こちらです↓

Azure Util Portal
https://azutil.nomupro.com/

※これは MS 社員向けの補足なのですが、残念ながら、社内テナントでは Azure のリソースへアクセスする権限を持つアプリケーションが作れない(正確にはITにリクエストする必要がある)ので、MSA 等他のテナントのサブスクリプションでログインしてください。

画面

f:id:mitsuki0820:20181223200701g:plain

  • ログイン:MSA に対応するところまでいけませんでした。。組織アカウントでログインしてください。
  • 空のリソース グループを取得 : リソースが一つも含まれていないリソースグループを取得します。
  • 仮想マシンにアタッチされていない管理ディスクの取得 : 何個も仮想マシンを作っていると、放置された管理ディスクが出てきます。そんな管理ディスクを見つけます。
  • SSD の管理ディスクを取得 : 特に検証環境として使っている場合、検証のタイミング以外、SSD の管理ディスクは不要なことがあります。SSD の管理ディスク(Premium/Standard SSD)を見つけます。
  • SSD の管理ディスクを HDD に変換 : SSD の管理ディスクを一気に HDD に変換します。※変更コマンドのため実行には注意してください。
  • Easy Virtual Machine searcher : 仮想マシンを名前で検索します。

技術的なこと

各サービスの関連図です。
f:id:mitsuki0820:20181223192216p:plain

API 周り

Azure の API が載っています。
docs.microsoft.com

開発中はこれとにらめっこしながら実装していきました。
生の API はちょっととっつきにくいかもしれませんが、一度実行できる環境を整えると手軽に扱えると思います。
新しい発見もあったりするので、よく使うサービスの API ドキュメントをじっくり読んでみるのはいかがでしょうか。

認証・認可

認証・認可には、Azure AD を使っていますが、ここが一番はまりました。。
何にはまったかというと冒頭に記載の通り、Microsoft のテナントでは、恐らく悪用されないようにと思いますが、リソース アクセスに制限がかけられている様で、認証コードを取得するタイミングで管理者に許可されていない旨のエラーが出ます。

早めに諦めればよかったのですが、何とかならないかと頑張った結果、結局何ともならず、一番時間が掛かってしまいました。

他のテナントでも設定によっては同じ状態になると思うので参考までにログイン画面を貼っておきます。

f:id:mitsuki0820:20181223173751p:plain

この状態では、管理者から同意してもらえない限りはトークンをもらうことはできません。


アプリケーションの登録は、Azure AD の[アプリの登録(プレビュー)]から行います。
以前は別のポータルサイトもありややこしかったのですが、Azure AD のメニューに統合され始めました。
f:id:mitsuki0820:20181223174525p:plain

ちなみに、Azure AD へのアクセス方法も現状少しややこしい状況になっています。
少し古いですが、このスライドが参考になります。

www.slideshare.net

Azure AD の認証・認可を理解するには、Open ID Connect や OAuth 2.0 の認証プロトコルの知識は当然ですが、Microsoft アカウントや組織アカウントのようなアカウントの種類と v1 エンドポイントやv2 エンドポイントのようなエンドポイントの種類があることを覚えておく必要があります。
また、それに応じて、MSAL や ADAL といったライブラリを使い分ける必要があります。
この辺の内容を書き始めるととても書ききれないので、詳しくは、中村さんの記事(Microsoft Graph を使ってみよう : Azure AD における認証概要 - Qiita)を参考にしつつ、Azure AD のドキュメントをじっくり読むといいでしょう。

アプリケーション

肝心のアプリケーション部分は、JavaScriptフレームワークの一つである、Vue.jsを使いました。
SPA をここまでちゃんと書いたのは初めてなのですが、Vue.js はかなりわかりやすいフレームワークでした。jQuery を使ったことはあったのですが、要素指定をしてfunctionのネストをして、、、というのを考えるとはるかに使いやすいものでした。
これまで JavaScript は騙し騙し使ってきていましたがちゃんと勉強しようと思わせてくれたフレームワークでした。

CSS は、Bootstrap 4 を使いました。ただあまりデザインにこだわっていると時間がなくなりそうだったので、結果の表示は必要最低限、見れればいいやくらいの感じにしました。

サーバー

作ったアプリケーションはどこかにホストする必要があります。
今回は、HTML と JS だけで動くアプリケーションということもあり、GA したての、Storage Account の静的 Web サイトを使ってみました。(※結構前から使えるようになってましたがGAしてなかったようです)

azure.microsoft.com

使い方は簡単です。v2 のストレージアカウントを作って、[静的な Web サイト]を有効にしてあげるだけで、あとは、$web というコンテナができるのでそこにファイルを置くと HTTP サーバーとしてアクセスできるようになります。

CI/CD

CI/CD 環境として、Azure DevOps を使っています。
Vue.js の単一コンポーネントを webpack な環境で作ってみたので、npm run build をして、JavaScript を生成してあげる必要があります。

毎回変更するたびに手作業でビルドしてデプロイするのは避けたかったので、Azure DevOps の Pipelines を使って、Git へのプッシュがあった場合に、ビルドとリリースをするようにしました。
リリースは、Storage Account へ azcopy するようにしました。

ちなみに、Builds はこんな感じです。

resources:
- repo: self
queue:
  name: Hosted Ubuntu 1604
  demands: npm

steps:
- task: Npm@1
  displayName: 'npm install'
  inputs:
    verbose: false


- script: |
   npm run build
   mkdir _src
   cp -ipR index.html dist _src
   
  displayName: 'Command Line Script'

- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)/_src'

    includeRootFolder: false

    archiveType: tar

    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).tar.gz'


- task: PublishBuildArtifacts@1
  displayName: 'Publish artifacts: drop'

ArchiveFiles で特定の複数のファイルの指定が分からなかったので、とりあえず script の中でフォルダーにファイルをコピーしてそれをアーカイブしています。
なんかもっとやりようがあるんだろうなぁ。

それにしても Azure DevOps 、統合されている感があってかなり使いやすいです。UI として左にメニューがあるのが結構好きですね。

Azure CDN

Storage Account にカスタムドメインを設定するのでもいいのですが、Azure CDN を使ってみました。
プロバイダーは、Akamai、Verizon、Microsoft が選択できます。今回は Microsoft を使いました。

カスタムドメインSSL 対応のため証明書の設定に若干時間が掛かりましたが、特にはまったところもなく数回のクリックで CDN まで使えるというのはほんとに便利な時代です。

開発環境

開発は、Visual Studio Code を使いました。
拡張は前から入っていたものがありますが、Bracket Pair Colorizer というブラケットをカラーリングしてくれるものを新たに入れてみました。これがあるのとないのとでは使い勝手が全然違ってくるのでお勧めです。
marketplace.visualstudio.com

あとは、Emacs バインド拡張は外せませんね(

REST API のテストには Postman を使いました。同期機能、変数の定義ができるあたり便利でした。
www.getpostman.com

まとめ

API でのリソースのコントロールは Azure の生の部分を触っているようで面白いですね。
引き続き、いろんな機能を実装していってみようと思います。