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:

Home page dell'app di esempio

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.

Screenshot della selezione di un'app servizio app nel portale.

Nella sezione Impostazioni della pagina servizio app selezionare Rete > Rete CDN di Azure.

Screenshot della selezione di Azure rete per la distribuzione di contenuti dall'impostazione di rete di un servizio app.

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

Screenshot della creazione del profilo e dell'endpoint di Azure rete per la distribuzione di contenuti nel portale.

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.

Screenshot del nuovo endpoint rete per la distribuzione di contenuti di Azure nell'elenco.

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

Screenshot della home page dell'app di esempio fornita dalla rete per la distribuzione di contenuti.

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

Screenshot di No V2 nel titolo nella rete per la distribuzione di contenuti.

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

Screenshot della selezione del gruppo di risorse nel riquadro del menu a sinistra nel portale.

Nell'elenco delle risorse selezionare l'endpoint di rete per la distribuzione di contenuti.

Screenshot dell'endpoint rete per la distribuzione di contenuti di Azure dal gruppo di risorse.

Nella parte superiore della pagina Endpoint selezionare Ripulisci.

Screenshot del pulsante ripulitura in un profilo di rete per la distribuzione di contenuti di Azure.

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.

Screenshot della pagina di ripulitura in un profilo di rete per la distribuzione di contenuti di Azure.

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.

Screenshot della notifica di ripulitura per un profilo di rete per la distribuzione di contenuti di Azure.

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

Screenshot della versione 2 nel titolo nella rete per la distribuzione di contenuti.

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.

Screenshot delle impostazioni delle regole della cache per un profilo di azure rete per la distribuzione di contenuti.

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

Screenshot della versione 3 nel titolo nella rete per la distribuzione di contenuti, stringa di query 2.

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

Screenshot della versione 2 nel titolo nella rete per la distribuzione di contenuti, stringa di query 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: