Azure Static Web Appsでカスタムドメインを構成する

いわさです。

Azure Static Web Appsは静的Webサイトをホストするにはとてもおすすめできるサービスです。
これだけの高機能で無料というのが驚きですが、最近知ったのがカスタムドメインとSSL証明書についても無料という点です。

Azure App Serviceだとカスタムドメインは無料プランでは利用出来なかったと記憶していますし、無料のカスタムドメインSSL証明書も最近登場したものでかつ利用の前提として有料のApp Serivceが必要だったと認識しています。

今回は所有しているドメインがあったので、カスタムドメインを設定してみました。
また、あわせてSSL証明書の確認とデフォルトドメインにアクセスできないようにもしました。

静的Webアプリ作成

Static Web Appsについては以前に作成していますが、同じ流れで作成したいと思います。

カスタムドメインはFreeでも使えることを確認したいので、ホスティングプランはFreeを選択します。

前提として、ドメインは購入済みで、所有している必要があります。
カスタムドメインメニューから所有済みの希望するカスタムドメインを追加します。

レコードタイプはいくつか選べるのですが、今回はCNAMEを選択しました。
もし稼働中サイトのドメインを移行したい場合などはCNAME（あるいはAレコード）をすでに利用中だと思います。
そういった場合はTXTレコードでカスタムドメインの検証を行うことが可能なので、これを使うことで移行時のダウンタイムを無くすことが出来ます。

そうすると登録するべきレコードが表示されるので、ドメインをホストしているDNSへ登録します。

このCNAMEの名前解決で値が取れれば検証完了です。

私はAWSのRoute53でドメインをホストしていたのでそちらに登録しました。

数秒で検証完了して「準備完了」状態になりました。

カスタムドメインのリストに、先程追加したものが表示されている状態です。
ブラウザに入力してアクセスしてみましょう。

カスタムドメインのHTTPSでアクセスが出来ました。

証明書の確認

SSL証明書の確認をしてみましょう。

DV証明書で、期間は半年でした。
なお、このSSL証明書は自動更新されます。

Free SSL certificates, which are automatically renewed.

What is Azure Static Web Apps? | Microsoft Docs

デフォルトドメインの設定

カスタムドメイン作成前からデフォルトで用意されているドメインにも、引き続きアクセス出来る状態です。

カスタムドメイン作成後はたいていの場合は不要になると思いますが、削除は出来ません。

カスタムドメインの一覧で、追加したカスタムドメインを選択し既定値の設定を行いましょう。
これをしてやると、それ以外のドメインでアクセスしたときに既定として選択したドメインへリダイレクトしてくれるようになります。

リダイレクトも期待どおり動いていますね。

さいごに

Azure Static Web Appsでカスタムドメインの設定を行いました。
料金体系もそうなのですが、使い始めるのも簡単ですし静的サイトをホストするのであればAzure使ってない方へもオススメしたいです。

なお、料金プランはFreeとStandardの2種類が用意されています。
料金ページは以下になります。