Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
Distribuisci continuamente un'applicazione Web AWS Amplify moderna da un repository AWS CodeCommit
Creato da Deekshitulu Pentakota (AWS) e Sai Katakam (AWS)
Ambiente: PoC o pilota | Tecnologie: app Web e mobili DevOps; Modernizzazione | Servizi AWS: AWS Amplify; AWS CodeCommit |
Riepilogo
Le applicazioni Web moderne sono costruite come applicazioni a pagina singola (SPA) che raggruppano tutti i componenti dell'applicazione in file statici. Utilizzando AWS Amplify Hosting, puoi creare una pipeline di integrazione e distribuzione continua (CI/CD) che crea, distribuisce e ospita un'applicazione Web moderna gestita in un repository basato su Git. Quando colleghi Amplify Hosting al repository del codice, ogni commit avvia un singolo flusso di lavoro per distribuire il frontend e il backend dell'applicazione. Il vantaggio di questo approccio è che l'applicazione web viene aggiornata solo dopo che l'implementazione è stata completata con successo, il che impedisce incongruenze tra frontend e backend.
In questo modello, usi un CodeCommit repository AWS per gestire la tua applicazione web moderna. L'applicazione web di esempio riportata in queste istruzioni utilizza il framework React SPA. Tuttavia, Amplify Hosting supporta molti altri framework SPA, come Angular, Vue, Next.js, e supporta anche generatori a sito singolo, come Gatsby, Hugo e Jekyll.
Questo modello è destinato ai builder AWS che hanno esperienza con i seguenti servizi e concetti:
AWS CodeCommit
Hosting AWS Amplify
React
JavaScript
Node.js
npm
Git
Prerequisiti e limitazioni
Prerequisiti
Un account AWS attivo.
Autorizzazioni per creare risorse in Amplify e. CodeCommit Per ulteriori informazioni, consulta Identity and Access Management for Amplify e Identity and Access Management for AWS. CodeCommit
AWS Command Line Interface (AWS CLI), installata e configurata.
Un editor di testo o un editor di codice.
CodeCommit, configurato per gli utenti HTTPS che utilizzano credenziali Git.
Un ruolo di servizio IAM per Amplify.
npm e Node.js, installati
(documentazione npm).
Limitazioni
Questo modello non riguarda lo sviluppo e l'integrazione di un backend per l'applicazione Amplify, come un'API, un'autenticazione o un database. Per ulteriori informazioni sui backend, consulta Creare un backend nella documentazione di Amplify.
Versioni del prodotto
AWS CLI versione 2.0
Node.js versione 16.x o successiva
Architettura
Stack tecnologico Target
CodeCommitRepository AWS contenente una React SPA
Flusso di lavoro di hosting AWS Amplify
Architettura Target
![Diagramma dell'architettura della distribuzione di un'app Web da un CodeCommit repository e dell'hosting con AWS Amplify](images/pattern-img/370c0a43-fc09-46dc-a018-853cbd4cff11/images/746a9450-6a0b-4798-bf22-e8f89c7933f6.png)
Strumenti
Servizi AWS
AWS Amplify Hosting offre un flusso di lavoro basato su Git per ospitare applicazioni Web serverless complete con distribuzione continua.
AWS CodeCommit è un servizio di controllo delle versioni che consente di archiviare e gestire archivi Git in modo privato, senza dover gestire il proprio sistema di controllo del codice sorgente.
AWS Identity and Access Management (IAM) ti aiuta a gestire in modo sicuro l'accesso alle tue risorse AWS controllando chi è autenticato e autorizzato a utilizzarle.
Altri strumenti
Node.js
è un ambiente di JavaScript runtime basato sugli eventi progettato per la creazione di applicazioni di rete scalabili. npm
è un registro software che viene eseguito in un ambiente Node.js e viene utilizzato per condividere o prendere in prestito pacchetti e gestire la distribuzione di pacchetti privati.
Epiche
Attività | Descrizione | Competenze richieste |
---|---|---|
Creare un repository . | Per istruzioni, consulta Creare un CodeCommit repository AWS nella CodeCommit documentazione. | AWS DevOps |
Clonare il repository. | Per istruzioni, consulta Connect to the CodeCommit repository clonando il repository nella documentazione. CodeCommit Se richiesto, fornisci le credenziali Git. | Sviluppatore di app |
Attività | Descrizione | Competenze richieste |
---|---|---|
Crea una nuova applicazione React. |
Per ulteriori informazioni sulla creazione di un'applicazione React personalizzata, consulta le istruzioni per la creazione dell'app React | Sviluppatore di app |
Crea un ramo e inserisci il codice. |
| Sviluppatore di app |
Attività | Descrizione | Competenze richieste |
---|---|---|
Connect Amplify al repository. | Per istruzioni, consulta Connect a repository nella documentazione di Amplify Hosting. Seleziona AWS CodeCommit e il repository e il ramo che hai creato in precedenza. | Sviluppatore di app |
Definisci le impostazioni di build del frontend. | Per istruzioni, consulta Confermare le impostazioni di build per il frontend nella documentazione di Amplify Hosting. Accetta le impostazioni predefinite o inserisci quanto segue.
| Sviluppatore di app |
Rivedi e distribuisci. | Per istruzioni, consulta Salva e distribuisci nella documentazione di Amplify Hosting. Attendi il completamento del processo di distribuzione. | Sviluppatore di app |
Attività | Descrizione | Competenze richieste |
---|---|---|
Verifica la distribuzione iniziale. | Quando il processo di distribuzione è completo, in Dominio, scegli il link. Verifica che l'applicazione funzioni come previsto. | Sviluppatore di app |
Invia una modifica al repository del codice. | Modifica il codice sulla tua workstation locale e invia le modifiche al CodeCommit repository. Amplify Hosting rileva la modifica nel repository e avvia automaticamente il processo di creazione e distribuzione. Conferma che gli aggiornamenti dell'applicazione siano visibili sul dominio. | Sviluppatore di app |
Risorse correlate
CodeCommit Documentazione AWS
Documentazione sull'hosting AWS Amplify
Risorse React