Esercitazione: Ospitare un sito Web statico nel BLOB Archiviazione

In questa esercitazione si apprenderà come creare e distribuire un sito Web statico in Archiviazione di Azure. Al termine, sarà presente un sito Web statico cui gli utenti potranno accedere a livello pubblico.

In questa esercitazione apprenderai a:

  • 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 è possibile 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 intestazioni e AuthN/AuthZ è completamente supportato. App Web statiche di Azure fornisce anche un flusso di lavoro di integrazione continua e recapito continuo (CI/CD) completamente gestito dall'origine GitHub alla distribuzione globale.

Questo video illustra come ospitare un sito Web statico nel BLOB Archiviazione.

I passaggi del video sono descritti anche nelle sezioni seguenti.

Prerequisiti

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

L'accesso ad Archiviazione di Azure viene eseguito esclusivamente tramite un account di archiviazione. Per questa guida introduttiva, creare rapidamente 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.

Nota

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 che permette di creare il sito Web statico e di distribuirlo in un account di archiviazione di Azure.

Dopo aver installato Visual Studio Code, installare l'estensione di anteprima Archiviazione di Azure. Questa estensione integra funzionalità di gestione di Archiviazione di Azure con Visual Studio Code. L'estensione verrà usata per distribuire il sito Web statico in Archiviazione di Azure. Per installare l'estensione:

  1. Avviare Visual Studio Code.

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

    Install the Azure Storage extension in VS Code

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, Archiviazione di Azure crea automaticamente un contenitore denominato $web. Il contenitore $web includerà 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 del documento di indice specificare una pagina di indice predefinita denominata index.html. La pagina di indice predefinita viene visualizzata quando un utente passa alla radice del sito Web statico.

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

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

    Enable static website hosting for a storage account

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 dalla finestra di esplorazione.

    Open folder in Visual Studio Code

  3. Creare il file di indice predefinito nella cartella mywebsite e assegnare al file il nome index.html.

    Create the default index file in Visual Studio Code

  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 assegnare al file il nome 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 nella finestra di esplorazione e scegliere Distribuisci in sito Web statico per distribuire il sito Web. Verrà chiesto 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 viene richiesto.

Visual Studio Code caricherà i file nell'endpoint Web e visualizzerà la barra di stato con esito positivo. Avviare il sito Web per visualizzarlo in Azure.

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

Supporto funzionalità

Il supporto per questa funzionalità potrebbe essere influenzato dall'abilitazione del protocollo Data Lake Archiviazione Gen2, NFS (Network File System) 3.0 o del protocollo SFTP (SSH File Transfer Protocol). Se è stata abilitata una di queste funzionalità, vedere Supporto delle funzionalità di Archiviazione BLOB negli account 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.

Nell'esercitazione successiva si vedrà come configurare un dominio personalizzato con il sito Web statico.