Tutorial: creazione di un progetto con il moderno modello di applicazione web a tre livelli

Apri la CodeCatalyst console all'indirizzo https://codecatalyst.aws/.

Nella CodeCatalyst console, accedi allo spazio in cui desideri creare un progetto.

Seleziona Crea progetto.

Scegli Inizia con un progetto.

Nella barra di ricerca inserisci modern.

Seleziona il blueprint di applicazione Web moderna a tre livelli, quindi scegli Avanti.

In Assegna un nome al progetto, inserisci un nome per il progetto. Per esempio:

MyExampleProject.

In Account, scegli Account AWS quello che hai aggiunto durante la registrazione. Il blueprint installerà le risorse in questo account.

In Deployment Role, scegli il ruolo che hai aggiunto durante la registrazione. Ad esempio, scegli CodeCatalystWorkflowDevelopmentRole-spaceName.

Se non ci sono ruoli elencati, aggiungine uno. Per aggiungere un ruolo, scegli Aggiungi ruolo IAM e aggiungi il ruolo al tuo Account AWS. Per ulteriori informazioni, consulta Consentire l'accesso alle AWS risorse con connessione Account AWS.

Nella piattaforma Compute, scegli Lambda.

Nell'opzione di hosting frontend, scegli Amplify Hosting. Per informazioni su AWS Amplify, vedi Cos'è l'hosting? AWS Amplify nella Guida AWS Amplify per l'utente.

In Deployment Region, inserisci il codice regionale del Regione AWS luogo in cui desideri che il blueprint distribuisca l'applicazione Mysfits e le risorse di supporto. Per un elenco dei codici regionali, consulta Endpoint regionali in. Riferimenti generali di AWS

Nel Nome dell'applicazione, lascia il valore predefinito dimysfitsstring.

(Facoltativo) In Genera anteprima del progetto, scegliete Visualizza codice per visualizzare in anteprima i file sorgente che verranno installati dal blueprint. Scegliete Visualizza flusso di lavoro per visualizzare in anteprima i file di definizione del flusso di lavoro CI/CD che verranno installati dal blueprint. L'anteprima si aggiorna dinamicamente in base alle selezioni effettuate.

Seleziona Crea progetto.

Vai al progetto a cui desideri invitare gli utenti.

Nel riquadro di navigazione, scegli Impostazioni del progetto.

Nella scheda Membri, scegli Invita.

Digita gli indirizzi email delle persone che desideri invitare come utenti del progetto. Puoi digitare più indirizzi e-mail separati da uno spazio o da una virgola. Puoi anche scegliere tra membri del tuo spazio che non sono membri del progetto.

Scegli il ruolo dell'utente.

Quando hai finito di aggiungere utenti, scegli Invita.

Nel riquadro di navigazione, scegli Problemi.

Scegli Crea problema.

Nel titolo del problema, fornisci un nome per il problema. Facoltativamente, fornisci una descrizione del problema. In questo esempio, usa make a change in the src/mysfit_data.json file.

Scegli la priorità, la stima, lo stato e le etichette. In Assegnatario, scegli +Aggiungi me per assegnare il problema a te stesso.

Scegli Crea problema. Il problema è ora visibile sulla lavagna. Scegli la scheda per spostare il problema nella colonna In corso.

Accedete al progetto ed effettuate una delle seguenti operazioni:

• Nella pagina di riepilogo del progetto, scegli il repository desiderato dall'elenco, quindi scegli Visualizza archivio.

• Nel riquadro di navigazione, scegli Codice, quindi scegli Archivi di origine. Nei repository di origine, scegli il nome del repository dall'elenco. Puoi filtrare l'elenco dei repository digitando parte del nome del repository nella barra dei filtri.

Nella home page del repository, visualizza il contenuto del repository e le informazioni sulle risorse associate, come il numero di richieste pull e i flussi di lavoro. Per impostazione predefinita, vengono visualizzati i contenuti del ramo predefinito. È possibile modificare la visualizzazione scegliendo un ramo diverso dall'elenco a discesa.

Apri la CodeCatalyst console all'indirizzo https://codecatalyst.aws/.

Vai al progetto in cui desideri creare un ambiente di sviluppo.

Scegli il nome del repository dall'elenco dei repository di origine per il progetto. In alternativa, nel riquadro di navigazione, scegli Codice, scegli Archivi di origine e scegli il repository per il quale desideri creare un ambiente di sviluppo.

Nella home page del repository, scegli Create Dev Environment.

Scegli un IDE supportato dal menu a discesa. Per ulteriori informazioni, consulta Ambienti di sviluppo integrati supportati per gli ambienti di sviluppo.

Scegli il repository da clonare, scegli Lavora in un nuovo ramo, inserisci il nome di un ramo nel campo Nome del ramo e scegli un ramo dal quale creare il nuovo ramo dal menu a discesa Crea ramo da.

Facoltativamente, aggiungi un alias per Dev Environment.

Facoltativamente, scegli il pulsante di modifica della configurazione dell'ambiente di sviluppo per modificare la configurazione di calcolo, archiviazione o timeout dell'ambiente di sviluppo.

Scegli Crea. Durante la creazione dell'ambiente di sviluppo, la colonna di stato dell'ambiente di sviluppo mostrerà Avvio e la colonna di stato verrà visualizzata in esecuzione una volta creato l'ambiente di sviluppo. Si aprirà una nuova scheda con il tuo ambiente di sviluppo nell'IDE di tua scelta. Puoi modificare il codice, eseguire il commit e inviare le modifiche.

Vai all'ambiente di sviluppo del tuo progetto. In AWS Cloud9, espandi il menu di navigazione laterale per sfogliare i file. mysfitssrcEspandi e aprisrc/mysfit_data.json.

Nel file, modificate il valore del "Age": campo da 6 a 12. La riga dovrebbe essere simile alla seguente:

    {
        "Age": 12,
        "Description": "Twilight's personality sparkles like the night sky and is looking for a forever home with a Greek hero or God. While on the smaller side at 14 hands, he is quite adept at accepting riders and can fly to 15,000 feet. Twilight needs a large area to run around in and will need to be registered with the FAA if you plan to fly him above 500 feet. His favorite activities include playing with chimeras, going on epic adventures into battle, and playing with a large inflatable ball around the paddock. If you bring him home, he'll quickly become your favorite little Pegasus.",
        "GoodEvil": "Good",
        "LawChaos": "Lawful",
        "Name": "Twilight Glitter",
        "ProfileImageUri": "https://www.mythicalmysfits.com/images/pegasus_hover.png",
        "Species": "Pegasus",
        "ThumbImageUri": "https://www.mythicalmysfits.com/images/pegasus_thumb.png"
    },

Salvare il file.

Passa al repository mysfits con il comando. cd /projects/mysfits

Aggiungi, conferma e invia le tue modifiche con i comandi git add, git commit e git push.

git add .
git commit -m "make an example change"
git push

Nella CodeCatalyst console, nel riquadro di navigazione, scegli CI/CD, quindi scegli Flussi di lavoro.

Viene visualizzato un elenco di flussi di lavoro. Questi sono i flussi di lavoro generati e avviati dal CodeCatalyst blueprint al momento della creazione del progetto.

Osserva l'elenco dei flussi di lavoro. Dovresti vederne quattro:

Scegli il ApplicationDeploymentPipelineflusso di lavoro associato al main ramo, in basso. Questo flusso di lavoro è stato eseguito utilizzando il codice sorgente del main ramo.

Viene visualizzato un diagramma del flusso di lavoro. Il diagramma mostra diversi blocchi, ognuno dei quali rappresenta un'attività o un'azione. La maggior parte delle azioni è disposta verticalmente, con le azioni in alto che precedono quelle sottostanti. Le azioni disposte fianco a fianco vengono eseguite in parallelo. Le azioni raggruppate devono essere eseguite tutte correttamente prima che l'azione sottostante possa iniziare.

I blocchi principali sono:

Scegli la scheda Definizione (in alto). Il file di definizione del flusso di lavoro viene visualizzato sulla destra. Il file contiene le seguenti sezioni degne di nota:

Scegli la scheda Stato più recente (in alto) e scegli qualsiasi azione nel diagramma del flusso di lavoro.

A destra, scegli la scheda Configurazione per visualizzare le impostazioni di configurazione utilizzate dall'azione durante l'ultima esecuzione. Ogni impostazione di configurazione ha una proprietà corrispondente nel file di definizione del flusso di lavoro.

Lasciare aperta la console e passare alla procedura successiva.

Scegli la scheda Stato più recente.

Nel diagramma del flusso di lavoro, scegli l'DeployFrontendazione.

Attendi che l'azione finisca. Fai attenzione che l'icona «in corso» ( ) si trasformi in un'icona di «successo» ( ).

Scegli l'azione build_backend.

Scegli la scheda Registri ed espandi un paio di sezioni per visualizzare i messaggi di registro relativi a questi passaggi. Puoi vedere i messaggi relativi alla configurazione del backend.

Scegli la scheda Rapporti, quindi scegli il backend-coverage.xml rapporto. CodeCatalyst visualizza il rapporto associato. Il rapporto mostra i test di copertura del codice che sono stati eseguiti e indica la percentuale di righe di codice che sono state convalidate con successo dai test, ad esempio l'80%.

Per ulteriori informazioni sui report dei test, vedereTest con flussi di lavoro.

Lascia la CodeCatalyst console aperta e vai alla procedura successiva.

Tornate al ApplicationDeploymentPipelineflusso di lavoro e scegliete il collegamento Run-string dell'ultima esecuzione.

Nel diagramma del flusso di lavoro, individua l'DeployFrontendazione e scegli il link Visualizza app. Viene visualizzato il sito Web Mysfit.

Cerca il pegasus Mysfit chiamato Twilight Glitter. Nota il valore per l'età. Lo è6. Effettuerai una modifica al codice per aggiornare l'età.

Vai al tuo progetto.

Esegui una di queste operazioni:

• Nel riquadro di navigazione, scegli Codice, scegli Richieste pull, quindi scegli Crea richiesta pull.

• Nella home page del repository, scegli Altro, quindi scegli Crea richiesta pull.

• Nella pagina del progetto, scegli Crea richiesta pull.

Nel repository Source, assicurati che il repository di origine specificato sia quello che contiene il codice commesso. Questa opzione appare solo se non hai creato la pull request dalla pagina principale del repository.

Nel ramo di destinazione, scegli il ramo in cui unire il codice dopo averlo esaminato.

Nel ramo di origine, scegli il ramo che contiene il codice commesso.

In Pull request title, inserisci un titolo che aiuti gli altri utenti a capire cosa deve essere esaminato e perché.

(Facoltativo) Nella descrizione della richiesta Pull, fornisci informazioni come un link ai problemi o una descrizione delle modifiche.

(Facoltativo) In Problemi, scegli Problemi di collegamento, quindi scegli un problema dall'elenco o inserisci il relativo ID. Per scollegare un problema, scegli l'icona di scollegamento.

(Facoltativo) In Revisori obbligatori, scegli Aggiungi revisori richiesti. Scegli dall'elenco dei membri del progetto per aggiungerli. I revisori obbligatori devono approvare le modifiche prima che la pull request possa essere unita al ramo di destinazione.

(Facoltativo) In Revisori opzionali, scegli Aggiungi revisori opzionali. Scegli dall'elenco dei membri del progetto per aggiungerli. I revisori opzionali non devono approvare le modifiche come requisito prima che la pull request possa essere unita al ramo di destinazione.

Esamina le differenze tra le filiali. La differenza mostrata in una pull request è rappresentata dalle modifiche tra la revisione nel ramo di origine e la base di unione, che è l'head commit del ramo di destinazione al momento della creazione della pull request. Se non viene visualizzata alcuna modifica, i rami potrebbero essere identici oppure potresti aver scelto lo stesso ramo sia per l'origine che per la destinazione.

Quando sei sicuro che la pull request contenga il codice e le modifiche che desideri rivedere, scegli Crea.

Passa al tuo progetto di applicazione moderna.

Nella pagina del progetto, in Open pull request, scegli la pull request che desideri unire. Se non vedi la pull request, scegli Visualizza tutto e poi selezionala dall'elenco. Selezionare Merge (Unisci).

Scegli tra le strategie di unione disponibili per la pull request. Facoltativamente, seleziona o deseleziona l'opzione per eliminare il ramo di origine dopo aver unito la pull request, quindi scegli Merge.

Nel riquadro di navigazione, scegli CI/CD, quindi scegli Flussi di lavoro.

In Flussi di lavoro, in, espandi Esecuzioni ApplicationDeploymentPipelinerecenti. Puoi vedere il flusso di lavoro eseguito avviato dal merge commit. Facoltativamente, sceglilo per vedere l'avanzamento dell'esecuzione.

Al termine dell'esecuzione, ricarica l'URL che hai visitato in precedenza. Visualizza il pegaso per verificare che l'età sia cambiata.

Vai al tuo progetto.

Nel riquadro di navigazione, scegli Problemi.

Inserisci rag-and-drop il problema nella colonna Fine.

Vai al tuo progetto, quindi scegli Impostazioni progetto.

Scegli la scheda Generale.

Sotto il nome del progetto, scegli Elimina progetto.

Accedi AWS Management Console con lo stesso account che hai aggiunto al tuo CodeCatalyst spazio.

Vai al AWS CloudFormationservizio.

Elimina lo stack di stringhe mysfits.

Elimina lo stack di stringhe development-mysfits.

Scegliete (ma non eliminate) lo stack CDKToolkit. Scegliere la scheda Resources (Risorse). Scegli il StagingBucketlink ed elimina il bucket e il contenuto del bucket in Amazon S3.

(Facoltativo) Eliminare lo stack CDKToolkit.