Kurz: Přidání Azure CDN do webové aplikace služby Azure App Service

  • Článek

V tomto kurzu se naučíte přidat službu Azure Content Delivery Network (CDN) do webové aplikace Azure App Service. Webové aplikace jsou služby pro hostování webových aplikací, rozhraní REST API a mobilních back-endů.

Tady je domovská stránka ukázkového statického webu HTML, se kterým pracujete:

Domovská stránka ukázkové aplikace

Co se naučíte:

  • Vytvořit koncový bod CDN.
  • Aktualizovat prostředky uložené v mezipaměti.
  • Spravovat verze uložené v mezipaměti pomocí řetězců dotazu.

Požadavky

Pro absolvování tohoto kurzu potřebujete:

Pokud ještě nemáte předplatné Azure, vytvořte si bezplatný účet Azure před tím, než začnete.

Vytvoření webové aplikace

Pokud chcete vytvořit webovou aplikaci, se kterou pracujete, postupujte podle rychlého startu pro statické HTML v kroku Procházet k aplikaci .

Přihlášení k webu Azure Portal

Otevřete prohlížeč a přihlaste se k Azure Portal.

Optimalizace akcelerace dynamického webu

Pokud chcete koncový bod CDN optimalizovat pro akceleraci dynamického webu (DSA), měli byste k vytvoření profilu a koncového bodu použít portál CDN. Díky optimalizaci DSA se výkon webových stránek s dynamickým obsahem prokazatelně zlepší. Pokyny k optimalizaci koncového bodu CDN pro akceleraci dynamického webu na portálu CDN najdete v tématu o konfiguraci koncového bodu CDN kvůli rychlejšímu poskytování dynamických souborů. Pokud ale nechcete nový koncový bod optimalizovat, můžete k jeho vytvoření použít portál webových aplikací podle kroků v další části. U profilů Azure CDN z Edgio nemůžete po jeho vytvoření změnit optimalizaci koncového bodu CDN.

Vytvoření koncového bodu a profilu CDN

Na levém navigačním panelu vyberte App Services a pak vyberte aplikaci, kterou jste vytvořili v rychlém úvodu ke statickému HTML.

Snímek obrazovky s výběrem aplikace App Service na portálu

Na stránce App Service v části Nastavení vyberte Sítě > Azure CDN.

Snímek obrazovky s výběrem Azure CDN ze síťového nastavení App Service

Na stránce Azure Content Delivery Network zadejte pro Nový koncový bod nastavení tak, jak je uvedeno v tabulce.

Snímek obrazovky s vytvořením profilu a koncového bodu Azure CDN na portálu

Nastavení Navrhovaná hodnota Popis
Profil CDN myCDNProfile Profil CDN je kolekce koncových bodů CDN se stejnou cenovou úrovní.
Cenová úroveň Akamai úrovně Standard Cenová úroveň určuje poskytovatele a dostupné funkce. Tento kurz používá Akamai úrovně Standard.
Název koncového bodu CDN Libovolný název, který je jedinečný v doméně azureedge.net K prostředkům v mezipaměti přistupujete v doméně <endpointname.azureedge.net>.

Vyberte Vytvořit a vytvořte profil CDN.

Azure vytvoří profil a koncový bod. Nový koncový bod se zobrazí v seznamu Koncové body a až se zřídí, bude jeho stav Spuštěno.

Snímek obrazovky s novým koncovým bodem Azure CDN v seznamu

Testování koncového bodu CDN

Vzhledem k tomu, že rozšíření registrace nějakou dobu trvá, koncový bod není okamžitě dostupný pro použití:

  • U profilů Azure CDN Standard od Microsoftu trvá šíření většinou 10 minut.
  • V případě profilů Azure CDN Standard od Akamai je šíření obvykle hotové během jedné minuty.
  • V případě profilů Azure CDN Standard od Edgio a Azure CDN Premium z Edgio se šíření obvykle dokončí do 90 minut.

Ukázková aplikace má soubor index.html a složky css, img a js, které obsahují další statické prostředky. Cesty k obsahu jsou v koncovém bodu CDN pro všechny tyto soubory stejné. Například obě následující adresy URL slouží k přístupu k souboru bootstrap.css ve složce css:

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

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

Přejděte v prohlížeči na následující adresu URL:

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

Domovská stránka ukázkové aplikace poskytnutá z CDN

Zobrazí se stejná stránka, kterou jste spustili dříve ve webové aplikaci Azure. Služba Azure CDN načetla prostředky původní webové aplikace a poskytuje je z koncového bodu CDN.

Abyste zajistili uložení této stránky v mezipaměti v CDN, aktualizujte stránku. Někdy jsou k uložení požadovaného obsahu do mezipaměti v CDN potřeba dva požadavky na stejný prostředek.

Další informace o vytváření koncových bodů a profilů CDN najdete v tématu Začínáme s Azure CDN.

Vyprázdnění CDN

CDN pravidelně aktualizuje prostředky z původní webové aplikace podle konfigurace hodnoty TTL (Time to Live). Výchozí hodnota TTL je sedm dní.

Čas od času může být nutné aktualizovat CDN před vypršením hodnoty TTL – například při nasazení aktualizovaného obsahu do webové aplikace. Aktualizaci aktivujte ručním vyprázdněním prostředků CDN.

V této části kurzu nasadíte do webové aplikace změnu a vyprázdníte CDN, abyste v CDN aktivovali aktualizaci mezipaměti.

Nasazení změny do webové aplikace

Otevřete soubor index.html a do nadpisu H1 přidejte – V2, jak je znázorněno v následujícím příkladu:

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

Potvrďte změnu a nasaďte ji do webové aplikace.

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

Po dokončení nasazení přejděte na adresu URL webové aplikace, abyste viděli změnu.

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

V2 v nadpisu ve webové aplikaci

Pokud přejdete na adresu URL koncového bodu CDN pro domovskou stránku, změny se nezobrazí, protože verze uložená v mezipaměti v CDN ještě nevypršela.

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

Žádné V2 v nadpisu v CDN

Vyprázdnění CDN na portálu

Pokud chcete v CDN aktivovat aktualizaci verze uložené v mezipaměti, vyprázdněte CDN.

Na levém navigačním panelu portálu vyberte Skupiny prostředků a pak vyberte skupinu prostředků vytvořenou pro vaši webovou aplikaci (myResourceGroup).

Snímek obrazovky s výběrem skupiny prostředků v levém podokně nabídek na portálu

V seznamu prostředků vyberte koncový bod CDN.

Snímek obrazovky koncového bodu Azure CDN ze skupiny prostředků

V horní části stránky Koncový bod vyberte Vyprázdnit.

Snímek obrazovky s tlačítkem vyprázdnění v profilu Azure CDN

Zadejte cesty k obsahu, který chcete vyprázdnit. Můžete předat úplnou cestu k souboru pro vyprázdnění jednotlivých souborů, nebo část cesty pro vyprázdnění a aktualizaci veškerého obsahu ze složky. Vzhledem k tomu, že jste změnili soubor index.html, zkontrolujte, že se nachází v jedné z cest.

V dolní části stránky klikněte na Vyprázdnit.

Snímek obrazovky se stránkou vymazání v profilu Azure CDN

Ověření aktualizace CDN

Počkejte na dokončení zpracování žádosti o vyprázdnění, což obvykle trvá pár minut. Pokud chcete zobrazit aktuální stav, vyberte ikonu zvonku v horní části stránky.

Snímek obrazovky s oznámením o vymazání profilu Azure CDN

Když přejdete na adresu URL koncového bodu CDN pro index.html, zobrazí se na domovské stránce verze V2 , která označuje, že mezipaměť CDN byla aktualizována.

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

V2 v nadpisu v CDN

Další informace najdete v tématu Vyprázdnění koncového bodu Azure CDN.

Správa verzí obsahu pomocí řetězců dotazu

Azure CDN nabízí následující možnosti chování při ukládání do mezipaměti:

  • Ignorovat řetězce dotazů
  • Nepoužívat ukládání do mezipaměti pro řetězce dotazů
  • Ukládat do mezipaměti každou jedinečnou adresu URL

První možnost je výchozí, což znamená, že existuje pouze jedna verze prostředku uložená v mezipaměti bez ohledu na řetězec dotazu v adrese URL.

V této části kurzu změníte chování při ukládání do mezipaměti tak, že se do mezipaměti bude ukládat každá jedinečná adresa URL.

Změna chování mezipaměti

Na webu Azure Portal na stránce Koncový bod CDN vyberte Mezipaměť.

Z rozevíracího seznamu Chování při ukládání řetězců dotazu do mezipaměti vyberte Ukládat do mezipaměti každou jedinečnou adresu URL.

Vyberte Uložit.

Snímek obrazovky s nastavením pravidel mezipaměti pro profil Azure CDN

Ověření samostatného ukládání jedinečných adres URL do mezipaměti

V prohlížeči přejděte na domovskou stránku na koncovém bodu CDN a přidejte řetězec dotazu:

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

Azure CDN vrátí obsah webové aplikace, který obsahuje text V2 v nadpisu.

Abyste zajistili uložení této stránky v mezipaměti v CDN, aktualizujte stránku.

Otevřete soubor index.html, změňte V2 na V3 a pak změnu nasaďte.

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

V prohlížeči přejděte na adresu URL koncového bodu CDN s novým řetězcem dotazu, například q=2. Azure CDN získá aktuální soubor index.html a zobrazí V3. Pokud ale přejdete na koncový bod CDN s řetězcem dotazu q=1, uvidíte V2.

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

V3 v nadpisu v CDN, řetězec dotazu 2

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

V2 v nadpisu v CDN, řetězec dotazu 1

Tento výstup ukazuje, že se každý řetězec dotazu zpracovává jinak:

  • Parametr q=1 se použil dříve, proto se vrátí obsah uložený v mezipaměti (V2).
  • Parametr q=2 je nový, takže se načte a vrátí nejnovější obsah webové aplikace (V3).

Další informace najdete v tématu Řízení chování Azure CDN při ukládání řetězců dotazu do mezipaměti.

Vyčištění prostředků

V předchozích krocích jste vytvořili prostředky Azure ve skupině prostředků. Pokud předpokládáte, že už tyto prostředky nebudete potřebovat, odstraňte skupinu prostředků spuštěním následujícího příkazu ve službě Cloud Shell:

az group delete --name myResourceGroup

Spuštění tohoto příkazu může trvat přibližně minut.

Další kroky

Naučili jste se:

  • Vytvořit koncový bod CDN.
  • Aktualizovat prostředky uložené v mezipaměti.
  • Spravovat verze uložené v mezipaměti pomocí řetězců dotazu.

V následujících článcích se dozvíte, jak optimalizovat výkon sítě CDN:

Kurz: Přidání vlastní domény do koncového bodu Azure CDN