Tutorial: Konfigurieren eines CDN 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.

Bei Static Web Apps stehen zwei Optionen für die Integration mit Azure Front Door zur Verfügung. Sie können Azure Front Door zu Ihrer statischen Web-App hinzufügen, indem Sie die Edge-Architektur der Enterprise-Klasse aktivieren, eine verwaltete Integration von Azure Front Door mit Static 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-Architektur der Enterprise-Klasse bietet Folgendes:

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

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

• Beschränken des Ursprungs des Datenverkehrs nach Ursprung
• Hinzufügen einer Web Application Firewall (WAF)
• Weiterleitung über mehrere Anwendungen hinweg
• Verwenden Sie erweiterte Features von Azure Front Door

In diesem Tutorial erfahren Sie, wie Sie Azure Front Door zu Ihrer statischen Web-App 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 der Edge-Architektur der Enterprise-Klasse in der Ressource „Static Web Apps“

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.

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-Site. Erstellen Ihrer ersten statischen Web-App
• Standard-Plan von Azure Static Web Apps und Standard-/Premium-Pläne von Azure Front Door. Weitere Informationen finden Sie in der Preisübersicht für Static Web Apps.
• 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 Erstellen>Front Door- und CDN-Profile aus.

3. Wählen Sie auf der Seite „Angebote vergleichen“ die Option Schnellerfassung aus, und wählen Sie dann Zum Erstellen einer Front Door-Instanz fortfahren aus.

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.
   Herkunfts-Typ	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-Instanz erstellt wurde.

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 Front Door-Instanz unter Einstellungen die Option Regelsatz aus.

2. Wählen Sie 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 und dann die Option Beginnt mit aus.

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

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

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

Hinzufügen einer Aktion

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.

Zuordnen einer Regel zu einem Endpunkt

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

1. Wählen Sie in Ihrer Front Door-Instanz die Option Regelsatz und dann den Link Nicht zugeordnet aus.

   

2. Wählen Sie den Namen des Endpunkts aus, auf den Sie die Regel für das Zwischenspeichern anwenden möchten. 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 Front Door-Instanz im linken Navigationsbereich den Link Übersicht 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 so anpassen, dass sie die folgenden Funktionen bietet:

• 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 Domänen: Nachdem Front Door nun Ihre Site verwaltet, muss das Azure Static Web Apps-Feature für benutzerdefinierte Domänen nicht mehr verwendet werden. 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