Guida introduttiva alle implementazioni continue a stack completo

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

In questo tutorial, configurerai un flusso di lavoro CI/CD completo con Amplify. Distribuirai un'app frontend su Amplify Hosting. Quindi creerai un backend usando Amplify Studio. Infine, collegherai il backend cloud all'app frontend.

Prerequisiti

Prima di iniziare questo tutorial, dovrai fare quanto segue:

• 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 o. GitLab AWS CodeCommit

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

Fase 1: Implementazione di un frontend

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

Se devi creare una nuova app frontend da utilizzare per questo esempio, puoi seguire le istruzioni Create React App nella documentazione di Create React App.

Per distribuire un'app frontend

1. Accedi AWS Management Console e apri la console Amplify.

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

3. Seleziona il tuo fornitore GitHub, Bitbucket o di AWS CodeCommit repository GitLab, quindi scegli Continua.

4. Amplify autorizza l'accesso al tuo repository git. Per gli GitHub archivi, Amplify ora utilizza la funzione Apps per autorizzare GitHub l'accesso ad Amplify.

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

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

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

   2. Nell'elenco Branch, seleziona il nome del ramo del repository da connettere.

   3. Seleziona Avanti.

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

7. Nella pagina Revisione, scegli Salva e distribuisci. Una volta completata la distribuzione, puoi visualizzare l'app nel dominio amplifyapp.com predefinito.

Nota

Per aumentare la sicurezza delle tue applicazioni Amplify, il dominio amplifyapp.com è registrato nella Public Suffix List (PSL). Per una maggiore sicurezza, ti consigliamo di utilizzare i cookie con un __Host- prefisso se hai bisogno di impostare cookie sensibili nel nome di dominio predefinito per le tue applicazioni Amplify. Questa pratica ti aiuterà a difendere il tuo dominio dai tentativi CSRF (cross-site request forgery). Per ulteriori informazioni, consulta la pagina Impostazione cookie nella pagina Mozilla Developer Network.

Fase 2: Creare un backend

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

Per creare un backend

1. Accedi AWS 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 di 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 di 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 Studio, consulta la documentazione di Amplify Studio.

Usa le seguenti istruzioni per creare un database semplice utilizzando l'interfaccia visual backend builder di Amplify Studio.

Crea un modello di dati

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 di modellazione dei dati, scegli Aggiungi modello.

3. Per il titolo, inserisciTodo.

4. Scegli Aggiungi un campo.

5. Per Nome campo, inserisciDescription.

   La schermata seguente è un esempio di come apparirà il modello di dati nel designer.

   

6. Scegli Salva e distribuisci.

7. Torna alla console Amplify Hosting e la distribuzione dell'ambiente di staging sarà in corso.

Durante l'implementazione, Amplify Studio crea tutte le risorse AWS necessarie nel backend, tra cui un'API AWS AppSync GraphQL per accedere ai dati e una tabella Amazon DynamoDB per ospitare gli elementi Todo. Amplify AWS CloudFormation utilizza per implementare il backend, il che consente di archiviare la definizione del backend come. infrastructure-as-code

Passaggio 3: Connect il backend al frontend

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

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 univoco dell'app 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 ramo frontend con un backend nella console Amplify Hosting.

Per connettere un ramo di app frontend 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, per Ambiente, seleziona il nome del backend da connettere. In questo esempio, scegli il backend di staging che hai creato nel passaggio 2.

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

4. Successivamente, devi impostare un ruolo di servizio per concedere ad Amplify le autorizzazioni necessarie per apportare modifiche al backend dell'app. Puoi utilizzare un ruolo di 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 progetto.

   Esegui una di queste operazioni:

   • Dal tuo repository git, invia del codice per avviare una build nella console Amplify.

   • Nella console Amplify, vai alla pagina dei dettagli della build dell'app e scegli Redeploy this version.

Passaggi successivi

Configura le distribuzioni delle feature branch

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

Crea un'interfaccia utente frontend in Amplify Studio

Usa Studio per creare l'interfaccia utente di frontend con un set di componenti dell' ready-to-use interfaccia utente, quindi collegala al backend dell'app. Per ulteriori informazioni e tutorial, consulta la guida per l'utente di Amplify Studio nella documentazione di Amplify Framework.