Condividi tramite


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

Importante

Rete CDN di Azure Standard di Microsoft (versione classica) verrà ritirato il 30 settembre 2027. Per evitare interruzioni del servizio, è importante eseguire la migrazione dei profili di Rete CDN di Azure Standard di Microsoft (versione classica) al livello Frontdoor di Azure Standard o Premium entro il 30 settembre 2027. Per altre informazioni, vedere Ritiro di Rete CDN di Azure Standard di Microsoft (versione classica).

Rete CDN di Azure di Edgio verrà ritirato 4 novembre 2025. È necessario eseguire la migrazione del carico di lavoro in Frontdoor di Azure prima di questa data per evitare interruzioni del servizio. Per altre informazioni, vedere Rete CDN di Azure da Domande frequenti sul ritiro di Edgio.

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:

Home page dell'app di esempio

Informazioni ottenute dall'esercitazione:

  • Creare un endpoint della 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 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

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 del Servizio app nel portale.

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

Screenshot di selezione della Rete per la distribuzione di contenuti di Azure 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 della Rete per la distribuzione di contenuti di Azure nel portale.

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.

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 della Rete per la distribuzione di contenuti di Azure nell'elenco.

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

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

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

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.

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 della Rete per la distribuzione di contenuti.

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

Nella parte superiore della pagina Endpoint selezionare Ripulisci.

Screenshot del pulsante Rimuovi 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 Rimuovi 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 rimozione per un profilo di Rete per la distribuzione di contenuti di Azure.

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

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

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

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

Selezionare Memorizza nella cache tutti gli URL univoci nell'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 Rete per la distribuzione di contenuti di Azure.

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

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 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:

  • Creare un endpoint della 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: