Azure Storage の Static website で SPA なアプリケーションを公開する際に、カスタムドメインの HTTPS を構成するには、Azure CDN や Front Door との組み合わせが必要です。
今回は、Azure CDN を使って Azure Storage の Static website にカスタムドメインの HTTPS を構成してみます。
事前準備
Azure CDN では、カスタムドメインの証明書（DigiCert）を無料で準備してくれるので、カスタムドメインのみ用意します。App Service Domain の購入方法については、別の記事を参照してください。
gooner.hateblo.jp
本題ではないので、Azure CDN のエンドポイントに Static website を構成する部分は割愛します。今回は、Vue.js のアプリケーションを Static website にデプロイしました。
Azure CDN には、選択できる SKU にいくつか種類がありますが、CDN の POP からオリジンへの通信量がかからない「Standard from Microsoft」を選択しました。SKU の違いは、公式ドキュメントを参照してください。
docs.microsoft.com
Azure CDN に Static website のエンドポイントを追加する
Azure Portal から Azure CDN を開いて、Static website のエンドポイントを追加します。Origin Type に custom origin を選択し、origin hostname に Static website の URL を設定します。この URL は、Azure Blob Storage ではなく、Static website の URL であることに注意してください。
これで Azure CDN のドメインに HTTP でアクセスできるようになります。
Azure CDN にカスタムドメインを構成する
まずは、App Service Domain を購入したときに作られた DNS zone を開きます。Azure CDN のドメインを使って、staticweb.gunner-s.com というドメインのCNAMEレコードを追加します。
続いて、Azure CDN のエンドポイントのホスト名とカスタムドメインのホスト名を DNS マッピングします。
Azure CDN のカスタムドメインに HTTPS を構成する
Azure CDN が提供するマネージドな証明書を使って、カスタムドメインに HTTPS を構成します。
これで Azure CDN の構成が完了です。HTTPS のカスタムドメインでアクセスできるようになります。
まとめ
Azure CDN を使って Azure Storage の Static website にカスタムドメインの HTTPS を構成してみました。
わずか数クリックで構成できるメリットはあるのですが、Static website 単体ではカスタムドメインの HTTPS を構成できません。
Azure CDN や Front Door が必須になり、Blue / Green デプロイの実現に手間がかかるので、「SPA = Storage の Static website」ではなく、Web Apps を使う選択肢も十分に考慮しておきたいところです。
