Exercice – Obtenir l’application exemple
Choisissez votre environnement de développement pour le module de formation.
- Environnement de développement local utilisant un agent hébergé par Microsoft
- Environnement de développement GitHub Codespaces utilisant un agent auto-hébergé.
Choisissez votre environnement de développement pour le module de formation
Préparez-vous à commencer la création d’un pipeline d’intégration continue (CI) avec Microsoft Azure Pipelines.
La première étape consiste à compiler et exécuter l’application web Space Game. Comprendre comment compiler un logiciel manuellement vous prépare à reproduire ce processus dans le pipeline.
Mara va faire exactement cela, et en suivant les procédures, vous pouvez faire la même chose.
Créer un jeton d’accès personnel Azure DevOps
Connectez-vous à votre organisation via https://dev.azure.com/{votreorganisation}.
Si vous n’avez pas encore d’organisation Azure DevOps, créez une organisation gratuite avant de commencer.
Après vous être connecté, si vous avez plusieurs organisations, choisissez Azure DevOps et accédez à l’organisation que vous prévoyez d’utiliser pour compléter ce module.
Dans cet exemple, le nom de l’organisation est fabrikam.
Depuis votre page d’accueil, ouvrez les paramètres utilisateur et sélectionnez Jetons d’accès personnels.
Sélectionnez + Nouveau jeton.
Nommez votre jeton avec le nom de votre choix.
Ce jeton sera utilisé lorsque Codespace enregistrera son agent auprès de votre organisation Azure DevOps, donc vous pouvez conserver la date d’expiration par défaut.
Choisissez Définition personnalisée, puis sélectionnez Afficher toutes les étendues.
6.Sélectionnez l’étendue suivante : Pools d’agents (Lecture et gestion), puis cliquez sur Créer.
Lorsque vous avez terminé, copiez le jeton et conservez-le dans un endroit sécurisé.
Pour votre sécurité, il ne sera plus affiché par la suite.
⚠️ Avertissement
Traitez et utilisez un jeton d’accès personnel (PAT) comme votre mot de passe et gardez-le secret.
Créer un fork
La première étape pour utiliser un projet dans Git consiste à créer un fork afin de pouvoir travailler avec les fichiers sources et les modifier. Un fork est une copie d’un dépôt GitHub. Cette copie existe dans votre compte et vous permet d’apporter toutes les modifications souhaitées sans affecter le projet original.
Bien que vous puissiez proposer des modifications au projet original, dans cette leçon, vous travaillez avec le projet web Space Game comme s’il s’agissait du projet original détenu par Mara et son équipe.
Remarque
Si vous avez déjà forké ce dépôt, par exemple si vous avez déjà terminé ce module ou un autre module de formation Tailspin Toys, nous vous recommandons de supprimer votre fork et d’en créer un nouveau en suivant les étapes ci-dessous.
Si vous ne souhaitez pas supprimer votre fork, assurez-vous de le synchroniser.
Créons un fork du projet web Space Game dans votre compte GitHub :
- Ouvrez un navigateur web, allez sur GitHub et connectez-vous.
- Accédez au dépôt du projet web Space Game.
- Cliquez sur Fork.
4. Pour forker le dépôt dans votre compte, suivez les instructions.
Configurer les secrets pour un agent auto-hébergé
Avant de créer votre Codespace, vous devez créer plusieurs secrets qui permettent à votre agent Azure DevOps auto-hébergé de fonctionner correctement. En environnement de production, il n’est pas recommandé d’utiliser un agent auto-hébergé dans GitHub Codespaces. Cependant, comme votre équipe utilise Codespaces pour les tests, c’est une bonne solution temporaire pendant la création de vos pipelines.
Étapes à suivre :
- Allez dans votre dépôt GitHub forké.
- Sélectionnez Paramètres > Secrets et variables > Codespaces.
Créer les secrets du dépôt Codespaces suivants
| Nom | Valeur |
|---|---|
| ADO_ORG | Nom de l’organisation Azure DevOps que vous utilisez pour compléter ce module. Dans cet exemple, fabrikam est le nom de l’organisation. Ce nom doit être identique à celui utilisé lors de la création de votre jeton d’accès personnel (PAT) à l’étape précédente. |
| ADO_PAT | Le jeton d’accès personnel (Personal Access Token) que vous avez créé à l’étape précédente. |
💡 Astuce
Dans ce module de formation, votre agent est affecté au pool d’agents par défaut (Default agent pool).
Si vous ne souhaitez pas exécuter votre agent dans ce pool (par exemple, si vous utilisez votre environnement Azure DevOps de production et que d’autres agents y sont déjà présents), vous pouvez créer un secret nommé ADO_POOL_NAME et spécifier le nom du pool d’agents à utiliser.
Si ce secret n’est pas défini, le pool Default sera utilisé par défaut.
Configurer Codespaces
Ensuite, vous configurez Codespaces afin de pouvoir :
- construire le site web,
- travailler avec les fichiers sources,
- et exécuter votre pipeline à l’aide d’un agent auto-hébergé.
Étapes à suivre :
- Dans votre dépôt GitHub forké, sélectionnez Code.
- Sélectionnez à nouveau Code, puis l’onglet Codespaces.
- Cliquez sur + pour créer un nouveau Codespace.
Attendez que votre Codespace soit construit
Cette construction peut prendre quelques instants, mais vous n’aurez à la faire qu’une seule fois dans cette étape du module de formation.
Une fois la construction terminée, vous serez redirigé vers une version en ligne de Visual Studio Code.
Votre Codespace dispose d’une installation fraîche de Visual Studio Code, similaire à une installation locale sur votre machine.
Lors du premier démarrage du Codespace, Visual Studio Code en ligne peut vous demander certaines configurations ou préférences.
Vous pouvez choisir les options qui correspondent à votre style d’utilisation de Visual Studio Code.
Définir le dépôt distant « upstream »
Un dépôt distant est un dépôt Git où les membres de l’équipe collaborent (comme un dépôt sur GitHub).
Nous allons lister vos dépôts distants et en ajouter un qui pointe vers la copie du dépôt détenue par Microsoft, afin que vous puissiez récupérer le code d’exemple le plus récent.
Étapes à suivre :
- Dans l’éditeur en ligne Visual Studio Code, ouvrez la fenêtre du terminal.
- Choisissez bash dans le menu à droite.
Pour lister vos dépôts distants, exécutez la commande suivante :
git remote -vVous avez à la fois un accès de récupération (téléchargement) et de poussée (téléversement) à votre dépôt :
origin https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin https://github.com/username/mslearn-tailspin-spacegame-web.git (push)Lorsque vous forkez du code depuis un autre dépôt, il est courant de nommer le dépôt distant original (celui depuis lequel vous avez forké) upstream.
3.Pour créer un dépôt distant nommé upstream qui pointe vers le dépôt Microsoft, exécutez la commande suivante :
git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git4.Exécutez à nouveau la commande git remote pour voir les changements :
git remote -vVous voyez que vous avez toujours un accès de récupération (téléchargement) et de poussée (téléversement) à votre dépôt.
Vous avez également maintenant un accès de récupération et de poussée au dépôt Microsoft :
origin https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)Construire et exécuter l’application web
Dans l’éditeur en ligne Visual Studio Code, accédez à la fenêtre du terminal,
et pour construire l’application, exécutez la commande suivante :
dotnet build --configuration ReleaseDepuis la fenêtre du terminal, pour exécuter l’application, lancez la commande suivante :
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.WebLes fichiers de solution .NET peuvent contenir plusieurs projets.
L’argument --project permet de spécifier le projet à utiliser pour l’application web Space Game.
Vérifier que l’application fonctionne
En mode développement, le site web Space Game est configuré pour s’exécuter sur le port 5000.
Vous verrez un nouveau message dans l’éditeur Visual Studio Code.
Votre application, en cours d’exécution sur le port 5000, est maintenant disponible.
Sélectionnez Open in Browser (Ouvrir dans le navigateur) pour accéder à l’application en cours d’exécution.
Dans la nouvelle fenêtre du navigateur, vous devriez voir le site web Space Game :
Vous pouvez interagir avec la page, y compris avec le tableau des scores.
Lorsque vous sélectionnez le nom d’un joueur, vous voyez les détails concernant ce joueur :
Lorsque vous avez terminé, retournez à la fenêtre du terminal, et pour arrêter l’application en cours d’exécution, appuyez sur Ctrl + C.
