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

V tomto kurzu se naučíte přidat službu Azure Content Delivery Network (CDN) do webové aplikace Azure App Service. Web Apps je služba 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 v HTML, se kterým budete pracovat:

Naučíte se:

Požadavky

Pro absolvování tohoto kurzu potřebujete:

• Nainstalovat Git.
• Instalace Azure CLI

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

Vytvoření webové aplikace

Při vytváření webové aplikace, se kterou budete pracovat, postupujte podle rychlého úvodu ke statickému HTML až do kroku Přechod do aplikace.

Přihlášení k webu Azure Portal

Otevřete prohlížeč a přejděte na web 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 od Verizonu nemůžete změnit optimalizaci vytvořeného 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.

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

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

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.

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 od Verizonu a Azure CDN Premium od Verizonu je šíření obvykle hotové během 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

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

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

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

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).

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

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

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.

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.

Když přejdete na adresu URL koncového bodu CDN pro soubor index.html, uvidíte řetězec V2, který jste přidali do nadpisu na domovské stránce. Ten označuje, že se mezipaměť CDN aktualizovala.

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

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

Výchozí je první z těchto možností, to znamená, že existuje pouze jedna verze prostředku uložená do 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.

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

http://<endpointname>.azureedge.net/index.html?q=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:

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