Implementazione di un'applicazione Web su Amazon Amplify

GUIDA ALLE OPERAZIONI DI BASE

Modulo 3: Automatizzazione dell'implementazione

In questo modulo implementerai l'applicazione Web utilizzando la pipeline CI/CD integrata in Amplify

Introduzione

In questo modulo archivierai l'applicazione su un repository GitHub e poi configurerai l'implementazione continua utilizzando la Console di Amplify.

Argomenti affrontati

  • Connessione di un repository GitHub ad Amplify
  • Configurazione dell'implementazione continua tramite Amplify

 Tempo richiesto per il completamento

5 minuti

 Prerequisiti del modulo

  • Account AWS con accesso da amministratore**
  • Browser consigliato: l'ultima versione di Chrome o Firefox

[**]Gli account creati nelle ultime 24 ore potrebbero non avere ancora accesso a tutti servizi richiesti per questo tutorial.

Implementazione

Archiviazione del progetto su GitHub

Prima di poter configurare il progetto affinché implementi automaticamente gli aggiornamenti, è necessario ospitarlo da qualche parte. Questa guida presume che tu conosca GitHub, abbia un account e sappia come creare un nuovo repository privato. Crea un repository privato e invia il codice creato a tale repository.

Configurazione dell'implementazione continua

Per configurare Amplify affinché implementi il codice, è necessario collegarlo all'account GitHub. Tale operazione si esegue tramite la Console AWS poiché è necessario generare un token GitHub per accedere al repository privato e archiviarlo nell'account AWS. Per farlo, dalla directory amplify-app esegui amplify add hosting. Amplify mostrerà un elenco di domande sull'hosting. Seleziona le opzioni mostrate di seguito:

amplify add hosting

? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  Amazon CloudFront and S3
? Choose a type
❯ Continuous deployment (Git-based deployments)
  Manual deployment
  Learn more

In questo modo verrà aperta la Console di Amplify in una nuova finestra nel browser per configurare l'hosting nel progetto. Dalla pagina dell'app nella Console di Amplify, fai clic sulla scheda Frontend environments (Ambienti di frontend), seleziona GitHub e fai clic sul pulsante Connect branch (Connetti ramo).

gsg-build-amplify-4.png

In questo modo sarai reindirizzato a GitHub. Ora concederai alla Console di Amplify l'accesso all'account GitHub in modo che possa implementare il codice sorgente ospitato al suo interno. Per farlo, fai clic sul pulsante verde Authorize aws-amplify-console (Autorizza aws-amplify-console).

gsg-build-amplify-5

Ora collegherai il repository GitHub all'applicazione Amplify. Nella pagina Add repository branch (Aggiungi ramo del repository), seleziona il repository amplify-web-app e il ramo main. Quindi, fai clic su Successivo.

gsg-build-amplify-6

I passaggi successivi servono a configurare le impostazioni di costruzione dell'applicazione. Avrai bisogno di un ruolo di servizio IAM che consenta ad Amplify di accedere alle risorse AWS all'interno del tuo account per implementarle automaticamente. Nella pagina Configure build settings (Configura impostazioni di costruzione), fai clic sul pulsante Create new role (Crea nuovo ruolo) all'interno del riquadro blu.

gsg-build-amplify-7

Si aprirà la Console IAM in una nuova scheda e sarà compilata con i valori necessari. Fai clic su Create role (Crea ruolo):

  • Tipo di entità affidabile: servizio AWS
  • Servizio: Amplify
  • Caso d'uso: Amplify - Implementazione backend
  • Policy di autorizzazione: AdministratorAccess-Amplify
gsg-build-amplify-8

Una volta terminata la creazione, puoi chiudere questa scheda del browser e tornare alla pagina Configure build settings (Configura impostazioni di costruzione), fare clic su Refresh existing roles (Aggiorna ruoli esistenti) e quindi selezionare il ruolo appena creato dal menu a discesa. Poi, seleziona dev dal menu a discesa Environment (Ambiente). Questo è l'ambiente che hai creato durante la configurazione di Amplify nel progetto dopo aver eseguito amplify init.

Lascia le impostazioni rimanenti sui valori di default e fai clic su Next (Successivo).

gsg-build-amplify-9

Rivedi i valori che hai configurato e fai clic su Save and deploy (Salva e implementa). Amplify ora inizierà a implementare automaticamente l'applicazione React in base alle modifiche del repository sorgente.

gsg-build-amplify-10

Ora puoi tornare al terminale per seguire il progresso premendo Invio:

? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository
Amplify hosting urls:
┌──────────────┬────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                     │
├──────────────┼────────────────────────────────────────────┤
│ main         │ https://main.d339jiqv9kzj2m.amplifyapp.com │
└──────────────┴────────────────────────────────────────────┘

Una volta completata l'implementazione, sarà disponibile all'URL visualizzato e chiunque potrà accedere all'app tramite tale URL.

Conclusione

In questo modulo hai imparato come collegare il repository GitHub privato al codice dell'applicazione Web per configurare l'implementazione automatica con Amplify. Nel prossimo modulo, scoprirai come eliminare l'applicazione appena implementata e tutte le risorse AWS create per essa.

A seguire: Eliminazione delle risorse

Facci sapere com'è andata.

Grazie per il tuo feedback
Siamo contenti che questa pagina ti sia stata d’aiuto. Vuoi condividere ulteriori dettagli per aiutarci a continuare a migliorare?
Chiudi
Grazie per il tuo feedback
Ci dispiace che questa pagina non ti sia stata d'aiuto. Vuoi condividere ulteriori dettagli per aiutarci a continuare a migliorare?
Chiudi