Hosting con S3 e Route 53 per Angular

  • Di
  • 2021-09-16 - 6 minuti
banner

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 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/ 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 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 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 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 Contenuto del bucket

Caricamento oggetti nel 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 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 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 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 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 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 Conferma della configurazione dell’accesso

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

Homepage della webapp Angular 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 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 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 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 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 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?

Post correlati

Iscriviti al TheRedCode.it Corner

La tecnologia corre, e tu devi correre più veloce per rimanere sempre sul pezzo! 🚀

Riceverai una volta al mese (o anche meno) con codici sconto per partecipare agli eventi del settore, quiz per vincere dei gadget e i recap degli articoli piĂš interessanti pubblicati sul blog

Ci sto!

Partners

Community, aziende e persone che supportano attivamente il blog

Logo di Codemotion
Logo di GrUSP
Logo di Python Milano
Logo di Schrodinger Hat
Logo di Python Biella Group
Logo di Fuzzy Brains
Logo di Django Girls
Logo di Improove
Logo del libro open source
Logo di NgRome

Vuoi diventare #tech content writer? 🖊️

Se vuoi raccontare la tua sul mondo #tech con dei post a tema o vuoi condividere la tua esperienza con la community, sei nel posto giusto! 😉

Manda una mail a collaborazioni[at]theredcode.it con la tua proposta e diventa la prossima penna del blog!

Ma sĂŹ, facciamolo!