Nozioni

Amplify Hosting consente agli sviluppatori che creano app con Amplify Framework di distribuire continuamente aggiornamenti al backend e al frontend ad ogni commit di codice. Con Amplify Hosting, puoi distribuire backend serverless con API GraphQL/REST, autenticazione, analisi e archiviazione, creati utilizzando Amplify Studio, sullo stesso commit del codice del frontend.

In questo tutorial è possibile impostare un flusso di CI/CD completo con Amplify. Implementerai un'app di frontend su Amplify Hosting. Quindi creerai un backend utilizzando Amplify Studio. Infine, collegherai il backend cloud all'app frontend.

Prerequisiti

Prima di questo tutorial, è necessario completare le seguenti operazioni:

• Registrazione per un account Account AWS. Apri https://portal.aws.amazon.com/billing/signup#/start/email per iniziare.

• Crea un account con un provider di repository git GitHub, ad esempio Bitbucket GitLab, oAWS CodeCommit.

• Installa Amplta (CLI). Per istruzioni, consulta Installare l'interfaccia a riga di comando di Amplify nella documentazione di Amplify Framework.

Fase 1: implementazione di un front-end

Se hai un'app frontend esistente in un repository git che desideri utilizzare per questo esempio, puoi procedere alle istruzioni per la distribuzione di un'app frontend.

Se devi creare una nuova app frontend da utilizzare per questo esempio, scegli il seguente pulsante Deploy to Amplify Console per distribuire un'app starter Create React App sul tuo account Amplify.

In alternativa, puoi seguire le istruzioni dell'app Create React nella documentazione di Create React App.

Per distribuire un'app di frontend

1. AccediAWS Management Console e apri la console Amplify.

2. Nella pagina Tutte le app, scegli Nuova app, quindi Host web app nell'angolo in alto a destra.

3. Seleziona il tuo provider GitHub GitLab, Bitbucket oAWS CodeCommit il repository, quindi scegli Continua.

4. Amplify autorizza l'accesso al tuo repository git. Per quanto riguarda i GitHub repository, Amplify ora utilizza la funzione GitHub App per autorizzare l'accesso ad Amplify.

   Per ulteriori informazioni sull'installazione e l'autorizzazione dell' GitHub App, consultaConfigurazione dell'accesso Amplify ai GitHub repository.

5. Nella pagina Aggiungi filiale del repository, procedi come segue:

   1. Nell'elenco Repository aggiornati di recente, seleziona il nome del repository da connettere.

   2. Nell'elenco delle filiali, selezionare il nome del ramo del repository da connettere.

   3. Seleziona Successivo.

6. Nella pagina Configura le impostazioni di build, scegli Avanti.

7. Nella pagina Revisione, scegli Salva e distribuisci.

Fase 2: Credi un back-end

Ora che hai distribuito un'app frontend su Amplify Hosting, puoi creare un backend. Utilizza le istruzioni seguenti per creare un back-end con un semplice database e un endpoint dell'API GraphQL.

Per creare un backend

1. AccediAWS Management Console e apri la console Amplify.

2. Nella pagina Tutte le app, seleziona l'app che hai creato nel passaggio 1.

3. Nella home page dell'app, scegli la scheda Ambienti backend, quindi scegli Inizia. Questo avvia il processo di configurazione per un ambiente di staging predefinito.

4. Al termine della configurazione, scegli Launch Studio per accedere all'ambiente backend di staging in Amplify Studio.

Amplify Studio è un'interfaccia visiva per creare e gestire il backend e accelerare lo sviluppo dell'interfaccia utente frontend. Per ulteriori informazioni su Amplify, consulta la Documentation (Documentation (Documentation (Documentation (Documentation

Utilizza le istruzioni seguenti per creare un database semplice utilizzando l'interfaccia del back-end (creazione del back-end).

Creazione di un modello

1. Nella home page dell'ambiente di staging dell'app, scegli Crea modello di dati. Questo apre il designer del modello di dati.

2. Nella pagina Modellazione dati, scegli Aggiungi modello.

3. Per il titolo, inserisciTodo.

4. Scegli Aggiungi un campo.

5. In Nome campo, immettereDescription.

   La schermata seguente è un esempio di come il modello di dati

   

6. Scegli Salva e distribuisci.

7. Torna alla console di Amplify Hosting e l'implementazione dell'ambiente di staging sarà avviata.

Durante la distribuzione, Amplify Studio crea tutte leAWS risorse necessarie nel backend, tra cui un'APIAWS AppSync GraphQL per accedere ai dati e una tabella Amazon DynamoDB per ospitare gli elementi Todo. Amplify utilizzaAWS CloudFormation il backend, che consente di memorizzare la definizione del backend come infrastructure-as-code.

Fase 3: Connta il back-end

Ora che hai implementato un frontend e creato un backend cloud che contiene un modello di dati, devi collegarli. Usa le seguenti istruzioni per trasferire la definizione del backend al progetto di app locale con l'Amplify CLI.

Per connettere un backend cloud a un frontend locale

1. Apri una finestra di terminale e vai alla directory principale del tuo progetto locale.

2. Esegui il seguente comando nella finestra del terminale, sostituendo il testo rosso con l'ID app univoco e il nome dell'ambiente di backend per il tuo progetto.

   amplify pull --appId abcd1234 --envName staging

3. Segui le istruzioni nella finestra del terminale per completare la configurazione del progetto.

Ora puoi configurare il processo di compilazione per aggiungere il backend al flusso di lavoro di distribuzione continua. Usa le seguenti istruzioni per connettere un branch frontend con un backend nella console di Amplify Hosting.

Per connettere un frontend, un ramo dell'app e un backend cloud

1. Nella home page dell'app, scegli la scheda Ambienti di hosting.

2. Individua il ramo principale e scegli Modifica.

   

3. Nella finestra Modifica backend di destinazione, in Ambiente, seleziona il nome del backend da connettere. In questo esempio, scegli il backend di staging creato nel passaggio 2.

   Per impostazione predefinita, il CI/CD completo è abilitato. Deseleziona questa opzione per disattivare il CI/CD completo per questo backend. La disattivazione del CI/CD completo fa sì che l'app venga eseguita in modalità pull only. In fase di compilazione, Amplify genererà automaticamente solo ilaws-exports.js file, senza modificare l'ambiente di backend.

4. Successivamente, devi configurare un ruolo di servizio per concedere ad Amplify le autorizzazioni necessarie per apportare modifiche al backend dell'app. Puoi utilizzare un ruolo del servizio esistente o crearne uno nuovo. Per istruzioni, consulta Aggiungere un ruolo di servizio.

5. Dopo aver aggiunto un ruolo di servizio, torna alla finestra Modifica backend di destinazione e scegli Salva.

6. Per completare la connessione del backend di staging al ramo principale dell'app frontend, esegui una nuova build del tuo progetto.

   Completa una delle seguenti operazioni:

   • Dal tuo repository git, inserisci del codice per avviare una compilazione nella console di Amplify.

   • Nella console Amplify, vai alla pagina dei dettagli della build dell'app e scegli Ridistribuisci questa versione.

Fasi successive

Configurare le implementazioni delle filiali di funzionalità

Segui il nostro flusso di lavoro consigliato per configurare implementazioni di feature branch con più ambienti backend.

Crea un'interfaccia utente di frontend in Amplify Studio

Usa Studio per creare la tua interfaccia utente front-end con un insieme di componenti dell' ready-to-use interfaccia utente e connetterli quindi al back-end app. Per ulteriori informazioni e tutorial, consulta la guida per l'utente di Amplify Studio nella documentazione di Amplify Framework.