Zelfstudie: Een CDN configureren voor Azure Static Web Apps

Door Azure Front Door toe te voegen als cdn voor uw statische web-app, profiteert u van een veilig toegangspunt voor snelle levering van uw webtoepassingen.

Met Static Web Apps hebt u twee opties om te integreren met Azure Front Door. U kunt Azure Front Door toevoegen aan uw statische web-app door edge op bedrijfsniveau in te schakelen, een beheerde integratie van Azure Front Door met Static Web Apps. U kunt ook handmatig een Azure Front Door-resource configureren voor uw statische web-app.

Houd rekening met de onderstaande voordelen om te bepalen welke optie het beste bij uw behoeften past.

Edge op ondernemingsniveau biedt:

• Nul configuratiewijzigingen
• Geen downtime
• Automatisch beheerde SSL-certificeringen en aangepaste domeinen

Een handmatige installatie van Azure Front Door biedt u volledige controle over de CDN-configuratie, waaronder de mogelijkheid om:

• Oorsprong van verkeer beperken per oorsprong
• Een WAF (Web Application Firewall) toevoegen
• Routeren over meerdere toepassingen
• Geavanceerdere functies van Azure Front Door gebruiken

In deze zelfstudie leert u hoe u Azure Front Door toevoegt aan uw statische web-app.

Vereisten

• Geregistreerde Microsoft.Cdnresourceprovider.
• Aangepast domein dat is geconfigureerd voor uw statische web-app met een TTL (Time to Live) ingesteld op minder dan 48 uur.
• Een toepassing die is geïmplementeerd met Azure Static Web Apps die gebruikmaakt van het Standard-hostingabonnement.

Edge op ondernemingsniveau inschakelen in de Static Web Apps-resource

Azure-portal

1. Ga naar uw statische web-app in Azure Portal.

2. Selecteer Enterprise-grade edge in het linkermenu.

3. Vink het selectievakje aan met het label Enterprise-grade edge inschakelen.

4. Selecteer Opslaan.

5. Selecteer OK om het opslaan te bevestigen.

   Als u deze functie inschakelt, worden extra kosten in rekening gebracht.

Azure-CLI

az extension add -n enterprise-edge

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

Vereisten

• Een Azure-account met een actief abonnement. Gratis een account maken
• Een Azure Static Web Apps-site. Uw eerste statische web-app bouwen
• Azure Static Web Apps Standard en Azure Front Door Standard/Premium-abonnementen. Zie De prijzen van Static Web Apps voor meer informatie
• Overweeg om edge op bedrijfsniveau te gebruiken voor snellere paginabelastingen, verbeterde beveiliging en geoptimaliseerde betrouwbaarheid voor wereldwijde toepassingen.

Een Azure Front Door maken

1. Meld u aan bij het Azure-portaal.

2. Selecteer + Een resource maken op de startpagina of in het Azure-menu. Zoek naar Front Door- en CDN-profielen en selecteer Maken>Front Door- en CDN-profielen.

3. Op de pagina Aanbiedingen vergelijken selecteer je Snel maken en selecteer daarna Doorgaan om een Front Door te maken.

4. Voer op de pagina 'Een Front Door-profiel maken' de volgende instellingen in of selecteer deze.

   Instelling	Waarde
   Abonnement	Selecteer uw Azure-abonnement.
   Resourcegroep	Voer een resourcegroepnaam in. Deze naam is vaak dezelfde groepsnaam die wordt gebruikt door uw statische web-app.
   Locatie van resourcegroep	Als u een nieuwe resourcegroep maakt, voert u de dichtstbijzijnde locatie in.
   Naam	Voer mijn-statische-web-app-voordeur in.
   Laag	Selecteer Standaard.
   Naam Eeindpunt	Voer een unieke naam in voor uw Front Door-host.
   Oorsprongstype	Selecteer Statische Web-app.
   Oorsprong hostnaam	Selecteer de hostnaam van uw statische web-app in de vervolgkeuzelijst.
   Geheugencaching	Vink het selectievakje caching inschakelen aan.
   Cachegedrag van querystring	Selecteer Gebruik Queryreeks
   Compressie	Compressie inschakelen selecteren
   WAF-beleid	Selecteer Nieuw maken of selecteer een bestaand Web Application Firewall-beleid in de vervolgkeuzelijst als u deze functie wilt inschakelen.

   Notitie

   Wanneer u een Azure Front Door-profiel maakt, moet u een origin selecteren uit hetzelfde abonnement waarin de Front Door wordt gemaakt.

5. Selecteer Controleren en maken en selecteer vervolgens Maken. Het aanmaakproces kan enkele minuten duren.

6. Nadat de implementatie is voltooid, selecteert u Ga naar resource.

7. Voeg een voorwaarde toe.

Cache voor verificatiewerkstroom uitschakelen

Notitie

De vervaltijd van de cache, de querystring van cachesleutel en de overschrijfhandelingen van de bron groep worden als verouderd verklaard. Deze acties kunnen nog steeds normaal werken, maar uw regelset kan niet worden gewijzigd. Vervang deze overschrijvingen door nieuwe routeconfiguratie-override-acties voordat u uw regelset wijzigt.

Voeg de volgende instellingen toe om te voorkomen dat het cachebeleid van Front Door probeert verificatie- en autorisatiegerelateerde pagina's in de cache op te slaan.

Een voorwaarde toevoegen

1. Selecteer in uw Front Door onder Instellingen de optie Regelset.

2. Selecteer Toevoegen.

3. Voer Beveiliging in het tekstvak Regelsetnaam in.

4. Voer in het tekstvak Regelnaam NoCacheAuthRequests in.

5. Selecteer Een voorwaarde toevoegen.

6. Selecteer Aanvraagpad.

7. Selecteer de vervolgkeuzelijst Operator en vervolgens Begint met.

8. Selecteer de koppeling Bewerken boven het tekstvak Waarde .

9. Voer /.auth in het tekstvak in en selecteer Bijwerken.

10. Selecteer geen opties in de vervolgkeuzelijst Tekenreekstransformatie .

Een actie toevoegen

1. Selecteer de vervolgkeuzelijst Een actie toevoegen.

2. Selecteer Routeconfiguratie overschrijven.

3. Selecteer Uitgeschakeld in het Caching dropdownmenu.

4. Selecteer Opslaan.

Regel koppelen aan een eindpunt

Nu de regel is gemaakt, past u de regel toe op een Front Door-eindpunt.

1. Vanuit uw Front Door selecteert u Regelset en selecteer vervolgens de Niet-geassocieerd koppeling.

   

2. Selecteer de eindpuntnaam waarop u de cacheregel wilt toepassen en klik vervolgens op Volgende.

3. Klik op Associate.

   

Front Door-id kopiëren

Gebruik de volgende stappen om de unieke identificator van de Front Door-instantie te kopiëren.

1. Selecteer in je Front Door de koppeling Overzicht in het navigatiemenu aan de linkerkant.

2. Kopieer de waarde met het label Front Door-id en plak deze in een bestand voor later gebruik.

   

Configuratie van statische web-app bijwerken

Als u de integratie met Front Door wilt voltooien, moet u het configuratiebestand van de toepassing bijwerken om de volgende functies uit te voeren:

• Verkeer naar uw site beperken via Front Door
• Verkeer naar uw site beperken tot alleen verkeer vanaf uw Front Door-exemplaar
• Definiëren welke domeinen toegang hebben tot uw site
• Caching uitschakelen voor beveiligde routes

Open het staticwebapp.config.json-bestand voor uw site en breng de volgende wijzigingen aan.

1. Beperk verkeer om alleen Front Door te gebruiken door de volgende sectie toe te voegen aan het configuratiebestand:

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

2. Als u wilt definiëren welke Azure Front Door-exemplaren en -domeinen toegang hebben tot uw site, voegt u de forwardingGateway sectie toe.

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

   Configureer eerst uw app om alleen verkeer van uw Front Door-exemplaar toe te staan. In elke back-endaanvraag voegt Front Door automatisch een X-Azure-FDID header toe die uw Front Door-exemplaar-id bevat. Door uw statische web-app zo te configureren dat deze header vereist is, beperkt het verkeer zich uitsluitend tot uw Front Door-exemplaar. Voeg in de forwardingGateway sectie in uw configuratiebestand de requiredHeaders sectie toe en definieer de X-Azure-FDID header. Vervang <YOUR-FRONT-DOOR-ID> door de Front Door-id die u eerder hebt gereserveerd.

   Voeg vervolgens de Hostnaam van Azure Front Door (niet de Hostnaam van Azure Static Web Apps) toe aan de allowedForwardedHosts matrix. Als u aangepaste domeinen hebt geconfigureerd in uw Front Door-exemplaar, neemt u deze ook op in deze lijst.

   Vervang in dit voorbeeld door my-sitename.azurefd.net de Azure Front Door-hostnaam voor uw site.

3. Schakel Azure Front Door-caching uit voor alle beveiligde routes in uw app door "Cache-Control": "no-store" toe te voegen aan de definitie van de routeheader.

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

Met deze configuratie is uw site niet meer beschikbaar via de gegenereerde *.azurestaticapps.net hostnaam, maar uitsluitend via de hostnamen die zijn geconfigureerd in uw Front Door-exemplaar.

Overwegingen

• Aangepaste domeinen: Nu Front Door uw site beheert, gebruikt u de aangepaste domeinfunctie van Azure Static Web Apps niet meer. Azure Front Door heeft een afzonderlijk proces voor het toevoegen van een aangepast domein. Zie Een aangepast domein toevoegen aan uw Front Door. Wanneer u een aangepast domein toevoegt aan Front Door, moet u het configuratiebestand van uw statische web-app bijwerken om het op te nemen in de allowedForwardedHosts lijst.

• Verkeersstatistieken: Azure Front Door configureert standaard gezondheidsonderzoeken die van invloed kunnen zijn op uw verkeersstatistieken. Mogelijk wilt u de standaardwaarden voor de gezondheidscontroles bewerken.

• Oude versies leveren: Wanneer u updates implementeert voor bestaande bestanden in uw statische web-app, kan Azure Front Door oudere versies van uw bestanden blijven gebruiken totdat hun time-to-live verloopt. Verwijder de Azure Front Door-cache voor de betreffende paden om ervoor te zorgen dat de meest recente bestanden worden geleverd.

Hulpmiddelen opschonen

Als u de resources die in deze zelfstudie zijn gemaakt niet meer wilt gebruiken, verwijdert u de Azure Static Web Apps- en Azure Front Door-exemplaren.

Volgende stappen

Een API toevoegen