Esercitazione: Aggiungere la Rete per la distribuzione di contenuti di Azure a un'app Web del Servizio app di Azure

Questa esercitazione illustra come aggiungere la Rete per la distribuzione di contenuti di Azure a un'app Web nel Servizio app di Azure. Le app Web sono servizi per l'hosting di applicazioni Web, API REST e back-end mobili.

Di seguito è riportata la home page del sito HTML statico di esempio che viene usato:

Informazioni ottenute dall'esercitazione:

Prerequisiti

Per completare questa esercitazione:

• Installare Git
• Installare l'interfaccia della riga di comando di Azure

Se non si ha una sottoscrizione di Azure, creare un account Azure gratuito prima di iniziare.

Creare l'app Web

Per creare l'app Web che viene usata, seguire le istruzioni riportate nella guida introduttiva per siti HTML statici fino al passaggio Pulire le risorse.

Accedere al portale di Azure

Aprire un browser e accedere al portale di Azure.

Ottimizzazione dell'accelerazione sito dinamico

Se si vuole ottimizzare l'endpoint della Rete per la distribuzione di contenuti per l'accelerazione del sito dinamico (DSA), è consigliabile usare il portale di Rete per la distribuzione di contenuti per creare il profilo e l'endpoint. L'ottimizzazione DSA migliora in modo misurabile le prestazioni delle pagine Web con contenuto dinamico. Per istruzioni su come ottimizzare un enpoint della Rete per la distribuzione di contenuti per DSA dal portale di rete per la distribuzione di contenuti, vedere Configurazione dell'enpoint della Rete per la distribuzione di contenuti per accelerare la distribuzione di file dinamici. In caso contrario, se non si vuole ottimizzare il nuovo endpoint, è possibile usare il portale dell'app Web per crearlo seguendo i passaggi descritti nella sezione successiva. Per i profili Rete CDN di Azure da Edgio, non è possibile modificare l'ottimizzazione di un enpoint della Rete per la distribuzione di contenuti dopo la sua creazione.

Creare un profilo e un endpoint della Rete per la distribuzione di contenuti

1. Nel riquadro di spostamento a sinistra selezionare Servizi app e quindi l'app creata nella guida introduttiva per siti HTML statici.

   

2. Nella pagina Servizio app all'interno della sezione Impostazioni, selezionare Networking> Rete CDN di Azure.

   

3. Nella pagina Rete per la distribuzione di contenuti di Azure specificare le impostazioni in Nuovo endpoint come indicato nella tabella.

   

   Impostazione	Valore suggerito	Descrizione
   Profilo della Rete per la distribuzione dei contenuti	myCDNProfile	Un profilo di Rete per la distribuzione di contenuti è una raccolta di enpoint della Rete per la distribuzione di contenuti con lo stesso piano tariffario.
   Piano tariffario	Rete per la distribuzione di contenuti Microsoft (versione classica)	Il piano tariffario specifica il provider e le funzionalità disponibili.
   Nome dell'endpoint della rete per la distribuzione di contenuti	Qualsiasi nome univoco nel dominio azureedge.net	Si accede alle risorse memorizzate nella cache nel dominio <nomeendpoint>.azureedge.net.

4. Selezionare Crea per creare un profilo di Rete per la distribuzione di contenuti. Azure crea il profilo e l'endpoint. Il nuovo endpoint viene visualizzato nell'elenco Endpoint e al termine del relativo provisioning lo stato è In esecuzione.

   

Testare l'endpoint della Rete per la distribuzione di contenuti

Dato che la propagazione della registrazione richiede tempo, l'endpoint non è immediatamente disponibile per l'uso:

• La propagazione dei profili della Rete CDN Standard di Azure con tecnologia Microsoft (versione classica) viene in genere completata in 10 minuti.
• La propagazione dei profili della Rete CDN Standard di Azure con tecnologia Edgio e della rete CDN Premium di Azure con tecnologia Edgio viene in genere completata entro 90 minuti.

L'app di esempio include un file index.html e le cartelle css, img e js che contengono altri asset statici. I percorsi di contenuto per tutti questi file sono gli stessi nell'endpoint della Rete per la distribuzione di contenuti. Entrambi gli URL seguenti, ad esempio, accedono al file bootstrap.css nella cartella css:

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

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

Usare un browser per passare all'URL seguente:

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

Viene visualizzata la stessa pagina eseguita in precedenza in un'app Web di Azure. La Rete per la distribuzione di contenuti di Azure ha recuperato gli asset dell'app Web di origine e li sta servendo dall'endpoint della Rete per la distribuzione di contenuti

Per assicurarsi che questa pagina sia memorizzata nella cache nella Rete per la distribuzione di contenuti, aggiornare la pagina. Affinché la Rete per la distribuzione di contenuti memorizzi nella cache il contenuto richiesto sono talvolta necessarie due richieste dello stesso asset.

Per altre informazioni sulla creazione di profili e endpoint della Rete per la distribuzione di contenuti di Azure, vedere Introduzione alla rete per la distribuzione di contenuti di Azure.

Ripulire la Rete per la distribuzione di contenuti

La Rete per la distribuzione di contenuti aggiorna periodicamente le proprie risorse dall'app Web di origine in base alla configurazione della durata (TTL). La durata predefinita è di sette giorni.

Potrebbe essere talvolta necessario aggiornare la Rete per la distribuzione dei contenuti prima della scadenza del valore TTL, ad esempio quando si distribuisce contenuto aggiornato nell'app Web. Per attivare un aggiornamento, rimuovere manualmente le risorse della Rete per la distribuzione di contenuti.

In questa sezione dell'esercitazione si distribuisce una modifica all'app Web e si rimuove la Rete per la distribuzione di contenuti per attivare la Rete per la distribuzione di contenuti per aggiornare la cache.

Distribuire una modifica nell'app Web

Aprire il file index.html e aggiungere - V2 all'intestazione H1 come illustrato nell'esempio seguente:

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

Eseguire il commit della modifica e distribuirla nell'app Web.

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

Al termine della distribuzione, passare all'URL dell'app Web per visualizzare la modifica.

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

Se si passa all'URL dell'endpoint della Rete per la distribuzione di contenuti per la home page, non vengono visualizzate le modifiche perché la versione memorizzata nella cache nella Rete per la distribuzione di contenuti non è ancora scaduta.

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

Rimuovere la Rete per la distribuzione di contenuti nel portale

Per attivare la Rete per la distribuzione di contenuti per aggiornare la versione memorizzata nella cache, rimuovere la Rete per la distribuzione di contenuti.

1. Nel riquadro di spostamento a sinistra nel portale selezionare Gruppi di risorse e quindi il gruppo di risorse creato per l'app Web (myResourceGroup).

   

2. Nell'elenco delle risorse selezionare l'endpoint della Rete per la distribuzione di contenuti.

   

3. Nella parte superiore della pagina Endpoint selezionare Ripulisci.

   

4. Immettere i percorsi del contenuto che si vuole ripulire. È possibile passare un percorso file completo per ripulire un singolo file oppure un segmento di percorso per ripulire e aggiornare tutto il contenuto in una cartella. Poiché è stato modificato index.html, assicurarsi che si trovi in uno dei percorsi. Nella parte inferiore della pagina selezionare Ripulisci.

   

Verificare che la Rete per la distribuzione di contenuti sia aggiornata

Attendere il completamento dell'elaborazione della richiesta di ripulitura, che in genere richiede qualche minuto. Per visualizzare lo stato corrente, selezionare l'icona a forma di campana nella parte superiore della pagina.

Quando si passa all'URL dell'enpoint della Rete per la distribuzione di contenuti per index.html, viene visualizzato il valore V2 aggiunto al titolo nella home page, che indica che la cache della Rete per la distribuzione di contenuti è stata aggiornata.

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

Per altre informazioni, vedere Rimuovere un endpoint della Rete per la distribuzione di contenuti di Azure.

Usare le stringhe di query per il controllo delle versioni del contenuto

La Rete per la distribuzione di contenuti di Azure offre le opzioni di comportamento di memorizzazione nella cache seguenti:

• Ignora stringhe di query
• Disabilita la memorizzazione nella cache per le stringhe di query
• Memorizza nella cache tutti gli URL univoci

La prima è l'opzione predefinita, ovvero esiste una sola versione di un asset memorizzata nella cache indipendentemente dalla stringa di query nell'URL.

In questa sezione dell'esercitazione si modificherà il comportamento per memorizzare nella cache tutti gli URL univoci.

Modificare il comportamento della cache

1. Nella pagina Endpoint rete CDN del portale di Azure selezionare Cache.

2. Selezionare Memorizza nella cache tutti gli URL univoci nell'elenco a discesa Comportamento di memorizzazione nella cache della stringa di query.

3. Seleziona Salva.

   

Verificare che gli URL univoci vengano memorizzati nella cache separatamente

In un browser andare alla home page nell'endpoint della Rete per la distribuzione di contenuti e includere una stringa di query:

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

La rete per la distribuzione di contenuti di Azure restituisce il contenuto corrente dell'app Web, che include V2 nell'intestazione.

Per assicurarsi che questa pagina sia memorizzata nella cache nella Rete per la distribuzione di contenuti, aggiornare la pagina.

Aprire index.html, modificare V2 in V3 e quindi distribuire la modifica.

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

In un browser andare all'URL dell'enpoint della Rete per la distribuzione di contenuti con una nuova stringa di query, ad esempio q=2. La Rete per la distribuzione di contenuti di Azure ottiene il file index.html corrente e visualizza V3. Tuttavia, se si passa all'enpoint della Rete per la distribuzione di contenuti con la stringa di queryq=1, viene visualizzato V2.

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

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

Questo output mostra che ogni stringa di query viene trattata in modo diverso:

• Poiché q=1 è stata usata in precedenza, vengono restituiti i contenuti memorizzati nella cache (V2).
• Poiché q=2 non è mai stata usata, vengono recuperati e restituiti i contenuti dell'app Web più recenti (V3).

Per altre informazioni, vedere Controllare il comportamento di memorizzazione nella cache della Rete per la distribuzione di contenuti di Azure con stringhe di query.

Pulire le risorse

Nei passaggi precedenti sono state create risorse di Azure in un gruppo di risorse. Se si ritiene che queste risorse non saranno necessarie in futuro, eliminare il gruppo di risorse eseguendo questo comando in Cloud Shell:

az group delete --name myResourceGroup

L'esecuzione del comando può richiedere un minuto.

Passaggi successivi

Contenuto dell'esercitazione:

Informazioni su come ottimizzare le prestazioni della Rete per la distribuzione di contenuti negli articoli seguenti: