Självstudie: Konfigurera Azure Front Door för Azure Static Web Apps

  • Artikel

Genom att lägga till Azure Front Door som CDN för din statiska webbapp kan du dra nytta av en säker startpunkt för snabb leverans av dina webbprogram.

Med Static Web Apps har du två alternativ att integrera med Azure Front Door. Du kan lägga till Azure Front Door i din statiska webbapp genom att aktivera edge i företagsklass, en hanterad integrering av Azure Front Door med Static Web Apps. Du kan också konfigurera en Azure Front Door-resurs manuellt framför din statiska webbapp.

Överväg fördelarna nedan för att avgöra vilket alternativ som bäst passar dina behov.

Med gränsen i företagsklass får du:

  • Noll konfigurationsändringar
  • Ingen stilleståndstid
  • Automatiskt hanterade SSL-certifieringar och anpassade domäner

En manuell Azure Front Door-konfiguration ger dig fullständig kontroll över CDN-konfigurationen, inklusive möjligheten att:

  • Begränsa trafik ursprung efter ursprung
  • Lägga till en brandvägg för webbprogram (WAF)
  • Dirigera mellan flera program
  • Använda mer avancerade funktioner i Azure Front Door

I den här självstudien lär du dig att lägga till Azure Front Door i din statiska webbapp.

Förutsättningar

  • Anpassad domän som konfigurerats för din statiska webbapp med TTL (time to live) inställt på mindre än 48 timmar.
  • Ett program som distribueras med Azure Static Web Apps som använder standardvärdplanen.

Aktivera gränsen i företagsklass på static web apps-resursen

  1. Gå till din statiska webbapp i Azure-portalen.

  2. Välj Kant i företagsklass på den vänstra menyn.

  3. Markera kryssrutan Aktivera gränsen i företagsklass.

  4. Välj Spara.

  5. Välj OK för att bekräfta spara.

    Att aktivera den här funktionen medför extra kostnader.

Förutsättningar

Skapa en Azure Front Door

  1. Logga in på Azure-portalen.

  2. På startsidan eller Azure-menyn väljer du + Skapa en resurs. Sök efter Front Door- och CDN-profiler och välj sedan Skapa>Front Door- och CDN-profiler.

  3. På sidan Jämför erbjudanden väljer du Snabbskapa och väljer sedan Fortsätt för att skapa en Front Door.

  4. På sidan Skapa en Front Door-profil anger eller väljer du följande inställningar.

    Inställning Värde
    Prenumeration Välj din Azure-prenumerationen.
    Resursgrupp Ange ett resursgruppsnamn. Det här namnet är ofta samma gruppnamn som används av din statiska webbapp.
    Plats för resursgrupp Om du skapar en ny resursgrupp anger du den plats som är närmast dig.
    Name Ange my-static-web-app-front-door.
    Nivå Välj Standard.
    Slutpunktnamn Ange ett unikt namn för Din Front Door-värd.
    Ursprungstyp Välj Statisk webbapp.
    Ursprungligt värdnamn Välj värdnamnet för din statiska webbapp i listrutan.
    Cachelagring Markera kryssrutan Aktivera cachelagring .
    Funktionssätt för cachelagring av frågesträng Välj Använd frågesträng
    Komprimering Välj Aktivera komprimering
    WAF-princip Välj Skapa ny eller välj en befintlig brandväggsprincip för webbprogram i listrutan om du vill aktivera den här funktionen.

    Kommentar

    När du skapar en Azure Front Door-profil måste du välja ett ursprung från samma prenumeration som Front Door skapas i.

  5. Välj Granska + skapa och välj sedan Skapa. Det kan ta några minuter att skapa processen.

  6. När distributionen är färdig väljer du Gå till resurs.

  7. Lägg till ett villkor.

Inaktivera cache för autentiseringsarbetsflöde

Kommentar

Åtgärderna för cacheförfallotid, cachenyckelns frågesträng och åsidosättning av ursprungsgrupper är inaktuella. Dessa åtgärder kan fortfarande fungera normalt, men regeluppsättningen kan inte ändras. Ersätt dessa åsidosättningar med nya åsidosättningsåtgärder för routningskonfiguration innan du ändrar regeluppsättningen.

Lägg till följande inställningar för att inaktivera Front Door cachelagringsprinciper från att försöka cachelagra autentisering och auktoriseringsrelaterade sidor.

Lägg till ett villkor

  1. Välj Regeluppsättning under Inställningar i Din Front Door.

  2. Markera Lägga till.

  3. I textrutan Regeluppsättningsnamn anger du Säkerhet.

  4. I textrutan Regelnamn anger du NoCacheAuthRequests.

  5. Välj Lägg till ett villkor.

  6. Välj Sökväg för begäran.

  7. Välj listrutan Operator och sedan Börjar med.

  8. Välj länken Redigera ovanför textrutan Värde.

  9. Ange /.auth i textrutan och välj sedan Uppdatera.

  10. Välj inga alternativ i listrutan Strängtransformering .

Lägga till en åtgärd

  1. Välj listrutan Lägg till en åtgärd.

  2. Välj Åsidosättning av routningskonfiguration.

  3. Välj Inaktiverad i listrutan Cachelagring.

  4. Välj Spara.

Associera regel till en slutpunkt

Nu när regeln har skapats tillämpar du regeln på en Front Door-slutpunkt.

  1. Från Din Front Door väljer du Regeluppsättning och sedan länken Ta bort association .

    Screenshot showing selections for Rule set and Unassociated links.

  2. Välj det slutpunktsnamn som du vill tillämpa cachelagringsregeln på och välj sedan Nästa.

  3. Välj Associera.

    Screenshot showing highlighted button, Associate.

Kopiera Front Door-ID

Använd följande steg för att kopiera Front Door-instansens unika identifierare.

  1. Från Din Front Door väljer du länken Översikt i det vänstra navigeringsfältet.

  2. Kopiera värdet med etiketten Front Door ID och klistra in det i en fil för senare användning.

    Screenshot showing highlighted Overview item and highlighted Front Door ID number.

Uppdatera konfiguration av statiska webbappar

För att slutföra integreringen med Front Door måste du uppdatera programkonfigurationsfilen för att utföra följande funktioner:

  • Begränsa endast trafik till din webbplats via Front Door
  • Begränsa endast trafik till din webbplats från Din Front Door-instans
  • Definiera vilka domäner som kan komma åt din webbplats
  • Inaktivera cachelagring för skyddade vägar

Öppna filen staticwebapp.config.json för webbplatsen och gör följande ändringar.

  1. Begränsa trafik till att endast använda Front Door genom att lägga till följande avsnitt i konfigurationsfilen:

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

  2. Om du vill definiera vilka Azure Front Door-instanser och domäner som kan komma åt din webbplats lägger du till avsnittet forwardingGateway .

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

    Konfigurera först appen så att den endast tillåter trafik från Din Front Door-instans. I varje serverdelsbegäran lägger Front Door automatiskt till en X-Azure-FDID rubrik som innehåller ditt Front Door-instans-ID. Genom att konfigurera din statiska webbapp så att den kräver det här huvudet begränsas trafiken till din Front Door-instans. I avsnittet forwardingGateway i konfigurationsfilen lägger du till avsnittet requiredHeaders och definierar X-Azure-FDID rubriken. Ersätt <YOUR-FRONT-DOOR-ID> med Front Door-ID:t som du lade åt sidan tidigare.

    Lägg sedan till Värdnamnet för Azure Front Door (inte Värdnamnet för Azure Static Web Apps) i matrisen allowedForwardedHosts . Om du har konfigurerat anpassade domäner i Din Front Door-instans kan du även inkludera dem i den här listan.

    I det här exemplet ersätter du my-sitename.azurefd.net med Azure Front Door-värdnamnet för din webbplats.

  3. För alla säkra vägar i din app inaktiverar du Azure Front Door-cachelagring genom att lägga "Cache-Control": "no-store" till i routningsrubrikdefinitionen.

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

Med den här konfigurationen är webbplatsen inte längre tillgänglig via det genererade *.azurestaticapps.net värdnamnet, utan endast via de värdnamn som konfigurerats i Din Front Door-instans.

Överväganden

  • Anpassade domäner: Nu när Front Door hanterar din webbplats använder du inte längre den anpassade domänfunktionen Azure Static Web Apps. Azure Front Door har en separat process för att lägga till en anpassad domän. Mer information finns i Lägg till en anpassad domän i Din Front Door. När du lägger till en anpassad domän i Front Door måste du uppdatera konfigurationsfilen för den statiska webbappen så att den inkluderas allowedForwardedHosts i listan.

  • Trafikstatistik: Som standard konfigurerar Azure Front Door hälsoavsökningar som kan påverka din trafikstatistik. Du kanske vill redigera standardvärdena för hälsoavsökningarna.

  • Betjänar gamla versioner: När du distribuerar uppdateringar till befintliga filer i din statiska webbapp kan Azure Front Door fortsätta att hantera äldre versioner av dina filer tills deras time-to-live upphör att gälla. Rensa Azure Front Door-cachen för de berörda sökvägarna för att säkerställa att de senaste filerna hanteras.

Rensa resurser

Om du inte längre vill använda resurserna som skapades i den här självstudien tar du bort Azure Static Web Apps- och Azure Front Door-instanserna.

Nästa steg

Lägga till ett API