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
