Nozioni di base su AWS

Creazione di un'applicazione React

Crea una semplice applicazione Web utilizzando AWS Amplify

Modulo 1: Distribuzione e hosting di un'applicazione Web React

In questo modulo, creerai un'applicazione React e la distribuirai nel cloud tramite il servizio di hosting Web di AWS Amplify.

Introduzione

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 la CLI di Amplify e distribuisce automaticamente aggiornamenti con ogni commit di codice.

In questo modulo, inizieremo a creare una nuova applicazione React e la inseriremo in un repository GitHub. Quindi, connetteremo la repository all'hosting Web di AWS Amplify e la distribuiremo in una rete per la distribuzione di contenuti (Content Delivery Network, 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.

Avrai modo di approfondire i seguenti aspetti

  • Creazione di un'applicazione React
  • Inizializzazione di un repository GitHub
  • Distribuzione dell'applicazione con AWS Amplify
  • Implementazione delle modifiche del codice e ridistribuzione dell'applicazione

Concetti chiave

Applicazione React: React è un framework di applicazioni Web che consente agli sviluppatori di creare rapidamente applicazioni a pagina singola con prestazioni elevate tramite JavaScript.

Git: un sistema di controllo delle versioni che permette agli sviluppatori di archiviare file, gestire e aggiornare le relazioni tra file e directory, versioni e modifiche ai file.

 Tempo richiesto per il completamento

10 minuti

 Servizi utilizzati

Implementazione

  • 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 con il comando seguente nel prompt dei comandi o nel terminale:

    npx create-react-app amplifyapp
    cd amplifyapp
    npm start
  • 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 applicazione (link)

    Front End GitHub Repository Module 1

    b. Inizializza git e invia l'applicazione al nuovo repository GitHub eseguendo i comandi seguenti 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
  • Accedi alla Console di gestione AWS

    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.

    Front End AWS Console Find Amplify Module 1
  • Distribuzione dell'applicazione con 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. Nella console del servizio AWS Amplify, seleziona "Inizia" sotto alla voce Distribuzione.

    Front End Amplify Deploy Module 1

    b. Seleziona GitHub come servizio di repository e seleziona Continua.

    Front End Amplify GitHub Module 1.png

    c. Esegui l'autenticazione con GitHub e torna alla console Amplify. Scegli il repository e il ramo principale creati precedentemente, quindi seleziona Successivo.

    Front End GitHub Add Repository Module 1.png

    d. Accetta le impostazioni predefinite della build e seleziona Successivo.

    Front End GitHub Add Repository2 Module 1.png

    e. Rivedi i dettagli finali e seleziona Save and Deploy (Salva e distribuisci).

    Front End GitHub Add Repository3 Module 1.png

    f. Adesso in AWS Amplify verrà creato il codice sorgente e l'app sarà distribuita a https://...amplifyapp.com.

    Front End Amplify Deploy Source Module 1

    g. Una volta completata la build, seleziona la miniatura visualizzata sull'app attualmente in funzione. 

    Front End Initial App Module 1
  • Distribuzione automatica delle modifiche al codice

    In questa fase, apporterai alcune modifiche al codice usando l'editor di testo e le invierai al ramo principale dell'applicazione.

    a. Modifica src/App.js con il codice seguente e salva.

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1>Hello from V2</h1>
          </header>
        </div>
      );
    }
    
    export default App;

    b. Apporta le modifiche a GitHub nel prompt dei comandi (Windows) o nel terminale (macOS) per avviare automaticamente una nuova build: 

    git add .
    git commit -m “changes for v2”
    git push origin master

    c. Una volta completata la build, seleziona la miniatura sulla console AWS Amplify per visualizzare l'app aggiornata.

    Front End HelloV2 App Module 1

Conclusione

Hai distribuito un'applicazione React in AWS Cloud tramite l'integrazione con GitHub utilizzando AWS Amplify. Con AWS Amplify puoi distribuire continuamente la tua applicazione nel cloud e ospitarla in una CDN disponibile su scala globale.

Neo moduli successivi, creeremo una versione locale dell'applicazione per continuare a sviluppare e ad aggiungervi nuove funzionalità.

Questo modulo è 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.

Inizializzazione di un'applicazione locale