Esercitazione: Ospitare un sito Web statico nell'archiviazione BLOB

In questa esercitazione si apprenderà come creare e distribuire un sito Web statico su Azure Storage. Al termine, si avrà un sito Web statico a cui gli utenti possono accedere pubblicamente.

In questa esercitazione si apprenderà come:

• Configurare l'hosting di siti Web statici
• Distribuire un sito Web Hello World

I siti Web statici hanno alcune limitazioni. Ad esempio, se si vogliono configurare le intestazioni, è necessario usare Azure rete per la distribuzione di contenuti (Rete CDN di Azure). Non esiste alcun modo per configurare le intestazioni come parte della funzionalità dei siti Web statici. Inoltre, AuthN e AuthZ non sono supportati.

Se queste funzionalità sono importanti per lo scenario dell’utente, è consigliabile usare App Web statiche di Azure. È un'ottima alternativa ai siti Web statici ed è anche appropriato nei casi in cui non è necessario che un server Web esegua il rendering del contenuto. È possibile configurare le intestazioni e AuthN/AuthZ sono pienamente supportati. Azure Static Web Apps fornisce un flusso di lavoro completamente gestito di integrazione continua e recapito continuo (CI/CD) dalla sorgente GitHub alla distribuzione globale.

Questo video illustra come ospitare un sito web statico su Archiviazione Blob.

I passaggi del video sono descritti anche nelle sezioni seguenti.

Prerequisiti

Per accedere ad Archiviazione Azure, è necessaria una sottoscrizione Azure. Se non si ha già una sottoscrizione, creare un account gratuito prima di iniziare.

Tutto l'accesso a Azure Storage avviene tramite un account di archiviazione Azure. Per questa guida introduttiva, creare un account di archiviazione usando il portale di Azure, Azure PowerShell o l'interfaccia della riga di comando di Azure. Per informazioni sulla creazione di un account di archiviazione, vedere Creare un account di archiviazione.

Annotazioni

I siti Web statici sono ora disponibili per gli account di archiviazione Standard per utilizzo generico v2 e per gli account di archiviazione con spazio dei nomi gerarchico abilitato.

Questa esercitazione usa Visual Studio Code, uno strumento gratuito per i programmatori, per compilare il sito Web statico e distribuirlo in un account di archiviazione di Azure.

Dopo aver installato Visual Studio Code, installare l'estensione di Azure Storage in anteprima. Questa estensione integra la funzionalità di gestione di Archiviazione di Azure con Visual Studio Code. Utilizzerai l'estensione per distribuire il sito web statico in Azure Storage. Per installare l'estensione:

1. Avvia Visual Studio Code.

2. Sulla barra degli strumenti fare clic su Estensioni. Cercare Archiviazione di Azure e selezionare l'estensione Archiviazione di Azure dall'elenco. Fare quindi clic sul pulsante Installa per installare l'estensione.

   

Configurare l'hosting di siti Web statici

Il primo passaggio consiste nel configurare l'account di archiviazione per ospitare un sito Web statico nel portale di Azure. Quando si configura l'account per l'hosting di siti Web statici, Azure Storage crea automaticamente un contenitore denominato $web. Il contenitore $web conterrà i file per il sito Web statico.

1. Accedere al portale di Azure nel Web browser.

2. Individuare l'account di archiviazione e visualizzare la sezione della panoramica dell'account.

3. Selezionare Sito Web statico per visualizzare la pagina di configurazione per i siti Web statici.

4. Selezionare Abilitato per abilitare l'hosting di siti Web statici per l'account di archiviazione.

5. Nel campo Nome documento indice specificare una pagina di indice predefinita di index.html. La pagina di indice predefinita viene visualizzata quando un utente passa alla radice del sito Web statico.

6. Nel campo Percorso documento errore specificare una pagina di errore predefinita di 404.html. La pagina di errore predefinita viene visualizzata quando un utente tenta di passare a una pagina che non esiste nel sito Web statico.

7. Fare clic su Salva. Il portale di Azure visualizza ora l'endpoint del sito Web statico.

   

Distribuire un sito Web Hello World

Creare quindi una pagina Web Hello World con Visual Studio Code e distribuirla nel sito Web statico ospitato nell'account di archiviazione di Azure.

1. Creare una cartella vuota denominata mywebsite nel file system locale.

2. Avviare Visual Studio Code e aprire la cartella appena creata dal pannello Esplora risorse .

   

3. Creare il file di indice predefinito nella cartella mywebsite e denominarlo index.html.

   

4. Aprire index.html nell'editor, incollare il testo seguente nel file e salvarlo:

   <!DOCTYPE html>
   <html>
     <body>
       <h1>Hello World!</h1>
     </body>
   </html>
   

5. Creare il file di errore predefinito e denominarlo 404.html.

6. Aprire 404.html nell'editor, incollare il testo seguente nel file e salvarlo:

   <!DOCTYPE html>
   <html>
     <body>
       <h1>404</h1>
     </body>
   </html>
   

7. Fare clic con il pulsante destro del mouse nella cartella mywebsite nel pannello Explorer e scegliere Distribuisci nel sito Web statico per distribuire il sito Web. Verrà richiesto di accedere ad Azure per recuperare un elenco di sottoscrizioni.

8. Selezionare la sottoscrizione contenente l'account di archiviazione per cui è stato abilitato l'hosting di siti Web statici. Selezionare quindi l'account di archiviazione quando richiesto.

Visual Studio Code caricherà ora i file nell'endpoint Web e mostrerà la barra di stato di operazione riuscita. Avviare il sito Web per visualizzarlo in Azure.

L'esercitazione è stata completata ed è stato distribuito un sito Web statico in Azure.

Supporto delle funzionalità

Il supporto di questa funzionalità potrebbe essere influenzato dall'abilitazione dei protocolli Data Lake Storage Gen2, NFS (Network File System) 3.0 o SFTP (SSH File Transfer Protocol). Se è stata abilitata una di queste funzionalità, vedere Supporto delle funzionalità di Archiviazione del BLOB negli account di Archiviazione di Azure per valutare il supporto per questa funzionalità.

Passaggi successivi

In questa esercitazione si è appreso come configurare l'account di archiviazione di Azure per l'hosting di siti Web statici e come creare e distribuire un sito Web statico in un endpoint di Azure.

Impara come configurare un dominio personalizzato per il tuo sito web statico.

Eseguire il mapping di un dominio personalizzato a un endpoint di Archiviazione BLOB di Azure