Esercitazione: Aggiungere rete per la distribuzione di contenuti di Azure a un'app Web del servizio app Azure
Questa esercitazione illustra come aggiungere azure rete per la distribuzione di contenuti a un'app Web nel servizio app Azure. Le app Web sono servizi per l'hosting di applicazioni Web, API REST e back-end per dispositivi mobili.
Ecco la home page del sito HTML statico di esempio con cui si lavora:
Cosa si apprende:
- Creare un endpoint di rete per la distribuzione di contenuti.
- Aggiornare gli asset memorizzati nella cache.
- Usare stringhe di query per controllare le versioni memorizzate nella cache.
Prerequisiti
Per completare questa esercitazione:
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 con cui si lavora, seguire la guida introduttiva per HTML statico tramite il passaggio Sfoglia all'app.
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 di rete per la distribuzione di contenuti per l'accelerazione del sito dinamico , è 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 endpoint di rete per la distribuzione di contenuti per DSA dal portale di rete per la distribuzione di contenuti, vedere Configurazione dell'endpoint di 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 Rete CDN di Azure dai profili Edgio, non è possibile modificare l'ottimizzazione di un endpoint di rete per la distribuzione di contenuti dopo la creazione.
Creare un profilo e un endpoint di rete per la distribuzione di contenuti
Nel riquadro di spostamento a sinistra selezionare Servizi app e quindi l'app creata nella guida introduttiva per siti HTML statici.
Nella sezione Impostazioni della pagina servizio app selezionare Rete > Rete CDN di Azure.
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 di rete per la distribuzione di contenuti | myCDNProfile | Un profilo di rete per la distribuzione di contenuti è una raccolta di endpoint di 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 di 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. |
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 di rete per la distribuzione di contenuti
Dato che la propagazione della registrazione richiede tempo, l'endpoint non è immediatamente disponibile per l'uso:
- Per Rete CDN di Azure profili Standard di Microsoft (versione classica), la propagazione viene in genere completata in 10 minuti.
- Per Rete CDN di Azure Standard di Edgio e Rete CDN di Azure Premium dai profili Edgio, la propagazione 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 di 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. Azure rete per la distribuzione di contenuti ha recuperato gli asset dell'app Web di origine e li sta servendo dall'endpoint di 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. Due richieste per lo stesso asset sono talvolta necessarie per la rete per la distribuzione di contenuti per memorizzare nella cache il contenuto richiesto.
Per altre informazioni sulla creazione di profili ed endpoint rete per la distribuzione di contenuti di Azure, vedere Introduzione ad Azure rete per la distribuzione di contenuti.
Ripulire la rete per la distribuzione di contenuti
La rete per la distribuzione di contenuti aggiorna periodicamente le relative risorse dall'app Web di origine in base alla configurazione TTL (Time to Live). La durata predefinita è di sette giorni.
A volte potrebbe essere necessario aggiornare la rete per la distribuzione di contenuti prima della scadenza del TTL; ad esempio, quando si distribuisce contenuto aggiornato nell'app Web. Per attivare un aggiornamento, eliminare manualmente le risorse di rete per la distribuzione di contenuti.
In questa sezione dell'esercitazione si distribuisce una modifica all'app Web e si elimina 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 di 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
Ripulire 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, eliminare la rete per la distribuzione di contenuti.
Nel riquadro di spostamento a sinistra nel portale selezionare Gruppi di risorse e quindi il gruppo di risorse creato per l'app Web (myResourceGroup).
Nell'elenco delle risorse selezionare l'endpoint di rete per la distribuzione di contenuti.
Nella parte superiore della pagina Endpoint selezionare Ripulisci.
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'endpoint di 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 Ripulire un endpoint di Azure rete per la distribuzione di contenuti.
Usare le stringhe di query per il controllo delle versioni del contenuto
Azure rete per la distribuzione di contenuti 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 opzione è l'impostazione predefinita, ovvero esiste una sola versione memorizzata nella cache di un asset 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
Nella pagina Endpoint rete CDN del portale di Azure selezionare Cache.
Selezionare Memorizza nella cache ogni URL univoco dall'elenco a discesa Comportamento di memorizzazione nella cache della stringa di query.
Seleziona Salva.
Verificare che gli URL univoci vengano memorizzati nella cache separatamente
In un browser passare alla home page nell'endpoint di rete per la distribuzione di contenuti e includere una stringa di query:
http://<endpointname>.azureedge.net/index.html?q=1
Azure rete per la distribuzione di contenuti 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 passare all'URL dell'endpoint di rete per la distribuzione di contenuti con una nuova stringa di query, ad esempio q=2
. Azure rete per la distribuzione di contenuti ottiene il file di index.html corrente e visualizza V3. Tuttavia, se si passa all'endpoint di rete per la distribuzione di contenuti con la q=1
stringa di query, 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 di Azure rete per la distribuzione di contenuti 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:
- Creare un endpoint di rete per la distribuzione di contenuti.
- Aggiornare gli asset memorizzati nella cache.
- Usare stringhe di query per controllare le versioni memorizzate nella cache.
Informazioni su come ottimizzare le prestazioni della rete per la distribuzione di contenuti negli articoli seguenti: