Pubblicare un’applicazione Angular su AWS usando Serverless

Un quick starter basato su serverless da usare come modello per un’applicazione Angular “production ready”

Cos’è serverless

Serverless è un‘architettura basata su cloud che consente agli utenti di scrivere e distribuire codice senza preoccuparsi dell’infrastruttura sottostante.

I fornitori cloud come AWS, Azure o Google Cloud saranno responsabili dell’esecuzione del codice allocando dinamicamente le risorse, questo paradigma ti consente di “spostare” molte delle preoccupazioni legate all’infrastruttura verso i provider, permettendoti di concentrarti sulla business logic.

L’approccio serverless viene in genere utilizzato per le applicazioni back-end, ma possiamo trarre vantaggio da questa architettura anche per implementare rapidamente le applicazioni front-end.

Il Serverless Framework

Serverless Framework nasce per  sviluppare e distribuire le risorse cloud insieme alle risorse dell’infrastruttura di cui hanno bisogno. Si tratta di una CLI che offre struttura, automazione e “best practices” pronte all’uso.

Serverless funziona con diversi provider cloud ma in questo tutorial ci concentreremo su Amazon Web Services.

Rrepository di riferimento

Un esempio funzionante del progetto Angular che useremo come riferimento è disponibile su: https://github.com/mzuccaroli/angular-serverless-starter:,  si tratta di un semplice progetto Angular creato tramite Angular CLI.

Puoi utilizzare questo progetto come come starter per il tuo progetto personalizzato.

L’esempio di base

Questo tutorial si basa sul serverless example “aws node single page app via cloudfront”, adattato ad un’applicazione Angular. Puoi clonarlo per visualizzare i riferimenti di codice e personalizzazioni future.

Pre-requisiti

Avrai bisogno di Serverless installato a livello globale sul tuo sistema:

npm install -g serverless

Per maggiori informazioni: https://serverless.com/framework/docs/getting-started/

È inoltre necessario un account AWS, guarda il link che segue se non ne hai uno: Come creare un account AWS. Amazon offre un free tier di un anno che puoi utilizzare e trarne grandi vantaggi.

Se disponi già di un account AWS, assicurati di disporre delle autorizzazioni appropriate per cloudfront, cloudformation e s3.

Realizziamo l’applicazione

Getting started

Crea un progetto Angular di base con la CLI se non ne hai già uno digitando:

ng new

Segui gli step per eseguire lo scaffolding dell’applicazione base con le ultime versioni delle librerie disponibili.

Quando il progetto Angular è completo possiamo personalizzarlo per il deploy serverless.

Aggiungere il single page app plugin

Partendo dall’ esempio di base cominciamo a copiare alcuni file utili.

Avremo bisogno della cartella serverless-single-page-app-plugin, copiamola nella radice del progetto, questo plug-in ti consentirà di semplificare l’esperienza di deploy.

Rendi disponibile questo plugin per il tuo progetto aggiungendolo al tuo package.json nella sezione requirements:

serverless-single-page-app-plugin": "file:./serverless/single-page-app-plugin

Installa il serverless-dotenv-plugin

Questo ti aiuterà a gestire i vari ambienti e gli stage del tuo progetto

npm install serverless-dotenv-plugin

Aggiungere il file serverless.yml

Questo file è il centro del deploy serverless, è possibile copiarlo dall’esempio principale e modificarlo o utilizzare quello personalizzato nel repository di riferimento.

Le principali personalizzazioni si trovano nelle sezioni plugins custom e provider:

È necessario modificare obbligatoriamente il valore di s3Bucket con un nome univoco e personalizzato, quindi modifica il riferimento alla cartella dist di Angular e infine aggiungi il serverless-dotenv-plugin per poterlo distribuire su più stage.

Modifica il file gitignore

Assicurati di aggiungere la cartella .serverless al tuo file .gitignore aggiungendo:

# serverless
.serverless

Build e deploy

Build

Assicurati che il tuo .env sia impostato correttamente, quindi esegui il normale processo di build:

ng build 

I build artifacts saranno inseriti nella cartella dist/. Usa il flag –prod per una build di produzione.

Primo deploy

Attenzione: ogni volta che si apportano modifiche alla risorsa CloudFront in serverless.yml, il deploy potrebbe essere un po’ lungo, anche 20 minuti.

Per rilasciare l’applicazione è necessario prima configurare l’infrastruttura eseguendo:

serverless deploy

Il risultato dovrebbe essere qualcosa di simile a:

Dopo questo passaggio viene impostata la distribuzione del bucket S3 e CloudFront. Ora devi caricare i tuoi file statici, il contenuto della cartella dist, su S3, è facile farlo sfruttando il plugin single-page-app:

serverless syncToS3

Il risultato atteso dovrebbe essere:

Ora dobbiamo scoprire URL su cui l’applicazione è stata rilasciata. Basta eseguire:

sls domainInfo

Il risultato dovrebbe essere qualcosa di simile a:

Serverless: Web App Domain: dyj5gf0t6nqke.cloudfront.net

Basta andare all’indirizzo ottenuto per vedere la tua applicazione.
I redirect ad HTTPS sono gestiti automaticamente.

Re-deploy

Se apporti modifiche all’applicazione non è necessario ridistribuire l’intero stack, devi solo sincronizzare i nuovi file in s3 e invalidare la cache di CloudFront per assicurarti che vengano pubblicati.

Per sincronizzare i file esegui:

serverless syncToS3

Per invalidare la cache invece:

serverless invalidateCloudFrontCache

Leave a Reply