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

既定では、Azure Static Web Apps によって Web サイトに自動生成ドメイン名が提供されますが、カスタム ドメインにサイトを指定することもできます。 自動生成ドメイン名と追加可能なカスタム ドメインに対して、無料の SSL/TLS 証明書が自動的に作成されます。 この記事では、外部プロバイダーを使用して、サブドメイン www でドメイン名を構成する方法について説明します。

Note

Static Web Apps では、オンプレミスでホストされた、プライベート DNS サーバーを使用したカスタム ドメインのセットアップはサポートされていません。 Azure プライベート DNS ゾーンの使用を検討してください。

前提条件

  • 頂点ドメインのサポート方法を検討してください。 サブドメインを含まないドメイン名は、頂点ルート ドメインと呼ばれます。 たとえば、ドメイン www.example.com は、www のサブドメインに example.com の頂点ドメインが付加されたものです。

  • 頂点ドメインを作成するには、ALIAS または ANAME レコードを構成するか、CNAME をフラット化します。 GoDaddy や Google などの一部のドメイン レジストラーでは、これらの DNS レコードがサポートされていません。 ドメイン レジストラーで必要な DNS レコードの一部がサポートされていない場合は、Azure DNS を使用してドメインを構成することを検討してください。

Note

ドメイン レジストラーで特殊な DNS レコードがサポートされていない場合で、Azure DNS を使用したくないときには、頂点ドメインを www サブドメインに転送できます。 詳細については、「Azure Static Web Apps に頂点ドメインを設定する」を参照してください。

ビデオを見る

静的 Web アプリ URL を取得する

  1. Azure portal に移動します。

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

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

ドメイン レジストラー アカウントに CNAME レコードを作成する

ドメイン レジストラーは、ドメイン名を購入および管理するためのサービスです。 一般的なプロバイダーには、GoDaddy、Namecheap、Google、Tucows などがあります。

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

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

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

    設定
    Type CNAME
    Host サブドメイン (www など)
    テキスト エディターに保存したドメイン名を貼り付けます。
    TTL (該当する場合) 既定値のままにします。

Azure Static Web Apps で CNAME レコードを作成する

  1. Azure portal で静的 Web アプリに戻ります。

  2. [設定] で、[カスタム ドメイン]>[+ 追加] の順に選択します。 [他の DNS のカスタム ドメイン] を選択します。

  3. + 追加を選択します。

  4. [ドメインの入力] タブに、www というプレフィックスを付けたドメイン名を入力し、[次へ] を選択します。

    たとえば、ドメイン名が example.com の場合は、「www.example.com」と入力します。 Screenshot showing sequence of steps in add custom domain form.

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

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

    Azure によって CNAME レコードが作成され、DNS 設定が更新されます。 DNS 設定を伝達する必要があるため、このプロセスの完了までには最長で 1 時間以上かかる場合があります。

  7. 更新が完了したら、新しいブラウザー タブを開き、www サブドメインを使用してお使いのドメインに移動します。

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

次のステップ