Créer un pipeline CI/CD dans Azure Pipelines pour Node.js avec Azure DevOps Starter

Dans ce guide de démarrage rapide, vous allez créer une application web progressive NodeJS (PWA) à l’aide de GatsbyJS et de l’expérience simplifiée de création d’Azure DevOps Starter. Une fois terminé, vous disposez d’un pipeline d’intégration continue (CI) et de livraison continue (CD) pour votre PWA dans Azure Pipelines. Azure DevOps Starter configure ce dont vous avez besoin pour développer, déployer et surveiller.

Conditions préalables

Un compte Azure avec un abonnement actif. Créez un compte gratuitement.
Une organisation Azure DevOps .

DevOps Starter crée un pipeline CI/CD dans Azure Pipelines. Vous pouvez créer une organisation Azure DevOps ou utiliser une organisation existante. DevOps Starter crée également des ressources Azure dans l’abonnement Azure de votre choix.

Connectez-vous au portail Azure et, dans le volet gauche, sélectionnez Créer une ressource.
Dans la zone de recherche, tapez DevOps Starter, puis sélectionnez. Cliquez sur Ajouter pour en créer un.

Sélectionner un exemple d’application et un service Azure

Sélectionnez l’exemple d’application Node.js.
L’exemple de framework par défaut est Express.js. Remplacez la sélection par Application de Node.js simple , puis sélectionnez Suivant.
Les cibles de déploiement disponibles dans cette étape sont dictées par l’infrastructure d’application sélectionnée à l’étape 2. Dans cet exemple, Windows Web App est la cible de déploiement par défaut. Laissez l’application web pour conteneurs définie et sélectionnez Suivant.

Configurer un nom de projet et un abonnement Azure

Dans la dernière étape du flux de travail de création DevOps Starter, vous attribuez un nom de projet, sélectionnez un abonnement Azure, puis sélectionnez Terminé.
Une page récapitulative s’affiche lorsque votre projet est généré et que votre application est déployée sur Azure. Après une courte période, un projet est créé dans votre organisation Azure DevOps qui inclut un dépôt Git, un tableau Kanban, un pipeline de déploiement, des plans de test et les artefacts requis par votre application.

Gestion de votre projet

Accédez à Toutes les ressources et recherchez votre DevOps Starter. Sélectionnez votre DevOps Starter.
Vous êtes dirigé vers un tableau de bord qui fournit une visibilité sur la page d’accueil de votre projet, le référentiel de code, le pipeline CI/CD et un lien vers votre application en cours d’exécution. Sélectionnez la page d’accueil du projet pour afficher votre application dans Azure DevOps et, dans un autre onglet de navigateur, sélectionnez le point de terminaison d’application pour afficher l’exemple d’application en direct. Nous modifions cet exemple ultérieurement pour utiliser la PWA générée par GatsbyJS.
À partir de votre projet Azure DevOps, vous pouvez inviter les membres de l’équipe à collaborer et à établir un tableau Kanban pour commencer à suivre votre travail. Pour plus d’informations, consultez ici.

Vue d’ensemble d’Azure DevOps

Clonez le dépôt et installez votre PWA Gatsby

DevOps Starter crée un dépôt Git dans Azure Repos ou GitHub. Cet exemple a créé un dépôt Azure. L’étape suivante consiste à cloner le dépôt et à apporter des modifications.

Sélectionnez Repos dans votre projet DevOps , puis cliquez sur Cloner. Il existe différents mécanismes pour cloner le dépôt Git sur votre bureau. Choisissez celui qui correspond à votre expérience de développement.
Une fois le dépôt cloné sur votre bureau, apportez des modifications au modèle de démarrage. Commencez par installer l’interface CLI GatsbyJS à partir de votre terminal.
```
 npm install -g gatsby
```

À partir du terminal, accédez à la racine de votre dépôt. Il doit contenir trois dossiers qui ressemblent à ceci :

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        2/23/2020  10:42 PM                Application
d-----        2/23/2020   3:05 PM                ArmTemplates
d-----        2/23/2020   3:05 PM                Tests

Nous ne voulons pas tous les fichiers du dossier Application, car nous allons le remplacer par un démarrage Gatsby. Exécutez les commandes suivantes, en séquence, pour la découper.
```
cp .\Application\Dockerfile .
rmdir Application
```

Utilisez l’interface CLI Gatsby pour générer un exemple de PWA. Exécutez gatsby new à partir du terminal pour commencer l’Assistant PWA et sélectionnez gatsby-starter-blog comme modèle de démarrage. Il doit ressembler à cet exemple :

c:\myproject> gatsby new
√ What is your project called? ... my-gatsby-project
? What starter would you like to use? » - Use arrow-keys. Return to submit.
    gatsby-starter-default
    gatsby-starter-hello-world
>   gatsby-starter-blog
    (Use a different starter)

Vous disposez maintenant d’un dossier nommé my-gatsby-project. Renommez-le Application et copiez-le Dockerfile dans celui-ci.
```
mv my-gatsby-project Application
mv Dockerfile Application
```
Dans votre éditeur favori, ouvrez le fichier Dockerfile et remplacez la première ligne par FROM node:8FROM node:12. Cette modification garantit que votre conteneur utilise Node.js version 12.x au lieu de la version 8.x. GatsbyJS nécessite des versions plus modernes de Node.js.
Ensuite, ouvrez le fichier package.json dans le dossier Application et modifiez le champ scripts pour vous assurer que vos serveurs de développement et de production écoutent toutes les interfaces réseau disponibles (par exemple, 0.0.0.0)) et le port 80. Sans ces paramètres, le service d’application conteneur ne peut pas acheminer le trafic vers votre application Node.js s’exécutant à l’intérieur de votre conteneur. Le scripts champ doit ressembler à ce qui se trouve ci-dessous. Plus précisément, vous souhaitez modifier les cibles develop, serve, et start de leurs valeurs par défaut.
```
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop  -H 0.0.0.0 -p 80",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run serve",
    "serve": "npm run build && gatsby serve -H 0.0.0.0 -p 80",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  }
```

Modifiez vos pipelines de CI/CD

Avant de valider le code dans la section précédente, apportez des modifications à vos pipelines de build et de mise en production. Modifiez votre pipeline de build et mettez à jour la tâche Node pour utiliser Node.js version 12.x. Définissez le champ version de la tâche sur 1.x et le champ Version sur 12.x.
Dans ce guide de démarrage rapide, nous ne créons pas de tests unitaires et nous désactivons ces étapes dans notre pipeline de build. Lorsque vous écrivez des tests, vous pouvez réactiver ces étapes. Cliquez avec le bouton droit pour sélectionner les tâches étiquetées Installer les dépendances de test et exécuter des tests unitaires et les désactiver.
Modifiez votre pipeline de mise en production.
Comme avec le pipeline de build, modifiez la tâche Node pour utiliser 12.x et désactivez les deux tâches de test. Votre version doit ressembler à cette capture d’écran.
Sur le côté gauche du navigateur, accédez au fichier views/index.pug .
Sélectionnez Modifier, puis apportez une modification au titre h2. Par exemple, entrez Bien démarrer immédiatement avec Azure DevOps Starter ou apportez une autre modification.
Sélectionnez Valider, puis enregistrez vos modifications.
Dans votre navigateur, accédez au tableau de bord DevOps Starter.
Vous devriez maintenant voir une compilation en cours. Les modifications que vous avez apportées sont générées et déployées automatiquement via un pipeline CI/CD.

Valider vos modifications et examiner le pipeline AZURE CI/CD

Dans les deux étapes précédentes, vous avez ajouté une PWA générée par Gatsby à votre dépôt Git et modifié vos pipelines pour générer et déployer le code. Nous pouvons valider le code et observer sa progression dans le pipeline de génération et de mise en production.

À partir de la racine du dépôt Git de votre projet dans un terminal, exécutez les commandes suivantes pour envoyer votre code à votre projet Azure DevOps :
```
git add .
git commit -m "My first Gatsby PWA"
git push
```
Une compilation est démarrée dès que git push est terminé. Vous pouvez suivre la progression du tableau de bord Azure DevOps.
Après quelques minutes, vos pipelines de build et de mise en production devraient se terminer et votre PWA devrait être déployée sur un conteneur. Cliquez sur le lien du point de terminaison d’application à partir du tableau de bord ci-dessus et vous devriez voir un modèle de projet Gatsby pour blogs.

Nettoyer les ressources

Vous pouvez supprimer Azure App Service et d’autres ressources associées que vous avez créées lorsque vous n’avez plus besoin des ressources. Utilisez la fonctionnalité Supprimer dans le tableau de bord DevOps Starter.

Étapes suivantes

Lorsque vous configurez votre processus CI/CD, les pipelines de génération et de mise en production sont créés automatiquement. Vous pouvez modifier ces pipelines de build et de mise en production pour répondre aux besoins de votre équipe. Pour en savoir plus sur le pipeline CI/CD, consultez :

Personnaliser le processus CD

Last updated on 2020-03-24