Tutoriel : Création d'un projet avec le plan d'application Web moderne à trois niveaux

Ouvrez la CodeCatalyst console à l'adresse https://codecatalyst.aws/.

Dans la CodeCatalyst console, accédez à l'espace dans lequel vous souhaitez créer un projet.

Sélectionnez Create a project (Créer un projet).

Choisissez Commencer par un plan.

Dans la barre de recherche, saisissez modern.

Sélectionnez le plan d'application Web moderne à trois niveaux, puis cliquez sur Suivant.

Dans Nommer votre projet, entrez un nom de projet. Par exemple :

MyExampleProject.

Dans Compte, choisissez celui Compte AWS que vous avez ajouté lors de votre inscription. Le plan installera des ressources dans ce compte.

Dans Rôle de déploiement, choisissez le rôle que vous avez ajouté lors de votre inscription. Par exemple, sélectionnez CodeCatalystWorkflowDevelopmentRole-spaceName.

Si aucun rôle n'est répertorié, ajoutez-en un. Pour ajouter un rôle, choisissez Ajouter un rôle IAM et ajoutez le rôle à votre Compte AWS. Pour plus d’informations, consultez Permettre l'accès aux AWS ressources avec Connected Comptes AWS.

Dans Compute platform, choisissez Lambda.

Dans l'option d'hébergement frontal, choisissez Amplify Hosting. Pour plus d'informations AWS Amplify, voir Qu'est-ce que l' AWS Amplify hébergement ? dans le guide de AWS Amplify l'utilisateur.

Dans Région de déploiement, entrez le code de région dans Région AWS lequel vous souhaitez que le plan pilote déploie l'application Mysfits et les ressources de support. Pour obtenir la liste des codes de région, consultez la section Points de terminaison régionaux dans le Références générales AWS.

Dans Nom de l'application, laissez la valeur par défaut demysfitsstring.

(Facultatif) Sous Générer un aperçu du projet, choisissez Afficher le code pour prévisualiser les fichiers source que le plan va installer. Choisissez Afficher le flux de travail pour prévisualiser les fichiers de définition du flux de travail CI/CD que le plan va installer. L'aperçu est mis à jour de manière dynamique en fonction de vos sélections.

Sélectionnez Create a project (Créer un projet).

Accédez au projet auquel vous souhaitez inviter des utilisateurs.

Dans le volet de navigation, sélectionnez Paramètres du projet.

Dans l'onglet Membres, choisissez Inviter.

Entrez les adresses e-mail des personnes que vous souhaitez inviter en tant qu'utilisateurs de votre projet. Vous pouvez saisir plusieurs adresses e-mail séparées par un espace ou une virgule. Vous pouvez également choisir parmi les membres de votre espace qui ne sont pas membres du projet.

Choisissez le rôle de l'utilisateur.

Lorsque vous avez terminé d'ajouter des utilisateurs, choisissez Inviter.

Dans le volet de navigation, sélectionnez Problèmes.

Choisissez Créer un problème.

Dans Titre du numéro, saisissez le nom du problème. Fournissez éventuellement une description du problème. Dans cet exemple, utilisez make a change in the src/mysfit_data.json file.

Choisissez la priorité, l'estimation, le statut et les étiquettes. Sous Personne assignée, choisissez +Ajouter moi pour vous attribuer le problème.

Choisissez Créer un problème. Le problème est désormais visible sur le tableau. Choisissez la carte pour déplacer le problème vers la colonne En cours.

Accédez à votre projet, puis effectuez l'une des opérations suivantes :

• Sur la page de résumé de votre projet, choisissez le référentiel souhaité dans la liste, puis choisissez Afficher le référentiel.

• Dans le volet de navigation, choisissez Code, puis sélectionnez Référentiels sources. Dans Référentiels sources, choisissez le nom du référentiel dans la liste. Vous pouvez filtrer la liste des référentiels en saisissant une partie du nom du référentiel dans la barre de filtre.

Sur la page d'accueil du référentiel, consultez le contenu du référentiel et les informations sur les ressources associées, telles que le nombre de pull requests et les flux de travail. Par défaut, le contenu de la branche par défaut est affiché. Vous pouvez modifier l'affichage en choisissant une autre branche dans la liste déroulante.

Ouvrez la CodeCatalyst console à l'adresse https://codecatalyst.aws/.

Accédez au projet dans lequel vous souhaitez créer un environnement de développement.

Choisissez le nom du référentiel dans la liste des référentiels sources du projet. Dans le volet de navigation, vous pouvez également choisir Code, choisir Référentiels sources et choisir le référentiel pour lequel vous souhaitez créer un environnement de développement.

Sur la page d'accueil du référentiel, choisissez Create Dev Environment.

Choisissez un IDE compatible dans le menu déroulant. Pour plus d’informations, consultez Environnements de développement intégrés pris en charge pour les environnements de développement.

Choisissez le référentiel à cloner, choisissez Travailler dans une nouvelle branche, entrez le nom de la branche dans le champ Nom de la branche et choisissez une branche à partir de laquelle créer la nouvelle branche dans le menu déroulant Créer une branche depuis.

Ajoutez éventuellement un alias pour l'environnement de développement.

Vous pouvez éventuellement cliquer sur le bouton d'édition de la configuration de l'environnement de développement pour modifier la configuration de calcul, de stockage ou de temporisation de l'environnement de développement.

Choisissez Créer. Pendant la création de votre environnement de développement, la colonne d'état de l'environnement de développement affichera Démarrage, et la colonne d'état indiquera En cours d'exécution une fois l'environnement de développement créé. Un nouvel onglet s'ouvre avec votre environnement de développement dans l'IDE de votre choix. Vous pouvez modifier le code, valider et appliquer vos modifications.

Accédez à l'environnement de développement de votre projet. Dans AWS Cloud9, développez le menu de navigation latéral pour parcourir les fichiers. mysfitsDéveloppez src et ouvrezsrc/mysfit_data.json.

Dans le fichier, modifiez la valeur du "Age": champ de 6 à 12. Votre ligne doit ressembler à ce qui suit :

    {
        "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"
    },

Enregistrez le fichier.

Accédez au référentiel mysfits à l'aide de la cd /projects/mysfits commande.

Ajoutez, validez et publiez vos modifications à l'aide des commandes git add, git commit et git push.

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

Dans le volet de navigation de la CodeCatalyst console, choisissez CI/CD, puis Workflows.

La liste des flux de travail s'affiche. Il s'agit des flux de travail générés et lancés par le CodeCatalyst plan lorsque vous avez créé votre projet.

Observez la liste des flux de travail. Vous devriez en voir quatre :

Choisissez le ApplicationDeploymentPipelineflux de travail associé à la main branche, en bas. Ce flux de travail a été exécuté à l'aide du code source de la main branche.

Un diagramme de flux de travail apparaît. Le diagramme montre plusieurs blocs, chacun représentant une tâche ou une action. La plupart des actions sont organisées verticalement, les actions situées en haut étant exécutées avant celles situées en dessous. Les actions agencées côte à côte s'exécutent en parallèle. Les actions regroupées doivent toutes s'exécuter correctement avant que l'action située en dessous puisse démarrer.

Les principaux blocs sont les suivants :

Choisissez l'onglet Définition (en haut). Le fichier de définition du flux de travail apparaît sur la droite. Le fichier contient les sections importantes suivantes :

Choisissez l'onglet État le plus récent (en haut), puis choisissez une action dans le diagramme de flux de travail.

Sur la droite, choisissez l'onglet Configuration pour voir les paramètres de configuration utilisés par l'action lors de la dernière exécution. Chaque paramètre de configuration possède une propriété correspondante dans le fichier de définition du flux de travail.

Laissez la console ouverte et passez à la procédure suivante.

Choisissez l'onglet État le plus récent.

Dans le diagramme du flux de travail, choisissez l'DeployFrontendaction.

Attendez que l'action soit terminée. Surveillez que l'icône « En cours » ( ) soit remplacée par une icône « Succès » ( ).

Choisissez l'action build_backend.

Choisissez l'onglet Journaux et développez quelques sections pour afficher les messages du journal relatifs à ces étapes. Vous pouvez voir les messages relatifs à la configuration du backend.

Choisissez l'onglet Rapports, puis sélectionnez le backend-coverage.xml rapport. CodeCatalyst affiche le rapport associé. Le rapport indique les tests de couverture de code qui ont été exécutés et indique la proportion de lignes de code validées avec succès par les tests, par exemple 80 %.

Pour plus d'informations sur les rapports de test, consultezTests avec des flux de travail.

Laissez la CodeCatalyst console ouverte et passez à la procédure suivante.

Retournez au ApplicationDeploymentPipelineflux de travail et choisissez le lien Exécuter - chaîne de caractères de la dernière exécution.

Dans le diagramme du flux de travail, recherchez l'DeployFrontendaction et cliquez sur le lien Afficher l'application. Le site Web de Mysfit apparaît.

Recherchez le pégase Mysfit nommé Twilight Glitter. Notez la valeur correspondant à l'âge. C'est le cas6. Vous allez modifier le code pour mettre à jour l'âge.

Accédez à votre projet.

Effectuez l’une des actions suivantes :

• Dans le volet de navigation, choisissez Code, choisissez Pull requests, puis Create pull request.

• Sur la page d'accueil du référentiel, choisissez Plus, puis Create pull request.

• Sur la page du projet, choisissez Create pull request.

Dans le référentiel source, assurez-vous que le référentiel source spécifié est celui qui contient le code validé. Cette option n'apparaît que si vous n'avez pas créé la pull request depuis la page principale du dépôt.

Dans Branche de destination, choisissez la branche dans laquelle vous souhaitez fusionner le code une fois celui-ci révisé.

Dans Branche source, choisissez la branche qui contient le code validé.

Dans Titre de la demande d'extraction, entrez un titre qui aide les autres utilisateurs à comprendre ce qui doit être revu et pourquoi.

(Facultatif) Dans la description de la Pull request, fournissez des informations telles qu'un lien vers les problèmes ou une description de vos modifications.

(Facultatif) Dans Problèmes, choisissez Lier les problèmes, puis choisissez un problème dans la liste ou entrez son ID. Pour dissocier un problème, cliquez sur l'icône de dissociation.

(Facultatif) Dans Réviseurs obligatoires, sélectionnez Ajouter les réviseurs requis. Choisissez parmi la liste des membres du projet pour les ajouter. Les réviseurs requis doivent approuver les modifications avant que la pull request puisse être fusionnée dans la branche de destination.

(Facultatif) Dans Réviseurs facultatifs, sélectionnez Ajouter des réviseurs facultatifs. Choisissez parmi la liste des membres du projet pour les ajouter. Les réviseurs facultatifs n'ont pas à approuver les modifications comme condition préalable pour que la pull request puisse être fusionnée dans la branche de destination.

Passez en revue les différences entre les branches. La différence affichée dans une pull request réside dans les modifications entre la révision dans la branche source et la base de fusion, qui est le commit principal de la branche de destination au moment de la création de la pull request. Si aucune modification ne s'affiche, il se peut que les branches soient identiques ou que vous ayez choisi la même branche pour la source et pour la destination.

Lorsque vous êtes certain que la pull request contient le code et les modifications que vous souhaitez vérifier, choisissez Create.

Accédez à votre projet d'application moderne.

Sur la page du projet, sous Ouvrir les pull requests, choisissez la pull request que vous souhaitez fusionner. Si vous ne voyez pas la pull request, choisissez Afficher tout, puis choisissez-la dans la liste. Choisissez Merge (Fusionner).

Choisissez parmi les stratégies de fusion disponibles pour la pull request. Sélectionnez ou désélectionnez éventuellement l'option permettant de supprimer la branche source après avoir fusionné la pull request, puis choisissez Merge.

Dans le volet de navigation, choisissez CI/CD, puis Workflows.

Dans Workflows, dans ApplicationDeploymentPipeline, développez Recent runs. Vous pouvez voir le flux de travail lancé par le commit de fusion. Sélectionnez-le éventuellement pour suivre la progression de la course.

Une fois l'exécution terminée, rechargez l'URL que vous avez consultée plus tôt. Regardez le pégase pour vérifier que l'âge a changé.

Accédez à votre projet.

Dans le volet de navigation, sélectionnez Problèmes.

Ajoutez rag-and-drop le problème à la colonne Terminé.

Accédez à votre projet, puis sélectionnez Paramètres du projet.

Choisissez l'onglet Général.

Sous le nom du projet, choisissez Supprimer le projet.

Connectez-vous AWS Management Console avec le même compte que celui que vous avez ajouté à votre CodeCatalyst espace.

Va au AWS CloudFormationservice.

Supprimez la pile de chaînes mysfits.

Supprimez la pile de chaînes development-mysfits.

Choisissez (mais ne supprimez pas) la pile CDKToolkit. Sélectionnez l'onglet Ressources. Choisissez le StagingBucketlien, puis supprimez le compartiment et son contenu dans Amazon S3.

(Facultatif) Supprimez la pile CDKToolkit.