Tutorial: Hinzufügen eines Azure Content Delivery Network zu einer Azure App Service-Web-App

In diesem Tutorial wird veranschaulicht, wie Sie Azure Content Delivery Network einer Web-App in Azure App Service hinzufügen. Web-Apps sind Dienste zum Hosten von Webanwendungen, REST-APIs und mobilen Back-Ends.

Hier ist die Startseite der statischen HTML-Beispielwebsite dargestellt, mit der Sie arbeiten werden:

Lerninhalt:

Voraussetzungen

Für dieses Tutorial benötigen Sie Folgendes:

• Installation von Git
• Installieren der Azure-Befehlszeilenschnittstelle

Sollten Sie über kein Azure-Abonnement verfügen, können Sie zunächst ein kostenloses Azure-Konto erstellen.

Erstellen der Web-App

Folgen Sie zum Erstellen der Web-App, mit der Sie arbeiten, der Anleitung unter Erstellen einer statischen HTML-Web-App in Azure in fünf Minuten bis zum Schritt Navigieren zur App.

Melden Sie sich auf dem Azure-Portal an.

Öffnen Sie einen Browser, und melden Sie sich beim Azure-Portal an.

Optimieren der Beschleunigung dynamischer Websites

Wenn Sie Ihren Content Delivery Network-Endpunkt für die Beschleunigung dynamischer Websites (Dynamic Site Acceleration, DSA) optimieren möchten, sollten Sie Ihr Profil und Ihren Endpunkt über das Content Delivery Network-Portal erstellen. Durch die DSA-Optimierung wird die Leistung von Webseiten mit dynamischen Inhalten merklich verbessert. Wie Sie einen Content Delivery Network-Endpunkt über das Content Delivery Network-Portal für DSA optimieren, erfahren Sie unter Beschleunigung dynamischer Websites durch das Azure Content Delivery Network. Falls Sie Ihren neuen Endpunkt nicht optimieren möchten, können Sie ihn gemäß der Anleitung im nächsten Abschnitt über das Web-App-Portal erstellen. Bei Azure CDN von Edgio-Profilen können Sie nach deren Erstellung die Optimierung eines Content Delivery Network-Endpunkts nicht ändern.

Erstellen eines Content Delivery Network-Profils und -Endpunkts

Wählen Sie im Navigationsbereich auf der linken Seite die Option App Services und dann die App aus, die Sie unter Erstellen einer statischen HTML-Web-App in Azure in fünf Minuten erstellt haben.

Wählen Sie auf der Seite App Service im Abschnitt Einstellungen die Option Netzwerk > Azure CDN aus.

Geben Sie auf der Seite Azure Content Delivery Network die Einstellungen für Neuer Endpunkt gemäß den Angaben in der Tabelle an.

Wählen Sie Erstellen aus, um ein Content Delivery Network-Profile zu erstellen.

Azure erstellt das Profil und den Endpunkt. Der neue Endpunkt wird in der Liste Endpunkte angezeigt. Nach seiner Bereitstellung lautet der Status Wird ausgeführt.

Testen des Content Delivery Network-Endpunkts

Der Endpunkt kann nicht sofort verwendet werden, da die Verteilung der Registrierung über das CDN eine Weile dauern kann:

• Bei Profilen vom Typ Azure CDN Standard von Microsoft (klassisch) ist die Weitergabe in der Regel in zehn Minuten abgeschlossen.
• Bei Profilen vom Typ Azure CDN Standard von Edgio und Azure CDN Premium von Edgio ist die Weitergabe in der Regel innerhalb von 90 Minuten abgeschlossen.

Die Beispiel-App enthält die Datei index.html und die Ordner css, img und js mit anderen statischen Objekten. Die Inhaltspfade für alle diese Dateien sind am Content Delivery Network-Endpunkt identisch. Beispielsweise wird mit beiden folgenden URLs auf die Datei bootstrap.css im Ordner css zugegriffen:

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

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

Navigieren Sie in einem Browser zur folgenden URL:

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

Daraufhin wird die Seite angezeigt, die Sie zuvor in einer Azure-Web-App ausgeführt haben. Das Azure Content Delivery Network hat die Ressourcen der Ursprungsweb-App abgerufen und vom Content Delivery Network-Endpunkt bereitgestellt

Aktualisieren Sie die Seite, um sicherzustellen, dass diese Seite im Content Delivery Network zwischengespeichert wird. Es kann sein, dass für ein Objekt zwei Anforderungen erforderlich sind, damit der angeforderte Inhalt vom Content Delivery Network zwischengespeichert wird.

Weitere Informationen zum Erstellen von Azure Content Delivery Network-Profilen und -Endpunkten finden Sie unter Erste Schritte mit Azure Content Delivery Network.

Content Delivery Network bereinigen

Das Content Delivery Network aktualisiert basierend auf der Gültigkeitsdauer (Time To Live, TTL) in regelmäßigen Abständen seine Ressourcen der ursprünglichen Web-App. Die Standardgültigkeitsdauer ist sieben Tage.

Es kann vorkommen, dass Sie das Content Delivery Network vor Ablauf der Gültigkeitsdauer aktualisieren müssen, z.B. beim Bereitstellen von aktualisiertem Inhalt für die Web-App. Zum Auslösen einer Aktualisierung bereinigen Sie die Content Delivery Network-Ressourcen manuell.

In diesem Abschnitt des Tutorials stellen Sie eine Änderung für die Web-App bereit und bereinigen das Content Delivery Network, um für das Content Delivery Network die Aktualisierung des Caches auszulösen.

Bereitstellen einer Änderung für die Web-App

Öffnen Sie die Datei index.html, und fügen Sie der Überschrift H1 den Zusatz - V2 hinzu. Dies ist im folgenden Beispiel dargestellt:

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

Übernehmen Sie die Änderung, und stellen Sie sie für die Web-App bereit.

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

Navigieren Sie nach Abschluss der Bereitstellung zur Web-App-URL. Die Änderung wird angezeigt.

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

Wenn Sie zur Content Delivery Network-Endpunkt-URL für die Startseite navigieren, werden die Änderungen nicht angezeigt, weil die zwischengespeicherte Version im Content Delivery Network noch nicht abgelaufen ist.

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

Content Delivery Network im Portal bereinigen

Um das Content Delivery Network zum Aktualisieren der zwischengespeicherten Version auszulösen, bereinigen Sie das Content Delivery Network.

Wählen Sie im Navigationsbereich links im Portal die Option Ressourcengruppen und dann die Ressourcengruppe aus, die Sie für Ihre Web-App (myResourceGroup) erstellt haben.

Wählen Sie in der Liste der Ressourcen ihren Content Delivery Network-Endpunkt aus.

Wählen Sie oben auf der Seite Endpunkt die Option Bereinigen aus.

Geben Sie die Inhaltspfade ein, die Sie bereinigen möchten. Sie können einen vollständigen Dateipfad übergeben, um eine einzelne Datei zu bereinigen, oder ein Pfadsegment, um den gesamten Inhalt eines Ordners zu bereinigen und zu aktualisieren. Da Sie index.html geändert haben, stellen Sie sicher, dass sich die Datei unter einem der Pfade befindet.

Wählen Sie am unteren Rand der Seite die Option Bereinigen.

Überprüfen Sie, ob das Content Delivery Network aktualisiert wird

Warten Sie, bis die Verarbeitung der Bereinigungsanforderung abgeschlossen ist. Dies dauert normalerweise einige Minuten. Wählen Sie zum Anzeigen des aktuellen Status oben auf der Seite das Glockensymbol.

Wenn Sie zur Content Delivery Network-Endpunkt-URL für index.html navigieren, sehen Sie den Zusatz V2, den Sie dem Titel auf der Startseite hinzugefügt haben. Dies bedeutet, dass der Content Delivery Network-Cache aktualisiert wurde.

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

Weitere Informationen finden Sie unter Bereinigen eines Azure Content Delivery Network-Endpunkts.

Verwenden von Abfragezeichenfolgen zum Versehen von Inhalt mit einer Version

Azure Content Delivery Network verfügt über die folgenden Optionen für das Zwischenspeicherverhalten:

• Ignorieren von Abfragezeichenfolgen
• Umgehen der Zwischenspeicherung für Abfragezeichenfolgen
• Zwischenspeichern jeder eindeutigen URL

Die erste Option ist die Standardeinstellung. Sie bedeutet, dass es nur eine zwischengespeicherte Version eines Objekts gibt, und zwar unabhängig von der Abfragezeichenfolge in der URL.

In diesem Abschnitt des Tutorials ändern Sie das Zwischenspeicherverhalten, sodass jede eindeutige URL zwischengespeichert wird.

Ändern des Cacheverhaltens

Wählen Sie im Azure-Portal auf der Seite CDN-Endpunkt die Option Cache.

Wählen Sie in der Dropdownliste Verhalten für das Zwischenspeichern von Abfragezeichenfolgen die Option Jede eindeutige URL zwischenspeichern.

Wählen Sie Speichern.

Sicherstellen der separaten Zwischenspeicherung eindeutiger URLs

Navigieren Sie in einem Browser zur Startseite des Content Delivery Network-Endpunkts, und binden Sie dabei eine Abfragezeichenfolge ein:

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

Azure Content Delivery Network gibt den aktuellen Inhalt der Web-App zurück, der in der Überschrift den Zusatz V2 enthält.

Aktualisieren Sie die Seite, um sicherzustellen, dass diese Seite im Content Delivery Network zwischengespeichert wird.

Öffnen Sie index.html, ändern Sie V2 in V3, und stellen Sie dann die Änderung bereit.

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

Navigieren Sie in einem Browser mit einer neuen Abfragezeichenfolge, z.B. q=2, zur Content Delivery Network-Endpunkt-URL. Azure Content Delivery Network ruft die aktuelle Datei index.html ab und zeigt V3 an. Wenn Sie dagegen mit der Abfragezeichenfolge q=1 zum Content Delivery Network-Endpunkt navigieren, wird V2 angezeigt.

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

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

Diese Ausgabe veranschaulicht, dass jede Abfragezeichenfolge anders behandelt wird:

• q=1 wurden zuvor verwendet, weshalb zwischengespeicherte Inhalte zurückgegeben werden (V2).
• q=2 ist neu, weshalb die neuesten Web-App-Inhalte abgerufen und zurückgegeben werden (V3).

Weitere Informationen finden Sie unter Steuern des Zwischenspeicherungsverhaltens des Azure Content Delivery Network mit Abfragezeichenfolgen.

Bereinigen von Ressourcen

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt. Wenn Sie diese Ressourcen in Zukunft nicht mehr benötigen, löschen Sie die Ressourcengruppe, indem Sie den folgenden Befehl in Cloud Shell ausführen:

az group delete --name myResourceGroup

Die Ausführung dieses Befehls kann eine Minute in Anspruch nehmen.

Nächste Schritte

Sie haben Folgendes gelernt:

Die folgenden Artikel enthalten Informationen zur Optimierung der Content Delivery Network-Leistung: