In questa guida vedremo come fare il deploy di un'applicazione ReactJS su AWS Amplify. Configureremo l'applicazione ReactJS in locale su AWS Cloud9 per poi portarla in produzione su AWS Amplify. Mostrerò inoltre come effettuare il deploy dell'app a partire da un repository GitHub.
Spiegherò come usare AWS Amplify per ospitare l'app sfruttando Amazon S3 e CloudFront, così da garantire una distribuzione rapida dell'applicazione web. Per concludere, vedremo come associare un dominio personalizzato alla vostra app.
Perché scegliere AWS Amplify? AWS Amplify è una suite di strumenti e servizi che aiuta gli sviluppatori a creare e distribuire applicazioni web e mobile full-stack su AWS. Con AWS Amplify potete realizzare in pochi minuti un backend completo di autenticazione, gestione dei dati, storage e molto altro. Potete anche progettare visivamente l'interfaccia frontend grazie all'integrazione design-to-code con Figma e collegarla al backend con pochi clic.
Amplify supporta numerosi framework web ed è basato sull'infrastruttura cloud AWS, sicura e scalabile. Che siate alle prime armi o che programmiate da anni, AWS Amplify vi semplificherà notevolmente il lavoro.
Prerequisiti del tutorial
Per seguire questo tutorial avrete bisogno di:
- Un account AWS.
- Un account GitHub per ospitare i repository Git.
- Una conoscenza di base della Git CLI per inviare commit a un repository remoto.
- Un dominio personalizzato (facoltativo).
Creare un ambiente AWS Cloud9
AWS Cloud9 è un potente IDE basato su cloud che consente agli sviluppatori di scrivere, eseguire ed effettuare il debug del codice direttamente dal browser. Ideale per applicazioni serverless e ReactJS, supporta diversi linguaggi senza richiedere installazioni in locale.
In questo passaggio creeremo un ambiente in AWS Cloud9 e lo utilizzeremo per sviluppare un'applicazione ReactJS in locale.
Aprite la console AWS Cloud9 all'indirizzo https://console.aws.amazon.com/cloud9/.
Iniziamo creando un ambiente Cloud9, che verrà eseguito su un'istanza Amazon Linux 2 di tipo T3.small. Configureremo l'accesso all'istanza tramite AWS Systems Manager: in questo modo potremo collegarci in SSH senza dover aprire alcuna porta in entrata nel security group dell'istanza. Durante la configurazione, Cloud9 crea i ruoli IAM necessari per accedere ai servizi AWS per vostro conto.
Dalla pagina dell'ambiente, selezionate la vostra istanza Cloud9 e cliccate sul link Open. Siete ora connessi al vostro IDE Cloud9.
Prima di sviluppare l'app ReactJS, verificate che l'istanza esegua Node.js versione 12.x e npm versione 6.x o superiore.
React utilizza queste versioni per garantire prestazioni ottimali e piena compatibilità nella creazione delle interfacce utente.
Creare un'app ReactJS in locale
Configuriamo un'applicazione React in AWS Cloud9 per i test in locale. Dalla directory '~/environment' creiamo un nuovo progetto React chiamato "cloud-wanderer-blog". Eseguite i seguenti comandi:
$ npx create-react-app cloud-wanderer-blog
$ cd cloud-wanderer-blog
$ npm start
Per avviare l'app React, spostatevi nella directory del progetto 'cloud-wander-blog' ed eseguite il comando 'npm start'.
AWS Cloud9 non utilizza il localhost per accedere alle applicazioni in esecuzione, ma offre una funzionalità di anteprima integrata nell'IDE Cloud9.
Dal menu in alto dell'IDE AWS Cloud9, selezionate Preview > Preview Running Application. Si aprirà una nuova scheda nell'ambiente che mostrerà l'app React in esecuzione.
Creare il repository GitHub e collegarlo a Cloud9
Accedete al vostro account GitHub e selezionate 'New repository' dal pulsante '+' in alto a destra. Questo repository conterrà i file e le configurazioni dell'applicazione React. Io ho chiamato il mio nuovo repository cloud-wanderer.
Non spuntate l'opzione 'Add a README file': l'installazione di React su Cloud9 ha già creato il file README.
Caricate la vostra applicazione React da Cloud9 al nuovo repository remoto su GitHub. Potete aggiungere i file direttamente da GitHub oppure utilizzare la Git CLI sull'istanza Cloud9.
Per le istruzioni su come caricare i file, consultate la documentazione GitHub: https://docs.github.com/en/repositories/working-with-files/managing-files/adding-a-file-to-a-repository
Nota: quando ho inizializzato il repository Git locale in Cloud9, è stato creato un branch 'master'. Per garantire coerenza e compatibilità con il repository GitHub remoto, ho rinominato il branch locale da 'master' a 'main'. Questo passaggio rientra in un'iniziativa più ampia per promuovere un linguaggio inclusivo.
Installare la Amplify CLI
Dopo aver predisposto l'ambiente di staging su Cloud9, configuriamo ora un ambiente di produzione su AWS Amplify. Per impostare l'app Amplify ho installato la Amplify CLI nell'istanza Cloud9, partendo da '~/home/ec2-user'. Per consentire alla Amplify CLI di aprire file e link verso la console di gestione AWS, ho installato anche xdg-utils.
$ cd
$ sudo yum install xdg-utils -y
$ npm install -g @aws-amplify/cli
Configurare la Amplify CLI
Per configurare la Amplify CLI sulla vostra macchina locale è necessario collegarla all'account AWS. Per farlo utilizziamo 'amplify configure'. Cliccate sul link proposto per accedere alla console AWS.
Tornate al terminale di Cloud9 e indicate la regione AWS. Io ho scelto la regione eu-west-1.
La Amplify CLI vi chiederà di creare un utente IAM. Cliccate sul link di creazione utente per aprire la pagina IAM corrispondente. Inserite un nome utente e cliccate Next. Potete usare il nome che preferite, io ho scelto "amplify-cli-admin". Cliccate sul pulsante Next.
Selezionate Attach policies directly e scegliete AdministratorAccess-Amplify come policy dei permessi.
Nella pagina Review verificate che tutto sia corretto e selezionate Create user.
Verrete reindirizzati alla pagina con l'elenco degli utenti. Selezionate l'utente appena creato e, dalla pagina dei dettagli, aprite la scheda Security credentials. Scorrete fino ad Access keys e cliccate su Create access keys.
Come caso d'uso scegliete l'opzione Command Line Interface (CLI), confermate l'avviso e selezionate Next.
Scaricate il file CSV contenente le access keys dell'utente IAM e conservatelo in un luogo sicuro.
Tornate alla console Cloud9 e premete invio. Inserite i valori di Access key e Secret access key. Lasciate il valore predefinito per il nome del profilo. La Amplify CLI è ora configurata nella regione scelta con le relative credenziali di sicurezza.
Inizializzare l'app Amplify
Eseguite il comando 'amplify init' per creare un nuovo progetto Amplify. Questo comando prepara l'applicazione React per Amplify. Amplify suggerisce in autonomia le impostazioni predefinite a partire dalla directory cloud-wanderer-blog: potete accettarle premendo 'Y' oppure rifiutarle e indicare le vostre preferenze premendo 'N'.
$ cd ~/environment/cloud-wanderer-blog/
$ amplify init
Per l'autenticazione scegliete AWS Profile e selezionate il profilo predefinito configurato al passaggio precedente. In alternativa, scegliete Access Keys e inserite manualmente Access Key ID e Secret Access Key ID.
Aprite la console Amplify e visualizzate l'app Amplify distribuita tramite la Amplify CLI.
Collegare Amplify al repository GitHub
Ora colleghiamo l'app Amplify al repository GitHub. In questo modo il processo di CI/CD diventa molto più semplice.
Dalla console Amplify aprite la scheda dell'ambiente di hosting dell'app Amplify.
Autorizzate Amplify a connettersi al vostro repository GitHub e aggiungete repository e branch.
In Build settings selezionate 'dev' come ambiente. Create un ruolo IAM affinché Amplify possa accedere alle vostre risorse. Amplify rileva automaticamente le impostazioni di build predefinite; se avete configurazioni diverse, potete modificare lo script Yaml.
Al termine, rivedete le impostazioni e cliccate su Save and deploy per avviare il deploy definitivo dell'applicazione.
Le fasi di provisioning, build e deployment richiederanno qualche minuto.
L'applicazione Amplify è ora raggiungibile tramite il link dell'endpoint.
Testare il deployment continuo
Ora testiamo il deployment continuo. Per questo passaggio ho modificato la home page React App.js, collegandola a una seconda pagina, e ho usato l'anteprima per verificare la modifica in locale.
Tramite la Git CLI su Cloud9 ho inviato la modifica al repository GitHub. AWS Amplify ha rilevato automaticamente i cambiamenti e ha avviato un nuovo processo di build e deployment.
A processo concluso, aggiornate l'app Amplify nel browser per visualizzare le modifiche.
Il pulsante VISIT Cloud Wanderer BLOG è collegato alla nuova pagina.
Distribuire CloudFront per ospitare i contenuti statici
Amazon CloudFront è fondamentale per la velocità del vostro sito web: memorizza nella cache i contenuti nelle Edge location AWS, così da servirli agli utenti più rapidamente.
CloudFront può essere aggiunto da Amplify utilizzando S3 come server di origine. L'unico limite di questo approccio è che non è possibile modificare la distribuzione CloudFront, perché la console Amplify effettua il deploy delle risorse in un account gestito da AWS.
In alternativa, è possibile distribuire CloudFront tramite la Amplify CLI.
Il comando 'amplify add hosting' configura un bucket S3 e una distribuzione CloudFront per la cache dei contenuti statici. Potrete accedere a entrambi e gestirli direttamente dal vostro account AWS.
Eseguite il comando 'amplify add hosting', selezionate Amazon CloudFront and S3 e indicate un nome per il bucket S3.
Pubblicate le modifiche eseguendo 'amplify publish'. Il comando carica gli artefatti di build e i contenuti statici nel nuovo bucket S3. CloudFront servirà i contenuti statici dalle edge location, riducendo i tempi di caricamento.
Tramite la AWS CLI possiamo elencare gli oggetti nel bucket S3 appena creato:
$ aws s3 ls s3://cloud-wanderer-bucket-dev - region eu-west-1
Il deployment di CloudFront e S3 introduce nuove configurazioni nella directory di Amplify. Queste modifiche vanno committate e inviate al repository GitHub remoto.
Comportamento di caching di CloudFront
Usate Curl per verificare che CloudFront stia memorizzando in cache i contenuti statici.
Nell'output di Curl controllate l'header x-cache: 'Hit from cloudfront' indica che CloudFront sta servendo il contenuto dalla cache, mentre 'Miss from cloudfront' significa che il contenuto non è ancora stato memorizzato.
Non preoccupatevi se al primo tentativo ottenete un 'Miss from cloudfront': un contenuto deve essere richiesto almeno una volta prima di poter essere messo in cache.
Aggiungere un dominio personalizzato
L'endpoint Amplify predefinito ha un formato simile a https://main.d335ddgrzlw9s5.amplifyapp.com/
Per rendere più semplice l'accesso alla vostra app Amplify la configureremo con un dominio personalizzato.
Per questo passaggio aggiungerò il dominio 'cloudwanderer.life' alla mia app Amplify. Ho acquistato il dominio 'cloudwanderer.life' da GoDaddy.
Aprite la console Route 53 all'indirizzo https://console.aws.amazon.com/route53/
Cliccate su Hosted Zones, scegliete Create Hosted Zone, inserite il nome del dominio e cliccate Create. Quando create una hosted zone, Route 53 assegna automaticamente quattro name server alla zona.
Nel vostro account di hosting (GoDaddy, Google Domains) aggiornate i DNS con i name server di Route 53. In questo modo Route 53 assume il controllo del DNS del dominio.
Tenete presente che la propagazione DNS può richiedere fino a 48 ore per essere pienamente operativa su Internet, a causa dei valori TTL (Time to Live) impostati sui server DNS in tutto il mondo.
Dalla console Amplify possiamo ora servire la nostra applicazione tramite il dominio personalizzato cloudwanderer.life
Nella console Amplify cliccate su Domain Management nel menu a sinistra, quindi sul pulsante Add Domain.
Il menu a tendina mostra il dominio ospitato su Route53. Selezionatelo e cliccate Configure domain.
Amplify creerà i record CNAME in Route53 per verificare la proprietà del dominio.
L'app Amplify verrà così associata al vostro dominio (l'operazione richiede tra i 5 e i 20 minuti).
Al termine potrete accedere alla vostra app Amplify utilizzando il dominio personalizzato.
In questo tutorial vi ho mostrato come usare la Amplify CLI per realizzare e distribuire un'applicazione React. Abbiamo iniziato sviluppando un'app React in locale su Cloud9, quindi abbiamo installato e configurato la Amplify CLI e l'abbiamo usata per il deploy dell'app React su Amplify.
Abbiamo poi visto come collegare l'app React Amplify a GitHub. Per migliorare le prestazioni, l'abbiamo configurata con CloudFront. Infine, abbiamo associato all'app Amplify un dominio personalizzato.
Spero che questo tutorial vi sia stato utile e vi auguro buon lavoro con il deployment della vostra applicazione!