はじめに

こちらは前回の続き的な感じで書いてます。Azure Blob Storage で静的ページをホストする方法については前回を参照してください。今回は Azure Blob Storage にホストし終えた状態からのスタートとなります。

デフォルトのURLが正直微妙

Azure Blob Storage（以降Blob Storage）で静的ページをホストするのはとても便利です。しかし、Blob Storage でホストした際のデフォルトの URL って

https://{{StorageAccountName}}.z11.web.core.windows.net/

で固定なんです。正直あんまりかっこよくないです。なのでカスタムドメインを取得してマッピングしてしまいましょう

App Service Planでカスタムドメインを取得する

App Service Planのプラン設定

まず、ちょーかっこいいカスタムドメインを取得します。どこから取得してもよいのですが今回は Azure の App Service Plan で取得します。App Service Plan は サイズB1以上からドメインの購入をすることができます。

料金はこちらに乗っています。2019/12/27現在だと1年で 1,342.88 円ですね。

カスタムドメインの購入

App Service Plan を B1 以上に設定したら App Service ドメインというリソースでカスタムドメインを購入します。ドメインの検索で欲しいドメインを検索すると、購入できる近しいドメインが複数出てくるので、気に入ったものを選択します。
あとは連絡先情報やプライバシー保護、注意事項など必要なものを記入したり同意したりして購入完了です。
今回は verycool-domain.com というとてもクールなドメインを取得しました。

Azure CDNを使ってカスタムドメインにマッピングする

Azure CDNエンドポイントの作成

次に現在静的ページをホストしているストレージアカウントからAzure CDNの設定をします。ストレージアカウントの項目一覧を下のほうまで進めていくと、Azure CDNという項目が出てくるのでそこで新しいエンドポイントを設定します。
CDNのプロファイルを新規作成で、名前、CDNエンドポイントを任意で設定します。価格レベルはいくつかありますが、動的配信などはしないので今回は「標準 Microsoft」にします。

価格プランの詳細は以下のようになっています。

作成が完了したらリソースにAzure CDNが追加されて、エンドポイントに今作成したエンドポイントが追加されているはずです。

CNAMEレコードの作成

リソース一覧を見ると、最初に作成したカスタムドメインのDNSレコードというリソースが作られてると思います。 そこでCNAMEレコードを作成していきます。

上記の画像のレコードセットを選択して設定を以下のようにします

名前はホスト名になるので任意で設定します。今回はfixerとしています。種類はもちろんCNAMEです。そしてエイリアスを先ほど作成したCDNエンドポイントに設定します。ここ重要です。

Azure CDNにカスタムドメインを追加する

さて、今一度 Azure CDN に戻ってきて今度はカスタムドメインの追加をします。

カスタムドメインの追加を選択して、カスタムホスト名を先ほど追加したCNAMEレコードに設定します。
カスタムドメイン一欄に追加されるはずです。

Azure CDNの配信元を変更する

最後に現在の Blob Storage のエンドポイントを Azure CDN の配信元に設定します。まず、Blob Storage の 静的な Web サイトから、プライマリエンドポイントのドメイン名をコピーします。

次にコピーしたドメイン名を Azure CDN の配信元に設定します

配信元の種類をカスタムの配信元にします。そして配信元のホスト名を先ほどコピーしたドメイン名に設定します。

これでカスタムドメインから Blob Storage の静的ページにアクセスできるようになりました。しかし、まだHTTPSが有効になっていないので有効化していきます。すごく簡単です。

マッピングしたカスタムドメインにHTTPSを有効化する

Azure CDNから先ほど追加したカスタムドメインを選択します

選択すると、カスタムドメインHTTPS のオン/オフの設定ができるのでオンにして 、証明書の管理の種類はCDNマネージドにします。CDNマネージドは無料で利用できます。

選択して保存すると以下のような検証が走ります。この検証、１時間弱かかるので気長に待ちましょう。

検証が完了するとHTTPSが有効化されるので早速カスタムドメイン名でアクセスしてみます。

実際にアクセスしてみる

では実際にアクセスしてみます。まずもともとのBlob StorageのURLのページはこちらです。

次に Azure CDN で設定したカスタムドメインでアクセスします。

できてます。HTTPSも有効化されています。非常にクールなドメインでよいですね。

まとめ

Azure CDN を少し触るだけでカスタムドメインを設定することができました。もっと面倒くさいイメージがあったのですが全然そんなことはなく、手順さえ分かっていれば10~20分作業してちょっと証明書の検証待って...ってくらいなのでお手軽です。
料金は Azure CDN の分が加算されるので、そこはカスタムドメインをとるかコストの安さをとるか要相談ですね。
それではよいお年を。