自作のブログをAzure Static WebApps で運用しており、カスタムドメインを設定しました。
ドメインの購入から設定まで前提知識なしでも辿り着けるよう記事を書いたので、ぜひ最後までお読みください。
環境について
ホスティングには「Azure Static WebApps」
ドメインの取得には「お名前.com」を使いました。
ホスティングサービス
Azure Static WebAppsのGAは2021年されたサービスです。
主な特徴として、グローバルなコンテンツ配信、柔軟なCI/CDワークフロー、プレビュー環境の自動プロビジョニング、カスタムドメインと無料のSSL証明書の設定、認証プロバイダへのアクセス、カスタムルーティング、Azure FunctionsによるサーバーレスAPI統合などが挙げられます。開発者向けのVisual Studio Code拡張機能や豊富な機能を備えたCLIも提供されています。
ドメイン取得サービス
ドメインの維持費用・有名ドメインの網羅性・サービスの充実度のすべてを兼ね備えているお名前.comを利用しました。
ドメインの取得
お名前.comで取得しようとしているドメインが空いているかどうかを確認することができます。取得したいドメインにチェックをつけて「申し込み」をします。
更新やドメインの保護でお金がかかりますが、支払い方法などを設定し申込をします。.blogなど無料で取得できるドメインもあるのでそちらを取得することをお勧めします。
ドメインを取得すると一覧に表示されます。
ドメイン登録
Azure Static WebAppsの画面に移動し、カスタムドメインの追加を選択します。
次へをクリック
ホスト名はwww.を先頭に追加、TYPEはCNAMEをVALUEはAzure Static WebAppsにデフォルトで設定されているURLを入力します。
追加をクリックして、wwwを先頭につけてカスタムドメインを追加します。
DNSサーバーの設定がうまくいっていくと「検証済み」の表示に切り替わります。
取得したドメインからAzure Static WebAppsでデプロイしたWebサイトにアクセスできることが確認できました。またSSL証明書も自動で付与されています。
参考
SSLの設定
Azure Static WebAppsでカスタムドメインを利用する場合は無料のSSL／TLS証明書が自動的に提供されます。