Azure Storageの静的Webサイトで独自ドメインを利用する-HTTPS編-

はじめに

前回の記事で、Azure Storageで静的Webサイトで独自ドメインを利用する方法のうち、標準機能で実装できるHTTPについて試しました。

blog.jbs.co.jp

本記事では、標準機能だけではできない、独自ドメインでHTTPSを利用する方法について、挑戦してみたいと思います。

おさらい:HTTPかHTTPSか

Azure Storageで静的Webサイトを利用する際、HTTPかHTTPSか、によって実装方法が異なります。

カスタム ドメインを静的 Web サイトの URL にマップする

  • HTTP(前回の記事で実施)
    • Azure Stogrageでネイティブにサポートしている
  • HTTPS(今回の記事で挑戦)
    • Azure Stogrageではネイティブにサポートしていない
    • Azure CDNを利用する

本記事で挑戦するのは、HTTPSを使った独自ドメインの利用となります。

なお、クリーンな環境で実施するため、前回とは別のストレージアカウントを作成し、静的Webサイトを有効にした上で進めています。

独自ドメインを Azure Storageの静的Webサイトに紐づける(HTTPS)

静的Webサイトのエンドポイントの値を確認

まず、Azure Storageの静的Webサイトとして利用しているエンドポイントの値を確認し、控えておきます。

ストレージアカウントからAzure CDNを設定する(エラー)

こちらの記事に準拠して進めるつもりだったのですが…

手順通りにストレージアカウントの「セキュリティとネットワーク」>「Azure CDN」を開き、「作成」をクリックして進めようとするとエラーになってしまいます。

よって、ここから先は、試行錯誤で進めてみます。

Azure Front Doorの作成

Marketplaceから「Front Door and CDN profiles」を選び、作成します。

今回はAzure Front Doorの簡易作成で進めます。

エンドポイントの設定を以下の通り行います。

  • 配信元の種類
    • ストレージ(静的Webサイト)
  • 配信元のホスト名
    • 先ほど確認した、静的Webサイトのエンドポイントの値を選択

このままAzure Front Doorを作成します。

Azure Front Doorの動作確認

この設定により、Azure Front Door経由でAzure Storageの静的Webサイトにアクセスできるはずなので、アクセスしてみます。

無事アクセスできました。

Azure Front Doorへの独自ドメインの設定

続いて、Azure Front Doorに独自ドメインを追加します。

Front Doorの「設定」>「ドメイン」から、「追加」をクリックします。

今回は、Azure DNS上でドメインを管理しているので、直接新しい名前をここで追加することにしました。

追加自体は成功しますが、これだけでは設定できないようです。

次の二つが必要そうなので、順にみていきましょう。

  • エンドポイントの関連付け
  • ドメインの検証

エンドポイントの関連付け

先ほどのドメイン追加後の画面で「関連付けなし」になっている箇所をクリックします。

今回は、エンドポイントもルートも一つしかないので、そのまま選んで関連付けます。

これでエンドポイントは設定出来ました。

DNSの設定、確認

Azure DNSを確認します。

てっきり、web2というレコードを作ってくれるのかと思ったのですが、違うようです。

Azure Front Doorに戻り、設定を確認します。

「保留中」の部分をクリックすると

検証用のTXTレコード情報が表示されます。Azure DNSの場合、ここで「追加」を押せばTXTレコードは作ってくれるようなので、実行してみます。

DNSレコードの状態は正しく認識されたようです。

Azure DNS側でも、TXTレコードが出来ている事が確認出来ました。

ただ、CNAMEレコードはやっぱりありません。そのため、手動で作ることにします。

もう一度Azure Front Doorに戻り、保留中の部分がどうなったか確認します。

承認済みに変わりました。

試行錯誤であちこちしてしまいましたが、以下の順で進めればよさそうです。

  1. DNSでCNAMEの追加
  2. Front Doorでドメイン追加
  3. Front DoorからTXTレコード追加

動作確認

いよいよ、独自ドメインを使ってHTTPSでアクセスします。

無事、独自ドメインを使って、Azure Storageの静的WebサイトにHTTPSを使ってアクセスする事が出来ました。

おわりに

本来設定出来そうなストレージアカウントのAzure CDNの画面から設定できなかったので思ったより苦労しました。

半面、Azure Front Doorでの設定はそこまで難しくはなかったので、一度やれば二度目はスムーズに出来そうです。

とはいえ、単純に独自ドメインにHTTPSでアクセスさせたいだけならAzure Web Appsの方が楽なので、ストレージアカウントの静的Webサイトを使うケースはかなり限定されるのではないかと思います。

Azure Storageの静的Webサイトに関してはいったんここまでとなります。参考になれば幸いです。

執筆担当者プロフィール
舟越 匠

舟越 匠(日本ビジネスシステムズ株式会社)

人材開発部に所属。社内向けの技術研修をしつつ、JBS Tech Blog編集長を兼任。2024年8月からキーマンズネットPower Automateの連載を開始。好きなサービスはPower AutomateやLogic Apps。好きなアーティストはZABADAKとSound Horizon。

担当記事一覧