Distribuzione e hosting di un'app ReactJS
con la console AWS Amplify
La console AWS Amplify fornisce un flusso di lavoro CI/CD basato su Git per sviluppare, distribuire e ospitare le applicazioni Web a pagina singola o siti Web statici con back-end serverless. Connettendosi a un repository Git, Amplify determina le impostazioni della build per il framework front-end e qualsiasi risorsa back-end serverless configurata con l’interfaccia a riga di comando Amplify CLI e distribuisce automaticamente aggiornamenti con ogni commit di codice.
In questo tutorial, inizieremo a creare una nuova applicazione React e la inseriremo in un repository GitHub. Quindi, collegheremo la repository alla console Amplify e la distribuirai in una rete per la distribuzione di contenuti (CDN) disponibile a livello globale in hosting su un dominio amplifyapp.com. Successivamente, ti verranno mostrate le capacità di distribuzione continua, tramite la modifica dell’applicazione React e l’invio della nuova versione al ramo principale, il quale avvierà automaticamente una nuova distribuzione.
Tutte le operazioni mostrate in questo tutorial possono essere eseguite nell'ambito del piano gratuito.
| Informazioni sul tutorial | |
|---|---|
| Durata | 10 minuti |
| Costo | Idoneo per Piano gratuito |
| Caso d'uso | Siti e applicazioni web |
| Prodotti | AWS Amplify Console |
| Destinatari | Sviluppatore |
| Livello | Principiante |
| Ultimo aggiornamento | 03/04/2018 |
1. Registrati ad AWS
Per seguire il tutorial sulla console AWS Amplify è necessario un account AWS. Con questo tutorial non sono previsti costi aggiuntivi per l'utilizzo di AWS Amplify. Le risorse create in questo tutorial sono idonee per il piano gratuito.
Hai già un account? Accedi alla console Amplify
2. Conferma della configurazione dell'ambiente
Apri l'interfaccia a riga di comando e immetti il comando seguente:
node -v;Se il comando restituisce una versione precedente a v8.0, effettua l'upgrade del nodo a una versione successiva alla 8. Se non trovi il comando, installa il nodo scaricandolo da nodejs.org/download.
3. Creazione di una nuova applicazione React
Il modo più semplice per creare un'applicazione React consiste nell'utilizzare il comando create-react-app. Installa questo pacchetto mediante il comando seguente:
npx create-react-app amplifyapp
cd amplifyapp
npm start4. Inizializzazione del repository GitHub
In questa fase creerai un repository GitHub ed eseguirai il commit del tuo codice al repository. Avrai bisogno di un account GitHub per completare questa fase. Se non disponi di un account, registrati qui.
b. Inizializza git e invia l'applicazione al nuovo repository GitHub eseguendo il comando seguente nell'interfaccia a riga di comando:
git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m ‘initial commit’
git push origin master
5. Accedi alla console AWS Amplify
Apri la Console di gestione AWS in una nuova finestra del browser, tenendo aperta questa guida dettagliata. Quando viene caricata la schermata, inserisci nome utente e password per iniziare. Quindi, digita Amplify nella barra di ricerca e seleziona AWS Amplify per aprire la console di servizio.
6. Distribuzione dell'app ad AWS Amplify
In questa fase, collegherai il repository GitHub appena creato al servizio AWS Amplify. Ciò ti consente di creare, distribuire e ospitare l'app in AWS.
a. Seleziona Get Started (Nozioni d base) in Deploy (Distribuzione).
b. Seleziona GitHub come servizio di repository e seleziona Next (Avanti).
c. Esegui l'autenticazione con GitHub e torna alla console Amplify. Scegli il repository creato precedentemente e il master branch, quindi seleziona Avanti.
d. Accetta le impostazioni predefinite della build e seleziona Avanti.
e. Rivedi i dettagli finali e seleziona Save and Deploy (Salva e distribuisci).
f. Adesso nella console AWS Amplify verrà creato il codice sorgente e l'app sarà distribuita a https://<branchname>.<appid>.amplifyapp.com
g. Una volta completata la build, seleziona la miniatura visualizzata sull'app attualmente in funzione.
7. Distribuzione automatica delle modifiche al codice
In questa fase, apporterai alcune modifiche al codice e le invierai al master branch dell'app.
a. Modifica il file src/App.js.
b. Una volta completata la build, seleziona la miniatura sulla console AWS Amplify per visualizzare l'app aggiornata.
8. Eliminare le risorse
Puoi interrompere facilmente le risorse create sulla console AWS Amplify. Anzi, terminare le istanze non più in uso è una best practice consigliata per evitare di pagare per risorse inutilizzate.
Seleziona Action (Azione), quindi Delete app (Elimina app). Nel modale che viene visualizzato, digita delete (elimina) per confermare l'eliminazione dell'app. L'app adesso è eliminata.
Congratulazioni
Hai distribuito un'applicazione React nel cloud tramite l'integrazione con GitHub utilizzando la console Amplify.
Con la console AWS Amplify puoi distribuire continuamente la tua applicazione nel cloud ed effettuarne l'hosting in una CDN disponibile globalmente.