Immaginiamo di avere a disposizione una webapp in Angular e di volerla mettere online: come fare, spendendo meno di dieci euro l’anno?

Vediamo com’è possibile avere un hosting con S3 e Route 53 per Angular!

Requisiti:

• Un dominio;
• Una webapp in Angular (o anche React.js, Vue.js o Ionic);
• Un account su AWS

Build del progetto

Per questo esempio, andremo ad utilizzare un template che troviamo sul repository https://github.com/creativetimofficial/now-ui-kit-angular e che offre una webapp con diverse dashboard che possono fungere da gestionale per diversi scopi.

Per poter utilizzare questo progetto all’interno del nostro bucket, ossia il contenitore del servizio S3 di Amazon che ospiterà il nostro sito, abbiamo bisogno di creare una versione di distribuzione dell’applicazione.

Andiamo quindi ad eseguire il comando ng build all’interno del progetto e prendiamo come riferimento la cartella dist/ che verrà creata al termine dell’esecuzione di questo comando.

Generazione della versione di distribuzione per Angular

Il contenuto della cartella dist/ è proprio quello che ci serve. Teniamo aperta questa scheda e proseguiamo!

Cartella dist/

Configurazione del bucket con S3

A questo punto, andiamo a creare il bucket che ospiterà la nostra webapp: tramite la barra di ricerca, cerchiamo il servizio S3 e clicchiamo sul pulsante “Crea Bucket”:

Creazione bucket su S3

Come prima cosa, inseriamo il nome del bucket. In questo caso, lo chiameremo esattamente come il dominio che dovremo andare a configurare, per esempio mymanagement.it. Lasciamo la regione impostata sul territorio europeo e proseguiamo.

Nella sezione successiva, ci viene dettagliato il funzionamento del blocco degli accessi al bucket: chiaramente, questo blocco verrà rimosso nel momento in cui il nostro sito andrà online, ma per il momento lasciamolo attivo finché la configurazione non è ultimata.

Molto utile è il versionamento del bucket: ci permette di tenere in canna le diverse versioni di ciò che andremo a caricare al suo interno, per poter eventualmente tornare indietro se qualcosa andasse storto.

Versionamento del bucket

Clicchiamo su “Crea bucket” in fondo e proseguiamo.

Fatto questo, ci verrà mostrato il riepilogo dei bucket: clicchiamo su quello appena creato ed entriamo al suo interno.

Riepilogo del bucket

Al momento il bucket è vuoto: lo andremo infatti a riempire con i file prodotti dalla build effettuata allo step precedente. Clicchiamo quindi su “Carica” e teniamo aperta la cartella che contiene tutti i file della webapp.

Contenuto del bucket

Caricamento oggetti nel bucket

Trasciniamo tutti gli oggetti contenuti nella cartella dist del progetto all’interno della schermata della console di AWS e attendiamo il caricamento.

Riepilogo dei file che verranno caricati

A questo punto, possiamo cliccare su “Carica” in fondo alla pagina e attendere il caricamento di tutti i file all’interno del bucket.

Una volta terminato, clicchiamo sul pulsante “Chiudi” in altro a destra e verremo riportati all’interno del bucket, dove potremo vedere tutto il contenuto della cartella dist/ riportato all’interno del bucket.

Configurazione dell’hosting per siti statici

A questo punto, è necessario verificare che tutto stia funzionando correttamente, prima di collegare il nostro dominio: infatti, dobbiamo attivare la funzionalità di hosting e verificare che il sito sia visibile correttamente.

Per farlo, clicchiamo su “Proprietà” in alto e andiamo nella sezione “Hosting di siti web statici”, che al momento è disabilitato. Clicchiamo su “Modifica” e poi selezioniamo “Attiva”.

In questo caso, le configurazioni di default sono sufficienti, quindi clicchiamo su “Salva le modifiche” e andiamo avanti!

Configurazione dell’hosting per siti statici

Fatto questo, verremo reindirizzati sulla pagina delle proprietà del bucket, e scorrendo verso il basso, vedremo che è stato creato un endpoint per la nostra webapp: se ci clicchiamo sopra, potremo visualizzare il nostro sito sfruttando AWS…

Errore di permessi

Cos’è successo? Abbiamo ancora attivo il blocco dell’accesso pubblico: andiamo quindi sul tab “Autorizzazioni” e clicchiamo su “Modifica” nella sezione dedicata al blocco.

A questo punto, deselezioniamo l’opzione principale e clicchiamo su “Salva le modifiche”:

Configurazione dell’accesso al bucket

Non basta: infatti, i nostri file non sono stati ancora resi “pubblici”. Per farlo, clicchiamo sul tab “oggetti” e selezioniamo tutti gli oggetti presenti all’interno del bucket. Clicchiamo poi su “Operazioni” e selezioniamo “Rendi pubblico”.

Conferma della configurazione dell’accesso

Torniamo quindi all’endpoint di prima e aggiorniamo la pagina: finalmente la nostra webapp è online!

Homepage della webapp Angular

Questa è la situazione ideale se abbiamo bisogno di mostrare a qualcuno il lavoro fatto in maniera facile e veloce. Se hai a disposizione un account gratuito di AWS, hai a disposizione 5GB di spazio per ospitare il tuo sito gratuitamente per 12 mesi.

E se volessimo associare un dominio al nostro bucket? Vai col prossimo step!

Configurazione di Route 53

Nella barra di ricerca dei servizi, cerchiamo Route 53. Questo servizio ci permetterà di collegare il dominio a nostra disposizione con il bucket di S3 che ospita il nostro sito.

Creiamo una cosiddetta “zona ospitata” cliccando su “Crea” e inseriamo tutte le informazioni richieste: in questo caso, la zona ci permette di definire la configurazione di come AWS dovrà gestire le richieste in arrivo per il nostro dominio.

Creazione della zona tramite Route 53

Una volta cliccato su “Crea” in fondo, vedremo il riepilogo della zona: vengono creati di default due record, ossia un NS e un SOA. Nel primo caso, abbiamo un Name Server, ossia la definizione di quei server che comunicheranno le informazioni relative ai DNS per gestire il traffico in arrivo.

Nel caso del record SOA, abbiamo al suo interno tutte le informazioni che riguardano la zona DNS, come il server principale, l’email dell’amministratore di sistema, e via dicendo. Si tratta infatti di tutte le informazioni di base del dominio.

Record presenti di default nella zona alla creazione

Questi due record non devono essere modificati per nessun motivo, anzi: il record NS ci sarà molto utile perché, a seconda di dove avremo registrato il nostro dominio, dovremo andare a specificare i diversi DNS riportati nella tabella al provider utilizzato.

Per esempio, nel caso di Register.it, potremmo dover modificare i DNS di default in questo modo:

Configurazione dei DNS su Register.it

Attenzione: il cambio di DNS e quindi la messa online del sito dipende dalla velocità di propagazione delle informazioni relative ai DNS. Nel caso di Register.it, i tempi arrivano fino a 2 giorni!

L’ultimo step da compiere dopo aver aggiornato i DNS, è quello di creare un record A: questo ci permetterà di instradare le richieste che arrivano al nostro dominio verso il bucket S3.

Clicchiamo quindi su “Crea record” e selezioniamo come tipologia il record A: le altre impostazioni possono essere liberamente configurate a seconda delle esigenze.

Creazione dei record su Route 53

Nel giro di qualche minuto, sempre che i DNS siano stati aggiornati correttamente, il nostro sito sarà online.

Ma parliamo velocemente dei costi: il costo è di 0.50 centesimi circa al mese:

Costi di Route 53

Quindi, a conti fatti, abbiamo come spesa meno di un euro al mese, escludendo il costo del dominio, che in molti casi viene offerto gratuitamente per il primo anno.

Non male, no?