Azure DNS でAzure Static Web Apps のカスタムドメインを設定する

実施環境

前提条件

今回の条件では以下内容が事前に準備されているものとします。

• Azure リソースの作成はAzure CloudShell を使用するため、CloudShell の準備ができていること。
• Azure Static Web Apps 用にNext.js アプリケーションをGitHub 上のリポジトリにアップロードしていること。実行例ではリポジトリ名「testrepo」を使用します。作成方法につきましては、以下ページを参考にしてください。
  • Azure Static Web Apps でPull Request の一時的な環境を作成する
• お名前ドットコムでドメインの登録を行っていること。

Azure Static Web Apps のカスタムドメインとは

Azure Static Web Apps は作成時にランダムで割り振られたドメインが設定されます。カスタムドメインとは、Azure Static Web Apps に独自のドメインを設定する機能です。カスタムドメインを使用することで、Azure Static Web Apps に独自のドメインを設定できます。

カスタムドメインは、ホスティングプランによって作成可能な数が異なります。Free では最大2つ、Standard では最大5つまで設定可能です。また、カスタムドメインで作成したドメインは無料のSSL/TLS 証明書が自動的に作成されます。

Azure Static Web Apps でカスタムドメインを設定するには以下の方法があります。

• Azure DNS で認証を行いCNAME レコードを設定する
• Azure DNS 以外のDNS を使用してCNAMEを設定する

Azure DNS を使用するとカスタムドメイン設定時に自動的にCNAME を作成しますが、Azure DNS 以外の他DNS で作成する場合はTXT レコードの認証が必要となります。

リソースグループの作成

初めにAzure DNS とAzure Static Web Apps 用のリソースグループを作成します。

# リソースグループを作成する
az group create -n test-rg -l japaneast

Azure DNS の作成

リソースグループ作成後、Azure DNS でゾーンの作成を行います。ゾーン名はドメインの「kdkwakaba.work」を使用します。デフォルトのゾーンタイプはPublic となりますが、作成時にどのゾーンタイプを指定するかを分かりやすくするため明示的に付与します。

# 「kdkwakaba.work」のAzure DNSゾーンを作成する
az network dns zone create -n kdkwakaba.work -g test-rg --zone-type Public

作成すると実行結果にネームサーバーが表示されるため、ネームサーバーの値を控えます。

{
  <省略>
  "name": "kdkwakaba.work",
  "nameServers": [
    "ns1-07.azure-dns.com.",
    "ns2-07.azure-dns.net.",
    "ns3-07.azure-dns.org.",
    "ns4-07.azure-dns.info."
  ],
  <省略>
  "resourceGroup": "test-rg",
  "tags": {},
  "type": "Microsoft.Network/dnszones",
  "zoneType": "Public"
}

お名前ドットコムにネームサーバーを登録

Azure DNS でゾーン作成後、お名前ドットコムのドメインと関連付けるため、お名前ドットコムにAzure DNS のネームサーバーを登録します。指定したドメインから「ネームサーバーの設定」を選択し、ネームサーバーの情報から「ネームサーバーの変更」をクリックします。ドメイン名を選択後、「他のネームサーバーを利用」タブをクリックし、先程控えたAzure DNS のネームサーバーから末尾の「.」を除いた値を全て入力します。

入力後「確認画面へ進む」をクリックし、設定内容に問題なければ「設定する」をクリックします。

お名前ドットコムで反映後、ローカルPC からドメインの確認を行います。「;; AUTHORITY SECTION:」でAzure DNS のネームサーバーが表示されることを確認します。

# ドメイン反映を確認する
dig kdkwakaba.work

お名前ドットコムのネームサーバー変更は反映まで24時間から72時間かかることがあります。dig コマンドでネームサーバーが表示されない場合は、少し待った上で再度dig で確認を行ってください。

Azure Static Web Apps の作成

ネームサーバーの関連付け後、Azure Static Web Apps を以下設定で作成します。組織やリポジトリ、ブランチは個人の環境に修正して使用してください。

実行するとGitHub のpersonal access token の認証を行うためのURL とコードが表示されるため、ブラウザでURL にアクセスしコードを入力しGitHub の認証を行います。

# Azure Static Web Appsを作成する
az staticwebapp create -n test-app \
    -g test-rg \
    -l eastasia \
    --sku Free \
    -s https://github.com/kdkwakaba/testrepo \
    -b main \
    --login-with-github

カスタムドメインの設定

Azure Static Web Apps 作成後、カスタムドメインを設定します。Azure Portal にアクセスし静的Web アプリから作成したtest-app をクリックします。左ペインから「カスタムドメイン」を選択し、「追加 > Azure DNS のカスタム ドメイン」をクリックします。ドメイン名に「www」、DNS ゾーンに「kdkwakaba.work」を指定し「追加」をクリックします。

追加後、CloudShell からAzure DNS にCNAME が追加されたことを確認します。

# Azure DNSのレコードを確認する
az network dns record-set list -z kdkwakaba.work \
    -g test-rg \
    -o table

動作確認

カスタムドメイン設定後、「https://www.kdkwakaba.work」でNext.js アプリケーションのトップページが表示されることを確認します。反映されない場合は、CNAME が適用されるまで少し待ちます。

リソースグループの削除

確認後、リソースグループを削除します。

# リソースグループを削除する
az group delete -n test-rg

まとめ

• カスタムドメインはAzure Static Web Apps に独自のドメインを適用する機能。
• Free プランでは最大2つ、Standard プランでは最大5つのカスタムドメインを設定可能。
• Azure DNS でカスタムドメインを設定するには、Azure DNS をドメインと関連付けしCNAME を追加する。

参考資料

• Azure Static Web Apps ホスティング プラン
• Azure Static Web Apps でのカスタム ドメイン
• Azure Static Web Apps で Azure DNS を使用してカスタム ドメインを設定する
• az network dns