Azure Static Web Apps で Azure DNS を使用してカスタムドメインを設定する

既定では、Azure Static Web Apps によって Web サイトに自動生成ドメイン名が提供されますが、カスタムドメインにサイトを指定することもできます。自動生成ドメイン名と追加可能なカスタムドメインに対して、無料の SSL/TLS 証明書が自動的に作成されます。

このガイドでは、www サブドメインを使用してドメイン名を構成する方法について説明しています。この手順が完了したら、頂点ドメインを設定できるようになります。

次の手順では、作成した Azure DNS ゾーンと既存の静的 Web アプリから設定をコピーする必要があります。 2 つの異なるウィンドウで Azure portal を開いて、2 つのサービスを簡単に切り替えることができるようにすることを検討してください。

前提条件

ドメインは Azure で DNS を管理するように構成されたので、ご利用の DNS ゾーンを静的 Web アプリにリンクさせることができます。

[レコードセットの追加] ウィンドウに次の値を入力します。

設定	プロパティ
名前	「www」を入力します
Type	[CNAME - サブドメインを別のアカウントにリンクする] を選択します
エイリアスのレコードセット	このため、 [いいえ] を選択します。
TTL	既定値のままにします。
TTL の単位	既定値のままにします。
Alias	前の手順で保存しておいた Static Web Apps 生成 URL を貼り付けます。 URL からプレフィックス `https://` を必ず削除してください。

さらに、エイリアスレコードセットに対して [はい] を選択し、URL を明示的に指定する代わりに Static Web App を選択して、DNS レコードのダングル防止などのエイリアスレコードセットを利用することもできます。

ポータルで静的 Web アプリに戻ります。
[設定] で、[カスタムドメイン] を選択します。
[+ 追加] を選択します。
[サブドメインメイン] ボックスに、サブドメインメイン名 (www) を入力します。その後、[完全な doメイン] フィールドに、サブドメインメインを含むカスタム doメインの名前が表示されます。

Note

doメインを Azure DNS に委任し、カスタム do を構成するときに Azure DNS でカスタム doメインを追加することもできますメイン、Azure DNS ゾーンを選択するオプションがあります。 [追加] を選択すると、次の手順が自動的に実行されます。
[次へ] を選択します。

[検証 + 追加] タブで、次の値を入力します。

設定	値
ドメイン名	この値は、前の手順で入力したドメイン名 (`www` サブドメインを含む) と一致している必要があります。
ホスト名レコードタイプ	[CNAME] を選択します。

[追加] を選択します。

アクションが無効であるというエラーが表示された場合は、5 分待ってからもう一度やり直してください。
新しいブラウザータブを開き、www サブドメインを含むドメインに移動します。

DNS レコードが更新されていれば、ブラウザーに静的 Web アプリが表示されます。また、https を使用して場所を調査し、サイトが安全に提供されていることを確認します。