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. 

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 start

4. 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

a. Crea un nuovo repository GitHub per la tua app (link).

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.

tmt-react-ClickThumnail

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.

tmt-react-7b-2

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.

Questo tutorial è stato utile?

Grazie
Facci sapere cosa ti è piaciuto.
Spiacenti di non esserti stati d'aiuto
C'è qualcosa di obsoleto, ambiguo o approssimativo? Aiutaci a migliorare questo tutorial con il tuo feedback.