Azure Static Web Appsにカスタムドメインを設定

Azure Static Web Appsで運用しているサイトに自分のドメインを設定することにしました。備忘録として残しておきます。

前提条件

まず、今回の状況から説明します。

  • Azure Static Web Appsでホストしているサイト（元のURL: black-field-00cc2da00.6.azurestaticapps.net）
  • 設定したいドメイン: snap-content.takumi-oda.com（サブドメイン）
  • 親ドメイン（takumi-oda.com）はお名前.comで購入済み
  • 親ドメインはXserverでWordPressをホスティング中

一見シンプルそうですが、「DNSレコードはどこで設定すればいいの？」という疑問が湧きました。

どこでDNSレコードを設定すべきか？

ドメインはお名前.comで買ったけど、実際にサイトはXserverでホスティングしている…この場合、DNS設定はどこでやるべき？

結論から言うと、ネームサーバーが指しているところでDNS設定をする必要があります。今回の場合は、親ドメインのネームサーバーがXserverを指しているため、Xserverで設定する必要がありました。

ここを間違えると何時間も無駄にしてしまうので要注意です。ドメイン購入場所≠DNS設定場所となることは珍しくありません。

具体的な設定手順

1. Azure側での準備

まずはAzure Static Web Appsの管理画面から設定を始めます。

  1. Azureポータルにログイン
  2. 対象のStatic Web Appsリソースを開く
  3. 左メニューから「カスタムドメイン」を選択
  4. 「+ 追加」をクリック
  5. 「Custom domain on other DNS」を選択（ここ重要！）
  6. ドメイン名に「snap-content.takumi-oda.com」を入力
  7. 「Hostname record type」で「CNAME」を選択

すると、Azure側が「こんなCNAMEレコードを追加してね」という情報を表示してくれます。これをメモしておきます。

  • Type: CNAME
  • Host: snap-content
  • Value: black-field-00cc2da00.6.azurestaticapps.net

ここではまだ「Add」ボタンは押さないでください。先にDNS設定をしないといけません。

2. Xserverでのレコード設定

次に、Xserverのサーバーパネルにログインして、DNSレコードを追加します。

  1. Xserverのサーバーパネルにログイン
  2. 「DNSレコード設定」に進む
  3. 対象のドメイン（takumi-oda.com）を選択
  4. 新しいレコードとして以下を追加:
  • ホスト名: snap-content
  • 種別: CNAME
  • 内容: black-field-00cc2da00.6.azurestaticapps.net
  • TTL: 3600（デフォルトでOK）
  1. 設定を保存

この設定をすることで「snap-content.takumi-oda.com」へのアクセスがAzure Static Web Appsに転送されるようになります。

3. DNS設定の伝播を待つ

DNSの設定変更は即時反映されません。インターネット全体に広まるまでに時間がかかります。通常は数分〜数時間、最大で48時間くらいかかることも。

焦らずに待ちましょう。nslookupコマンドなどで確認できますが、地域によって反映タイミングが異なることもあります。

4. Azure側での設定完了

DNS設定が伝播したら、最初のAzureポータルの画面に戻り、「Add」ボタンをクリックします。

Azureが自動的にDNS設定を検証し、問題がなければカスタムドメインが追加されます。SSL/TLS証明書も自動的にプロビジョニングされるので、セキュアな接続（https://snap-content.takumi-oda.com）が可能になります。

最後に

ドメイン設定でハマりがちなポイントは、「DNS設定をどこでやるべきか」という点です。ドメインを購入した場所と、実際にDNSレコードを管理する場所が異なることは珍しくありません。

今回の場合は、ネームサーバーがXserverを指していたため、Xserverで設定する必要がありました。もし親ドメインのネームサーバーがお名前.comのままだったら、お名前.comでDNS設定をする必要があったわけです。

Azure Static Web Appsの良いところは、SSL証明書の自動プロビジョニングがあるところ。Let’s Encryptなどで自分で証明書を更新する手間がないのは大きなメリットです。

カスタムドメイン設定、意外と奥が深いですが、一度理解すれば次からはスムーズにできるはずです。

未分類

Posted by takumioda