Azure Static Web Apps に頂点ドメインを設定する

サブドメインを含まないドメイン名は、頂点またはルート ドメインと呼ばれます。 たとえば、ドメイン www.example.com は、www のサブドメインに example.com の頂点ドメインが付加されたものです。

一部のドメイン レジストラー (Google や GoDaddy など) では、既存の URL に頂点ドメインを指定できません。 レジストラーで ALIAS または ANAME レコードをサポートされていないか、CNAME フラット化が許可されていない場合は、次のオプションを検討してください。

  • Azure DNS を使用してドメインを構成する
  • 頂点ドメインを www サブドメインに転送する
  • A レコードを使用する

A レコードを使用すると、静的 Web アプリの 1 つのリージョン ホストにトラフィックが送信されます。 有効にすると、静的 Web アプリはグローバル分散の恩恵を受けなくなるため、アプリケーションのパフォーマンスに影響を及ぼす可能性があります。 最適なパフォーマンスを得るには、APEX ドメインに ALIASANAME、または CNAME レコードを使用することを検討してください。

このガイドでは、頂点ドメインを構成するための 3 つのオプションを示します。

  • ドメイン レジストラーで ALIAS DNS レコードがサポートされている場合は、ALIAS レコードを使用して設定する手順を使用します。

    レジストラーで ALIAS レコードがサポートされず、ANAME レコードまたは CNAME フラット化がサポートされている場合は、構成設定に関するドキュメントを参照してください。

  • ドメイン レジストラーで ALIAS DNS レコードがサポートされない場合は、www サブドメインに転送する手順を使用します。

  • 上記のオプションが適していない場合は、A レコードを準備する手順を使用します。 A レコードを使用すると、トラフィックは 1 つの Static Web Apps ホストに送信され、アプリはグローバル分散によって得られるパフォーマンス向上の恩恵を受けなくなります。

Note

CNAME レコードはドメイン名を別のドメイン (またはサブドメイン) にマップしますが、A レコードはドメイン名を IP アドレスにマップします。 IP アドレスが変更された場合、A レコードとは異なり、CNAME エントリは引き続き有効です。

ALIAS レコードを使用して設定する

ALIAS レコードを作成する前に、まず独自のドメインを所有していることを検証する必要があります。

所有権の検証

  1. Azure portal を開きます。

  2. 静的 Web アプリに移動します。

  3. [概要] ウィンドウで、サイトに生成された URL をコピーして、後から使用できるようにテキスト エディターに保存します。

  4. [設定] で、[カスタム ドメイン] を選択します。

  5. [+ 追加] を選択します。

  6. [ドメインの入力] タブで、頂点ドメイン名を入力します。

    たとえば、ご利用のドメイン名が example.com である場合は、このボックスに「example.com」と入力します (サブドメイン名はなし)。

  7. [次へ] を選択します。

  8. [検証 + 構成] タブに、次の値を入力します。

    設定
    ドメイン名 この値は、前の手順で入力したドメイン名と一致している必要があります。
    ホスト名レコード タイプ [TXT] を選択します。
  9. [コードの生成] を選択します。

    コードが生成されるのを待ちます。 完了するまでに 1 分ほどかかります。

  10. TXT レコード値が生成されたら、(生成された値の横にある) [コピー] を選択して、コードをクリップボードにコピーします。

  11. [閉じる] を選択します。

  12. 新しいブラウザー タブを開き、ドメイン レジストラー アカウントにサインインします。

  13. ドメイン名の DNS 構成設定に移動します。

  14. 次の値を使用して、新しい TXT レコードを追加します。

    設定
    Type TXT
    Host @」と入力します
    Azure portal からコピーした、生成されたコード値を貼り付けます。
    TTL (該当する場合) 既定値のままにします。
  15. DNS レコードへの変更を保存します。

ALIAS レコードを設定する

  1. ドメイン名の DNS 構成設定に戻ります。

  2. 次の値を使用して、新しい ALIAS レコードを追加します。

    設定
    Type ALIAS
    Host @」と入力します
    Azure portal からコピーした、生成された URL を貼り付けます。 URL からプレフィックス https:// を必ず削除してください。
    TTL (該当する場合) 既定値のままにします。
  3. DNS レコードへの変更を保存します。

    DNS 設定を伝達する必要があるため、このプロセスの完了には時間がかかる場合があります。

  4. 新しいブラウザー タブを開き、頂点ドメインに移動します。

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

www サブドメインに転送する

各ドメイン レジストラーには、ドメイン名を管理するための異なるプロセスがあります。 レジストラーでアカウントにサインインしたら、ドメイン転送オプションを探します。 DNS オプションの下にこの機能が一覧表示されているレジストラーと、Web サイト オプションに関連付けられているレジストラーがあります。

転送を設定する場合は、www サブドメインに転送する頂点ドメインのみを構成してください。

詳細については、レジストラーのドキュメントを参照してください。

A レコードを準備する

A レコードを作成する前に、まず独自のドメインを所有していることを検証する必要があります。

所有権の検証

  1. Azure portal を開きます。

  2. 静的 Web アプリに移動します。

  3. [Essentials] セクションの右上隅にある [概要] ウィンドウで、[JSON ビュー] を選びます。

  4. stableInboundIP プロパティの値をコピーし、後で使用するためにテキスト エディターに保存します。 これは、リージョンの Static Web Apps ホストの IP アドレスです。

  5. [設定] で、[カスタム ドメイン] を選択します。

  6. [+ 追加] を選択します。

  7. [ドメインの入力] タブで、頂点ドメイン名を入力します。

    たとえば、ご利用のドメイン名が example.com である場合は、このボックスに「example.com」と入力します (サブドメイン名はなし)。

  8. [次へ] を選択します。

  9. [検証 + 構成] タブに、次の値を入力します。

    設定
    ドメイン名 この値は、前の手順で入力したドメイン名と一致している必要があります。
    ホスト名レコード タイプ [TXT] を選択します。
  10. [コードの生成] を選択します。

    コードが生成されるのを待ちます。 完了するまでに 1 分ほどかかります。

  11. TXT レコード値が生成されたら、(生成された値の横にある) [コピー] を選択して、コードをクリップボードにコピーします。

  12. [閉じる] を選択します。

  13. 新しいブラウザー タブを開き、ドメイン レジストラー アカウントにサインインします。

  14. ドメイン名の DNS 構成設定に移動します。

  15. 次の値を使用して、新しい TXT レコードを追加します。

    設定
    Type TXT
    Host @」と入力します
    Azure portal からコピーした、生成されたコード値を貼り付けます。
    TTL (該当する場合) 既定値のままにします。
  16. DNS レコードへの変更を保存します。

A レコードを設定する

  1. ドメイン名の DNS 構成設定に戻ります。

  2. 次の値を使用して、新しい A レコードを追加します。

    設定
    Type A
    Host @」と入力します
    Azure portal からコピーした stableInboundIP を貼り付けます。
    TTL (該当する場合) 既定値のままにします。
  3. DNS レコードへの変更を保存します。

    DNS 設定を伝達する必要があるため、このプロセスの完了には時間がかかる場合があります。

  4. 新しいブラウザー タブを開き、頂点ドメインに移動します。

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

次のステップ