Einrichten einer benutzerdefinierten Domäne mit Azure DNS in Azure Static Web Apps

Standardmäßig stellt Azure Static Web Apps einen automatisch generierten Domänennamen für Ihre Website bereit, aber Sie können eine benutzerdefinierte Domäne auf Ihre Website verweisen. Kostenlose SSL/TLS-Zertifikate werden automatisch für den automatisch generierten Domänennamen und alle benutzerdefinierten Domänen erstellt, die Sie möglicherweise hinzufügen.

In diesem Leitfaden wird veranschaulicht, wie Sie Ihren Domänennamen mit der Unterdomäne www konfigurieren. Nach Abschluss dieses Verfahrens können Sie eine Apex-Domäne einrichten.

Das folgende Verfahren erfordert, dass Sie Einstellungen aus einer Azure DNS-Zone, die Sie erstellen, sowie aus Ihrer vorhandenen statischen Web-App kopieren. Überlegen Sie, ob Sie das Azure-Portal in zwei verschiedenen Fenstern öffnen, um den Wechsel zwischen den beiden Diensten zu vereinfachen.

Voraussetzungen

Zuordnen der Domäne zu Ihrer Website

Nachdem Ihre Domäne nun für Azure konfiguriert ist, um das DNS zu verwalten, können Sie ihre DNS-Zone jetzt mit Ihrer statischen Web-App verknüpfen.

Abrufen der URL der statischen Web-App

  1. Öffnen Sie das Azure-Portal.

  2. Navigieren Sie zu Ihrer statischen Web-App.

  3. Kopieren Sie im Fenster Übersicht die generierte URL Ihrer Website, und legen Sie sie zur zukünftigen Verwendung in einem Text-Editor ab.

Erstellen von DNS-Einträgen in Azure DNS

  1. Kehren Sie zur DNS-Zone zurück, die Sie im Azure-Portal erstellt haben.

  2. Klicken Sie auf + Datensatzgruppe.

  3. Geben Sie im Fenster Eintragssatz hinzufügen die folgenden Werte ein.

    Einstellung Eigenschaft
    Name Geben Sie www ein.
    Typ Wählen Sie CNAME: Verknüpfung der Unterdomäne mit einem anderen Konto aus.
    Alias-Ressourceneintragssatz Wählen Sie Nein aus.
    TTL Standardwert beibehalten.
    TTL-Einheit Standardwert beibehalten.
    Alias Fügen Sie die für Static Web Apps generierte URL ein, die Sie in einem vorherigen Schritt im Text-Editor abgelegt hatten. Stellen Sie sicher, dass Sie das Präfix https:// aus Ihrer URL entfernen.

    Darüber hinaus können Sie "Ja" für den Alias-Eintragssatz auswählen und Ihre statische Web-App auswählen, anstatt die URL explizit bereitzustellen, um Alias-Datensatzsätze wie Verhinderung von dangling DNS-Einträgen zu nutzen.

  4. Wählen Sie OK aus.

Konfigurieren der benutzerdefinierten Domäne der statischen Web-App

  1. Kehren Sie zu Ihrer statischen Web-App im Portal zurück.

  2. Wählen Sie unter Einstellungen die Option Benutzerdefinierte Domänen aus.

  3. Klicken Sie auf + Hinzufügen.

  4. Geben Sie im Feld "Unterdo Standard" Ihren Unterdo Standard Namen (z. B. www) ein. Das Feld "Vollständige Aufgabe Standard sollte dann den Namen Ihrer benutzerdefinierten Aufgabe anzeigen Standard einschließlich Unterdo Standard.

    Hinweis

    Wenn Sie Ihre Aufgabe Standard an Azure DNS delegiert haben und beim Konfigurieren Ihrer benutzerdefinierten Aufgabe auch zum Hinzufügen von benutzerdefinierten Aufgaben Standard in Azure DNS gewählt haben Standard haben Sie die Möglichkeit, die Azure DNS-Zone auszuwählen. Die folgenden Schritte werden dann automatisch für Sie ausgeführt, nachdem Sie "Hinzufügen" ausgewählt haben.

  5. Wählen Sie Weiter aus.

  6. Geben Sie auf der Registerkarte "Überprüfen+ Hinzufügen " die folgenden Werte ein.

    Einstellung Wert
    Domänenname Dieser Wert sollte mit dem Domänennamen übereinstimmen, den Sie im vorherigen Schritt eingegeben haben (mit der Unterdomäne www).
    Typ des Hostnamenseintrags Wählen Sie CNAME aus.
  7. Klicken Sie auf Hinzufügen.

    Wenn sie eine Fehlermeldung erhalten, die besagt, dass die Aktion ungültig ist, warten Sie fünf Minuten, und versuchen Sie es noch mal.

  8. Öffnen Sie eine neue Browserregisterkarte, und wechseln Sie zu Ihrer Domäne mit der Unterdomäne www.

    Nachdem die DNS-Einträge aktualisiert wurden, sollte Ihre statische Web-App im Browser angezeigt werden. Überprüfen Sie außerdem den Standort, um zu überprüfen, ob Ihre Website mithilfe von https sicher bedient wird.

Nächste Schritte