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

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

Static Web Apps で使用するカスタム ドメインを構成する方法は、いくつか存在します。

前提条件

  • DNS サービスまたはドメイン レジストラーが提供するツールを使用して、DNS ドメインに CNAME レコードを作成できる必要があります。

ビデオを見る

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

  1. Azure portal に移動します。

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

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

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

ドメイン レジストラーは、ユーザーがドメイン名を購入および管理するために使用できるサービスです。 ドメイン レジストラーを見つけるには、認定レジストラーの ICANN リストを参照してください。

  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」と入力します。 カスタム ドメイン フォームを追加する手順のシーケンスを示すスクリーンショット。

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

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

    Azure は、CNAME レコードが適切に作成され、グローバルな DNS システムで使用可能であることを検証します。 伝達はドメインの有効期間 (TTL) によって異なり、数日かかる場合があります。 検証が失敗した場合は、再びカスタム ドメインの追加に戻ります。

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

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