Zelfstudie: Azure Front Door 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

• 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 Rand op ondernemingsniveau in het linkermenu.

3. Schakel het selectievakje in met het label Edge op ondernemingsniveau 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 de Azure-portal.

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

3. Selecteer Op de pagina Aanbiedingen vergelijken de optie Snel maken en selecteer vervolgens 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-front-door in.
   Laag	Selecteer Standaard.
   Naam Eeindpunt	Voer een unieke naam in voor uw Front Door-host.
   Type oorsprong	Selecteer Statische web-app.
   Oorsprong hostnaam	Selecteer de hostnaam van uw statische web-app in de vervolgkeuzelijst.
   Caching	Schakel het selectievakje Caching inschakelen in.
   Cachegedrag van queryreeks	Queryreeks gebruiken selecteren
   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 maken van het proces 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 cacheverlooptijd, cachesleutelquerytekenreeks en onderdrukkingsacties van de oorspronkelijke groep worden afgeschaft. Deze acties kunnen nog steeds normaal werken, maar uw regelset kan niet worden gewijzigd. Vervang deze onderdrukkingen door nieuwe acties voor het overschrijven van routeconfiguratie voordat u de regelset wijzigt.

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

Een voorwaarde toevoegen

1. Selecteer regelset in uw Front Door onder Instellingen.

2. Selecteer Toevoegen.

3. Voer in het tekstvak Regelsetnaam beveiliging 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 het tekstvak in en selecteer Vervolgens Bijwerken.

10. Selecteer geen opties in de vervolgkeuzelijst Tekenreekstransformatie .

Een actie toevoegen

1. Selecteer de vervolgkeuzelijst Een actie toevoegen.

2. Selecteer Overschrijven van routeconfiguratie.

3. Selecteer Uitgeschakeld in de vervolgkeuzelijst Opslaan in cache .

4. Selecteer Opslaan.

Regel koppelen aan een eindpunt

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

1. Selecteer in uw Front Door regelset en vervolgens de koppeling Niet-gekoppeld .

   

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

3. Selecteer Koppelen.

   

Front Door-id kopiëren

Gebruik de volgende stappen om de unieke id van het Front Door-exemplaar te kopiëren.

1. Selecteer in uw Front Door de koppeling Overzicht in de linkernavigatiebalk.

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 vanaf uw Front Door-exemplaar
• Definiëren welke domeinen toegang hebben tot uw site
• Caching uitschakelen voor beveiligde routes

Open het bestand staticwebapp.config.json 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, beperkt het verkeer uitsluitend naar uw Front Door-exemplaar. Voeg in de forwardingGateway sectie in uw configuratiebestand de requiredHeaders sectie toe en definieer de X-Azure-FDID header. Vervang door <YOUR-FRONT-DOOR-ID> 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 deze toe te voegen aan "Cache-Control": "no-store" 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. Raadpleeg 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 statustests die van invloed kunnen zijn op uw verkeersstatistieken. U kunt de standaardwaarden voor de statustests 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.

Resources 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