Självstudie: Lägga till Azure CDN i en Azure App Service-webbapp

Den här självstudiekursen beskriver hur du lägger till Azure Content Delivery Network (CDN) till en webbapp i Azure App Service. Web Apps är en värdtjänst för webbprogram, REST API:er och mobila backend-servrar.

Här är startsidan för den statiska exempel-HTML-platsen som du kommer att arbeta med:

Detta får du får lära dig:

Förutsättningar

För att slutföra den här kursen behöver du:

• Installera Git
• Installera Azure CLI

Om du inte har en Azure-prenumerationkan du skapa ett kostnads fritt konto innan du börjar.

Skapa webbappen

För att skapa webbappen som du ska arbeta med följer du snabbstarten för statisk HTML via steget Bläddra till appen.

Logga in på Azure Portal

Öppna webbläsaren och gå till Azure Portal.

Optimering för acceleration av dynamisk webbplats

Om du vill optimera CDN-slutpunkten för acceleration av dynamisk webbplats (DSA, Dynamic Site Acceleration) bör du skapa slutpunkten direkt på CDN-portalen. Prestanda på webbsidor med dynamiskt innehåll förbättras avsevärt med DSA-optimering. Mer anvisningar om hur du optimerar en CDN-slutpunkt för DSA från CDN-portalen finns i informationen om CDN-slutpunktskonfiguration för snabbare leverans av dynamiska filer. Om du inte vill optimera din nya slutpunkt kan du använda webbapp-portalen för att skapa den genom att följa stegen i nästa avsnitt. Observera att för Azure CDN från Verizon-profiler kan du inte ändra optimeringen av en CDN-slutpunkt när den väl har skapats.

Skapa en CDN-profil och en slutpunkt

I det vänstra navigeringsfönstret väljer du App Services och sedan väljer du den app som du skapade i static HTML quickstart (snabbstart för statisk HTML).

På sidan App Service i avsnittet Inställningar väljer du Networking > Configure Azure CDN for your app (Nätverk > Konfigurera Azure CDN för din app).

På sidan Azure Content Delivery Network anger du inställningarna för Ny slutpunkt som anges i tabellen.

Välj Skapa ny för att skapa en CDN-profil.

Azure skapar en profil och en slutpunkt. Den nya slutpunkten visas i listan Slutpunkter och när den har etablerats är statusen Körs.

Testa CDN-slutpunkten

Slutpunkten kan inte användas direkt, eftersom det tar tid för registreringen att sprida sig:

• För Azure CDN Standard från Microsoft-profiler slutförs spridningen vanligtvis inom 10 minuter.
• För Azure CDN Standard från Akamai-profiler slutförs spridningen vanligtvis inom en minut.
• För Azure CDN Standard från Verizon- och Azure CDN Premium från Verizon-profiler slutförs spridningen vanligtvis inom 90 minuter.

Exempelappen har en index.html-fil och css-, img och js-mappar som innehåller andra statiska tillgångar. Sökvägarna till innehållet för alla de här filerna är samma i CDN-slutpunkten. Båda följande URL:er har till exempel åtkomst till filen bootstrap.css i mappen css:

http://<appname>.azurewebsites.net/css/bootstrap.css

http://<endpointname>.azureedge.net/css/bootstrap.css

Öppna en webbläsare och navigera till följande adress:

http://<endpointname>.azureedge.net/index.html

Du ser samma sida som du körde tidigare i en Azure-webbapp. Azure CDN har hämtat den ursprungliga webbappens tillgångar och fungerar som värd för dem från CDN-slutpunkten

Uppdatera sidan för att se till att den cachelagras i CDN. Ibland krävs två begäranden för samma tillgång för att CDN ska cachelagra det begärda innehållet.

Mer information om hur du skapar Azure CDN-profiler och slutpunkter finns i Komma igång med Azure CDN.

Rensa CDN

CDN uppdaterar regelbundet dess resurser från den ursprungliga webbappen baserat på konfigurationen för TTL (time to live). Standard-TTL är sju dagar.

Ibland kan du behöva uppdatera CDN innan TTL upphör, exempelvis när du distribuerar uppdaterat innehåll till webbappen. För att utlösa en uppdatering kan du rensa CDN-resurser manuellt.

I det här avsnittet av självstudien distribuerar du en ändring till webbappen och rensar CDN för att utlösa en uppdatering av cache i CDN.

Distribuera en ändring till webbappen

Öppna filen index.html och lägg till - V2 till rubriken H1, som i följande exempel:

<h1>Azure App Service - Sample Static HTML Site - V2</h1>

Spara ändringen och distribuera den till webbappen.

git commit -am "version 2"
git push azure main

När distributionen är färdig bläddrar du till webbappens URL där du kan se ändringen.

http://<appname>.azurewebsites.net/index.html

Om du bläddrar till URL:en för CDN-slutpunkten för startsidan så ser du inte ändringen eftersom den cachelagrade versionen i CDN inte har upphört ännu.

http://<endpointname>.azureedge.net/index.html

Rensa CDN i portalen

Rensa CDN för att utlösa uppdateringen av den cachelagrade versionen av CDN.

I det vänstra navigeringsfönstret i portalen väljer du Resursgrupper, och sedan väljer du den resursgrupp som du skapade för din webbapp (myResourceGroup).

Välj din CDN-slutpunkt i listan över resurser.

Längst upp på sidan Slutpunkt väljer du Rensa.

Ange de innehållssökvägar du vill rensa. Du kan skicka en fullständig filsökväg för att rensa en enskild fil eller ett vägsegment för att rensa och uppdatera allt innehåll i en viss mapp. Se till att index.html finns på en av sökvägarna, eftersom du ändrade den.

Välj Rensa längst ned på sidan.

Bekräfta att CDN har uppdaterats

Vänta till bearbetningen av rensningsbegäran slutförs, vilket brukar ta några minuter. Välj klockikonen längst upp på sidan för att se aktuell status.

När du bläddrar till CDN-slutpunktens URL för index.html, ser du den V2 som du lade i rubriken på startsidan, vilket indikerar att CDN-cachen har uppdaterats.

http://<endpointname>.azureedge.net/index.html

Mer information finns i Purge an Azure CDN endpoint (Rensa en Azure CDN-slutpunkt).

Använda frågesträngar för versioninnehåll

Azure CDN erbjuder följande beteendealternativ för cachelagring:

• Ignorera frågesträngar
• Kringgå cachelagring för frågesträngar
• Cachelagra varje unik URL

Det första av dessa alternativ är standard, vilket innebär att det endast finns en cachelagrad version av en tillgång, oberoende av frågesträngen i webbadressen.

I det här avsnittet i självstudien kan du ändra beteendet för cachelagring för att cachelagra alla unika URL:er.

Ändra beteendet för cachelagring

På sidan CDN-slutpunkt i Azure Portal väljer du Cache.

Välj Cachelagra varje unik URL i listrutan för Beteende för cachelagring av frågesträngar.

Välj Spara.

Kontrollera att unika URL:er cachelagras separat

Gå till startsidan i CDN-slutpunkten i en webbläsare, och inkludera en frågesträng:

http://<endpointname>.azureedge.net/index.html?q=1

Azure CDN returnerar det aktuella webbappsinnehållet som innehåller V2 i rubriken.

Uppdatera sidan för att se till att den cachelagras i CDN.

Öppna index.html, ändra V2 till V3 och distribuera sedan ändringen.

git commit -am "version 3"
git push azure main

Gå till CDN-slutpunktens URL i en webbläsare med en ny frågesträng, som q=2. Azure CDN hämtar den aktuella index.html-filen och visar V3. Om du däremot navigerar till CDN-slutpunkten med frågesträngen q=1 ser du V2.

http://<endpointname>.azureedge.net/index.html?q=2

http://<endpointname>.azureedge.net/index.html?q=1

Det här resultatet visar att varje frågesträng behandlas olika:

• q=1 användes innan, så cachelagrat innehåll returneras (V2).
• q=2 är nytt, så det senaste webbappinnehållet hämtas och returneras (V3).

Mer information finns i Kontrollera cachelagringsbeteendet med frågesträngar.

Rensa resurser

I de föregående stegen skapade du Azure-resurser i en resursgrupp. Om du inte tror att du behöver dessa resurser i framtiden tar du bort resursgruppen genom att köra följande kommando i Cloud Shell:

az group delete --name myResourceGroup

Det kan några minuter att köra kommandot.

Nästa steg

Vad du lärt dig:

Lär dig hur du optimerar CDN-prestanda i följande artiklar: