Tutorial: Konfigurieren von Azure Front Door für Azure Static Web Apps

Indem Sie Azure Front Door als CDN für Ihre statische Web-App hinzufügen, profitieren Sie von einem sicheren Einstiegspunkt für die schnelle Zustellung Ihrer Webanwendungen.

Mit static Web-Apps haben Sie zwei Möglichkeiten, in Azure Front Door zu integrieren. Sie können Ihrer statischen Web-App Azure Front Door hinzufügen, indem Sie den Edge auf Unternehmensniveau aktivieren, eine verwaltete Integration von Azure Front Door mit statischem Web-Apps. Alternativ können Sie eine Azure Front Door-Ressource manuell vor Ihrer statischen Web-App konfigurieren.

Berücksichtigen Sie die folgenden Vorteile, um zu bestimmen, welche Option ihren Anforderungen am besten entspricht.

Edge auf Unternehmensniveau bietet Folgendes:

• Keine Konfigurationsänderungen
• Keine Ausfallzeit
• Automatisch verwaltete SSL-Zertifizierungen und benutzerdefinierte Domänen

Ein manuelles Azure Front Door-Setup bietet Ihnen die vollständige Kontrolle über die CDN-Konfiguration, einschließlich der Möglichkeit:

• Beschränken des Ursprungs des Datenverkehrs nach Ursprung
• Hinzufügen einer Webanwendungsfirewall (WAF)
• Routing über mehrere Anwendungen
• Verwenden Sie erweiterte Features von Azure Front Door

In diesem Lernprogramm erfahren Sie, wie Sie Ihrer statischen Web-App Azure Front Door hinzufügen.

Voraussetzungen

• Benutzerdefinierte Domain, konfiguriert für Ihre statische Web-App mit einer Lebensdauer (TTL) von weniger als 48 Stunden.
• Eine mit Azure Static Web Apps bereitgestellte Anwendung, die den Standard-Hostingplan nutzt.

Aktivieren des Edges auf Unternehmensniveau in der statischen Web-Apps-Ressource

Azure portal

1. Wechseln Sie im Azure-Portal zu Ihrer statischen Web-App.

2. Wählen Sie im Menü auf der linken Seite die Option Edge auf Unternehmensniveau aus.

3. Aktivieren Sie das Kontrollkästchen Edge auf Unternehmensniveau aktivieren.

4. Wählen Sie Speichern aus.

5. Wählen Sie OK aus, um das Speichern zu bestätigen.

   Die Aktivierung dieses Features verursacht zusätzliche Kosten.

Azure-Befehlszeilenschnittstelle

az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

Voraussetzungen

• Ein Azure-Konto mit einem aktiven Abonnement. Kostenlos ein Konto erstellen
• Eine Azure Static Web-Apps-Website. Erstellen Ihrer ersten statischen Web-App
• Azure Static Web-Apps Standard- und Azure Front Door Standard/Premium-Pläne. Weitere Informationen finden Sie unter Static Web-Apps Pricing
• Erwägen Sie den Einsatz von Enterprise Edge für schnelleres Laden von Seiten, erhöhte Sicherheit und optimierte Zuverlässigkeit für globale Anwendungen.

Erstellen einer Azure Front Door-Instanz

1. Melden Sie sich beim Azure-Portal an.

2. Wählen Sie auf der Startseite oder im Azure-Menü die Option + Ressource erstellen aus. Suchen Sie nach Front Door- und CDN-Profilen, und wählen Sie dann "Front Door" und "CDN-Profile erstellen>" aus.

3. Wählen Sie auf der Seite "Angebote vergleichen" "Schnell erstellen" und dann " Weiter" aus, um eine Front door zu erstellen.

4. Geben Sie auf der Seite "Front Door-Profil erstellen" die folgenden Einstellungen ein, oder wählen Sie sie aus.

   Einstellung	Wert
   Subscription	Wählen Sie Ihr Azure-Abonnement.
   Resource group	Geben Sie einen Ressourcengruppennamen ein. Dieser Name ist häufig der gleiche Gruppenname, der von Ihrer statischen Web-App verwendet wird.
   Ressourcengruppenstandort	Wenn Sie eine neue Ressourcengruppe erstellen, geben Sie den nächstgelegenen Standort ein.
   Name	Geben Sie my-static-web-app-front-door ein.
   Tarif	Wählen Sie Standard aus.
   Endpunktname	Geben Sie einen eindeutigen Namen für Ihren Front Door-Host ein.
   Ursprungstyp	Wählen Sie Static Web Apps aus.
   Urspungs-Hostname	Wählen Sie den Hostnamen Ihrer statischen Web-App aus dem Dropdownmenü aus.
   Caching	Aktivieren Sie das Kontrollkästchen Caching aktivieren.
   Verhalten für das Zwischenspeichern von Abfragezeichenfolgen	Wählen Sie Abfragezeichenfolge verwenden aus.
   Komprimierung	Wählen Sie Komprimierung aktivieren:
   WAF-Richtlinie	Wählen Sie Neu erstellen aus oder wählen Sie in der Dropdownliste eine vorhandene WAF-Richtlinie aus, wenn Sie dieses Feature aktivieren möchten.

   Hinweis

   Wenn Sie ein Azure Front Door-Profil erstellen, müssen Sie einen Ursprung aus demselben Abonnement auswählen, in dem die Front Door erstellt wird.

5. Klicken Sie auf Überprüfen und erstellen und dann auf Erstellen. Der Erstellungsvorgang kann einige Minuten dauern.

6. Klicken Sie nach Abschluss der Bereitstellung auf Zu Ressource wechseln.

7. Fügen Sie eine Bedingung hinzu.

Deaktivieren des Caches für den Authentifizierungsworkflow

Hinweis

Der Cacheablauf, die Abfragezeichenfolge des Cacheschlüssels und die Außerkraftsetzungsaktionen der Ursprungsgruppe sind veraltet. Diese Aktionen können weiterhin normal funktionieren, aber Ihr Regelsatz kann nicht geändert werden. Sie müssen diese durch eine neue Außerkraftsetzungsaktion der Routenkonfiguration ersetzen, bevor Sie ihren Regelsatz ändern.

Fügen Sie die folgenden Einstellungen hinzu, um zu verhindern, dass über die Cacherichtlinien von Front Door versucht wird, authentifizierungs- und autorisierungsbezogene Seiten zwischenzuspeichern.

Eine Bedingung hinzufügen

1. Wählen Sie in Ihrer Fronttür unter Einstellungen "Regelsatz" aus.

2. Klicken Sie auf Hinzufügen.

3. Geben Sie im Textfeld Regelsatzname den Wert Security ein.

4. Geben Sie im Textfeld Regelname den Wert NoCacheAuthRequests ein.

5. Wählen Sie Bedingung hinzufügenaus.

6. Wählen Sie Anforderungspfad aus.

7. Wählen Sie die Dropdownliste "Operator" aus, und beginnen Sie dann mit.

8. Klicken Sie anschließend auf den Link Bearbeiten über dem Textfeld Wert.

9. Geben Sie /.auth das Textfeld ein, und wählen Sie dann "Aktualisieren" aus.

10. Wählen Sie keine Optionen aus der Dropdownliste " Zeichenfolgentransformation " aus.

Aktion hinzufügen

1. Wählen Sie das Dropdown Aktion hinzufügen aus.

2. Wählen Sie Außerkraftsetzung der Routenkonfiguration aus.

3. Wählen Sie Deaktiviert im Dropdownmenü Zwischenspeicherung aus.

4. Wählen Sie Speichern aus.

Zuordnen einer Regel zu einem Endpunkt

Nachdem die Regel erstellt wurde, wenden Sie die Regel auf einen Front Door-Endpunkt an.

1. Wählen Sie in Der Fronttür den Regelsatz und dann den Link "Nicht zugeordnet" aus.

   

2. Wählen Sie den Endpunktnamen aus, auf den Sie die Zwischenspeicherungsregel anwenden möchten, und wählen Sie dann "Weiter" aus.

3. Wählen Sie Zuordnen aus.

   

Kopieren der Front Door-ID

Verwenden Sie die folgenden Schritte, um den eindeutigen Bezeichner der Front Door-Instanz zu kopieren.

1. Wählen Sie in Ihrer Tür den Link "Übersicht" in der linken Navigationsleiste aus.

2. Kopieren Sie den Wert mit der Bezeichnung "Front Door ID ", und fügen Sie ihn zur späteren Verwendung in eine Datei ein.

   

Aktualisieren der Konfiguration statischer Web-Apps

Um die Integration mit Front Door abzuschließen, müssen Sie die Anwendungskonfigurationsdatei aktualisieren, um die folgenden Funktionen auszuführen:

• Beschränken des Datenverkehrs zu Ihrer Website auf Datenverkehr über Front Door
• Beschränken des Datenverkehrs zu Ihrer Website auf Ihre Front Door-Instanz
• Definieren der Domänen mit Zugriff auf Ihre Website
• Deaktivieren der Zwischenspeicherung für gesicherte Routen

Öffnen Sie die Datei staticwebapp.config.json für Ihre Website, und nehmen Sie die folgenden Änderungen vor.

1. Beschränken Sie den Datenverkehr ausschließlich auf Front Door, indem Sie in der Konfigurationsdatei den folgenden Abschnitt hinzufügen:

   "networking": {
     "allowedIpRanges": ["AzureFrontDoor.Backend"]
   }
   

2. Um festzulegen, welche Azure Front Door-Instanzen und welche Domänen auf Ihre Website zugreifen können, fügen Sie den Abschnitt forwardingGateway hinzu.

   "forwardingGateway": {
     "requiredHeaders": {
       "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
     },
     "allowedForwardedHosts": [
       "my-sitename.azurefd.net"
     ]
   }
   

   Konfigurieren Sie zunächst Ihre App so, dass nur Datenverkehr von Ihrer Front Door-Instanz zulässig ist. Front Door fügt automatisch jeder Back-End-Anforderung den Header X-Azure-FDID hinzu, der die ID Ihrer Front Door-Instanz enthält. Wenn Sie Ihre statische Web-App so konfigurieren, dass dieser Header erforderlich ist, wird damit der Datenverkehr ausschließlich auf Ihre Front Door-Instanz beschränkt. Fügen Sie im Abschnitt forwardingGateway Ihrer Konfigurationsdatei den Abschnitt requiredHeaders hinzu, und definieren Sie den Header X-Azure-FDID. Ersetzen Sie <YOUR-FRONT-DOOR-ID> durch die Front Door-ID, die Sie zuvor festgelegt haben.

   Fügen Sie als Nächstes den Azure Front Door-Hostnamen (nicht den Azure Static Web Apps-Hostnamen) in das allowedForwardedHosts-Array ein. Wenn Sie benutzerdefinierte Domänen in Ihrer Front Door-Instanz konfiguriert haben, fügen Sie sie ebenfalls dieser Liste hinzu.

   Ersetzen Sie in diesem Beispiel my-sitename.azurefd.net durch den Azure Front Door-Hostnamen für Ihre Website.

3. Deaktivieren Sie für alle gesicherten Routen in Ihrer App die Azure Front Door-Zwischenspeicherung, indem Sie "Cache-Control": "no-store" zur Routenheaderdefinition hinzufügen.

   {
       ...
       "routes": [
           {
               "route": "/members",
               "allowedRoles": ["authenticated", "members"],
               "headers": {
                   "Cache-Control": "no-store"
               }
           }
       ]
       ...
   }
   

Mit dieser Konfiguration ist Ihre Website nicht mehr über den generierten Hostnamen *.azurestaticapps.net verfügbar, sondern ausschließlich über die Hostnamen, die in Ihrer Front Door-Instanz konfiguriert sind.

Überlegungen

• Benutzerdefinierte Do Standard s: Nachdem Die Front Door Ihre Website verwaltet, verwenden Sie die benutzerdefinierte Funktion "Azure Static Web-Apps do Standard" nicht mehr. Azure Front Door nutzt einen eigenen Prozess zum Hinzufügen benutzerdefinierter Domänen. Weitere Informationen finden Sie unter Hinzufügen einer benutzerdefinierten Domäne zu Ihrer Azure Front Door Service-Konfiguration. Wenn Sie in Front Door eine benutzerdefinierte Domäne hinzufügen, müssen Sie die Konfigurationsdatei Ihrer statischen Web-App so aktualisieren, dass sie in die Liste allowedForwardedHosts aufgenommen wird.

• Datenverkehrsstatistik: Azure Front Door konfiguriert standardmäßig Integritätstests, die sich auf Ihre Datenverkehrsstatistik auswirken können. Sie können die Standardwerte für die Integritätstests ggf. anpassen.

• Unterstützung alter Versionen: Wenn Sie Updates für vorhandene Dateien in Ihrer statischen Web-App bereitstellen, kann Azure Front Door ältere Versionen Ihrer Dateien weiterhin unterstützen, bis deren Gültigkeitsdauer abläuft. Löschen Sie den Azure Front Door-Cache für die betroffenen Pfade, um sicherzustellen, dass die neuesten Dateien bereitgestellt werden.

Bereinigen von Ressourcen

Wenn Sie die in diesem Tutorial erstellten Ressourcen nicht mehr verwenden möchten, löschen Sie die Azure Static Web Apps- und Azure Front Door-Instanzen.

Nächste Schritte

Hinzufügen einer API zu Azure Static Web Apps (Vorschauversion) mit Azure Functions