Posted on

Creare un sito web statico su Microsoft Azure

Azure offre numerosi web server : .net, asp.net, php, node.

Ma se dovete semplicemente creare una pagina web statica ? Vediamo cosa possiamo fare con Azure.

Il nostro obbiettivo è creare una pagina web statica per il sito www.miosito.com.

La creazione di un sito web statico su Azure si fa attraverso l’account di archiviazione, in particolare con la tipologia Blob.

Creare un account di archiviazione

Il primo passo consiste nel collegarvi alla vostra sottoscrizione Azure e creare un nuovo account di archiviazione.Createlo di tipo Storage V2. Avrete quindi un nuovo Account di archiviazione con il nome, per esempio “mystoragemiosito”.

Creare il sito web statico

Nell’account di archiviazione che avete creato, nella sezione Impostazioni, spingete su “Sito Web Statico”.

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

Nel campo Nome del documento di indice specificare una pagina di indice predefinita denominata index.html.

Nel campo Percorso del documento di errore specificare una pagina di errore predefinita denominata 404.html (opzionale)

Salvando vi viene proposto l’indirizzo web del vostro sito web statico, qualcosa del tipo :

https://mystoragemiosito.z22.web.core.windows.net/

Create la vostra pagina web index.html con un qualsiasi editor.

Sempre nell’account di archiviazione, spostatevi nella sezione BLOB. L’operazione precedente, cioè la creazione del sito web statico sul Blob, ha creato in automatico il contenitore $web. Entrate dentro il contenitore e caricate il file index.html (pulsante “Carica” in alto).

Ora provate a vedere se tutto funziona : visualizzate l’indirizzo https://mystoragemiosito.z22.web.core.windows.net/ nel vostro browser; vedrete il file index.html.

Creare il collegamento con il sito web esterno (endpoint)

Rimaniamo nella pagina dell’account di Archiviazione. Selezionate “Rete CDN di Azure”. Create un nuovo endpoint.

  • Selezionare come piano tariffario “Akamai standard” (consigliato da microsoft).
  • Come nome Endpoint inserite quello che volete (nel nostro esempio mettiamo miosito).
  • Come nome di host di origine (cancellate quello che vi viene proposto) dovete mettere, l’indirizzo della cartella del blob in cui è il sito web (senza http o https).In pratica è l’indirizzo che prima avete provato con il browser : nel nostro caso “mystoragemiosito.z22.web.core.windows.net”.

Una volta creato il cdn (ci vuole un po di tempo) vi troverete un nuovo indirizzo per poter vedere la vostra pagina index.html: https://miosito.azureedge.net.

Provate anche questo indirizzo con il vostro browser per vedere la pagina index.html

Dentro l’archiviazione da cui siamo partiti per creare la cdn, non vi troverete più la cdn creata e il relativo endpoint : trovate tutto nelle risorse di Azure. Selezionate l’endpoint; nella sezione impostazioni selezionate “Origine”. Se avete fato tutto bene, l’endpoint di tipo “origine personalizzata” (“custom origin”). Il nome host dell’origine dell’archiviazione e l’intestazione dell’origine dell’archiviazione saranno uguali e saranno il nostro sito web sul blob.

Ora dovete fare in modo che il vostro sito web, www.miosito.com, punti a questo endpoint di azure. Per prima cosa dovete lavorare sul DNS nel pannello di controllo di gestione del vostro sito web. Dovete inserire un record di tipo CNAME con nome www che punta a miosito.azureedge.net.

In Azure, cercate nelle risorse il vostro endpoint e spingete sul pulsante per aggiungere il dominio personalizzato :

  • Nome host dell’endpoint : vi viene proposto quello dell’endpoint :  miosito.azureedge.net
  • Nome host personalizzato mettete il vostro indirizzo web. Nel nostro caso www.miosito.com

Fatto questo, dopo un pò di tempo vi si attiverà l’HTTPS.

Ora potete finalmente provare il vostro sito web, digitando nel browser https://www.miosito.com. Vedrete la solita pagina index.html

Attivare HTTP

Se avete seguito il percorso fino a qui forse avete provato che, scrivendo http://www.miosito.com , invece che https, ho un errore. Questo perché l’account di archiviazione di Azure, nasce con il “trasferimento sicuro obbligatorio” attivato. Andate quindi nel vostro account di archiviazione, nella sezione Impostazioni, selezionate “Configurazione”. Nella pagina dovrete disabilitare il “trasferimento sicuro obbligatorio” e salvare. Ora funzionerà anche http://www.miosito.com

Problemi di cache

Questo sistema ha un problema. Se aggiornate la pagina index.html, e visualizzate sul browser l’endpoint di azure oppure il vostro indirizzo esterno, vedrete il contenuto della vecchia pagina index.html. La pagina sarà invece visualizzata nel sua nuova versione se richiamate sul browser il percorso dell’account ai archiviazione web del Blob.

Per ovviare a questo problema ci sono 2 modi. Il primo modo è quello di ripulire la cache dell’endpoint dalla risorsa. Per farlo, nell’endpoint c’è un pulsante “Ripulisci” : questo pulsante vi chiede esattamente la pagina (o la risorsa, immagine,..) che volete “ripulire” e quindi aggiornare.

Un altro modo è fare un aggiornamento delle risorsa cambiandole nome. Nel nostro caso, la mi pagina principale è index.html; carico nel contenitore $web del mio blob una pagina index2.html con il contenuto modificato; vado nella gestione del sito web del blob e modifico la pagina base in index2.html.


Per approfondire

  • Ospitare un sito web statico in archiviazione di Azure : https://docs.microsoft.com/it-it/azure/storage/blobs/storage-blob-static-website-how-to
  • Usare la rete CDN di Azure per abilitare un dominio personalizzato con SSL per un sito Web statico : https://docs.microsoft.com/it-it/azure/storage/blobs/storage-blob-static-website-custom-domain
  • Configurare HTTPS in un dominio personalizzato della rete CDN di Azure : https://docs.microsoft.com/it-it/azure/cdn/cdn-custom-ssl?tabs=option-1-default-enable-https-with-a-cdn-managed-certificate
  • The account being accessed does not support http.with blob sas url in Azure : https://www.itexperience.net/2019/04/20/the-account-being-accessed-does-not-support-http-with-blob-sas-url-in-azure/