Partie 3 : Utilisons Azure DevOps pour modifier et déployer notre code

Vous avez réussi à déployer votre application, il faut maintenant la personnaliser. Avant d’en arriver là, il faut se poser les questions suivantes :

• Où est-ce que je vais stocker mon code ?
• Comment déployer mon code sur Azure ?

C’est dans cet article que nous allons répondre à ces questions.

Sommaire de la troisième partie

---

Créer une organisation

Rendez-vous sur la page de connexion d’Azure Devops en cliquant sur le lien puis connectez vous avec votre compte Azure.

Renseignez les informations jusqu’à arriver sur cette page :

Cliquez sur « Créer l’organisation » pour arriver jusqu’à cette page. Donnez un nom à votre organisation.

Puis créez le projet qui correspond à votre web app.

Bravo, vous avez créé votre organisation et créé votre projet sur Azure DevOps ! C’est ici que le code de votre application se trouvera.

Initialisons notre projet en cliquant sur « Repos » dans le menu de gauche, puis sur branche. Cliquez ensuite sur le bouton « initialize ». La branche Master est crée, nous sommes maintenant prêt pour la suite.

Note : une fois que votre organisation est crée, vous pourrez créer par la suite d’autre projets. Pas besoin de faire une organisation par projet.

Pour retrouver l’espace de votre organisation, voici comment est formatée l’url : https://dev.azure.com/{monorganisation}.

---

Lier ma web app à mon organisation

Rendez vous sur le portail Azure (https://portal.azure.com/) et retrouvez votre web app. Soit en recherchant le nom directement dans la barre de recherche en haut, soit en allant dans « Resource groups » puis dans « RG-{CeQueVousAvezMis}-TEST ». L’icône de la web app est une petite planète bleue.

Une fois que vous êtes sur le panel de contrôle de votre web app, cliquez sur « Deployment Center » à gauche, dans le menu.

Nous allons sélectionner Azure Repos, qui se trouve dans la catégorie Continuous Deployment (CI / CD). Cliquez sur continuer.

Sélectionnez Azure pipeline. Cliquez sur continuer.

Dernière étape, la configuration.

Sélectionnez votre organisation, votre projet, le repository et la branche (master normalement).
Nous allons déployer une application NodeJS et nous utiliserons Express par la suite. Cliquez sur suivant pour terminer le processus.

Qu’est-ce que nous venons de faire ?

Nous avons lié la ressource Azure à notre organisation / projet / repos Azure Devops. Une « pipeline » a même été créée automatiquement ! En passant par le Deployment Center, tout a été automatisé. Ce qui veut dire que lorsque vous pousserez une modification sur votre repos, une build sera faite. A partir de cette build, le déploiement se fera automatiquement sur votre serveur avec la dernière version de votre code ! Top non ?
Aujourd’hui vous n’avez qu’un serveur, mais plus tard, si vous avez des serveurs DEV/INT/PREPROD/PROD, vous pourrez déployer sur le serveur de votre choix. Bon, il est vrai que tester c’est douter, mais je vous conseille tout de même de tester sur le serveur de DEV plutôt qu’en production !

Je vous présenterai ce qui a été automatiquement créé dans l’article d’après.

---

Créer une application avec ExpressJS et la déployer avec Azure Devops

Ouvrez Visual Studio Code puis connectez vous (CTRL SHIFT P puis ‘Azure Sign In’).

Rendez-vous dans le repos que nous avons créé, dans Azure Devops.

Nous avons plusieurs façons de récupérer notre projet :

• Ligne de commande
• En passant par l’IDE

Nous allons faire simple et nous allons cliquer en haut à droite sur « Clone ». Cliquez ensuite sur « Clone in VS Code ». Choisissez l’endroit où vous souhaitez cloner votre projet. Avec VS Code, rendez vous dans le dossier où vous avez cloné le projet. Vous devriez voir ceci :

Si vous ne l’avez pas déjà, installez NodeJS (https://nodejs.org/en/).

Dans VS Code, faites un clique droit sur le dossier principal de votre application puis cliquez sur « Open in integrated terminal ».

Un terminal intégré à VS Code s’est automatiquement ouvert au dossier racine de votre projet. Cela va nous permettre d’initialiser le projet. Par défaut il se situe en bas à droite.

En supposant que NodeJS est bien installé, exécutez la commande suivante pour créer le fichier package.json :

npm init

Cette commande va nous demander un plusieurs informations, appuyez simplement sur ENTRÉE pour sélectionner les valeurs par défaut SAUF pour celle-ci :

entry point: (index.js)

Renseignez plutôt « server.js ». C’est très important pour le déploiement, je rentrerai dans les détails dans le prochain article.

Une fois terminé, le fichier package.json est créé.

Toujours dans le terminal, utilisez cette commande pour installer ExpressJS :

npm install express --save

Une fois l’installation terminée, créez un fichier server.js à la racine du projet. Insérez le code suivant dans le fichier :

const express = require('express')
const app = express()
const port = process.env.PORT || 5000

app.get('/', (req, res) => {
  res.send('My first web app on Azure !!')
})

app.post('/', (req, res) => {
  res.send('Hello ! You are on my first web app !!')
})

app.listen(port, () => {
    console.log(`My first web app on Azure !!`)
})

Créez un fichier .gitignore à la racine de votre projet puis insérez les lignes suivantes :

.gitignore
node_modules

Allez ensuite dans l’onglet Souce Control pour envoyer nos modifications. Validez en appuyant sur l’icone « check ». Puis faites un push.

Attendez une ou deux minutes pour que la build se fasse et que le déploiement se fasse. Rendez-vous maintenant avec votre navigateur sur votre web app pour constater le résultat :

Vous pouvez utiliser également Postman et faire une simple requête POST :

Félicitation, vous avez votre web application disponible sur Azure tout en travaillant avec une approche CI/CD. Vous pouvez maintenant faire évoluer votre application à votre convenance…

Dans le prochain article, je vais rentrer dans les détails de la configuration.

Partie 4 : https://gw-flamant.dev/commencer-le-developpement-azure-partie-4