Le Post Infeeny

Les articles des consultants et experts Infeeny

Compiler et minifier les fichiers .less en fichier min.css

Objectif

L’objectif de cet article est d’ajouter une tâche Gulp à vos build définis sur VSTS pour compiler et minifier les fichiers .less.

Prérequis

  • Un projet VSTS avec une application web ASP.NET.
  • Une définition de build pour l’application ASP.NET du projet
  • Installer Node.js :
    • Sur le poste de développement pour définir la tâche Gulp
    • Sur le serveur de build, pour exécuter la tâche Gulp

Création de la tâche Gulp

La création de la tâche Gulp pour compiler et minimiser les fichier .less en fichier .min.css, est faite sur un poste de développement au sein de visual studio 2015.

Poste de développement

Prérequis

En plus de l’utilisation de visual studio 2015, il faut installer :

  • Node.js : pour la gestion et l’exécution des package npm. A télécharger ici
  • Task Runner Explorer: Il s’agit d’une extension pour Visual Studio afin de tester et gérer les tâches Gulp. A télécharger ici

Configurer gulp pour l’application web

Il faut ajouter au projet de l’application web 2 fichiers afin de configurer gulp :

  • gulpfile.js : contient les définitions des tâches Gulp à exécuter
  • package.json : contient les listes des packages nécessaire à l’exécution des tâches définies dans le fichiers précédents

Script de la tâche gulp « less » pour compiler et minifier les fichiers .less en .min.css

var gulp = require('gulp');
var less = require('gulp-less');
var path = require('path');
var watch = require("gulp-watch");
var rename = require('gulp-rename');
var minifyCSS = require('gulp-minify-css');
var plumber = require('gulp-plumber');

gulp.task('less', function () {
    return gulp.src('./Content/**/*.less')
    .pipe(plumber())
      .pipe(less({
          paths: [path.join(__dirname, 'less', 'includes')]
      }).on('error', function (err) {
          console.log(err);
      }))
      .pipe(minifyCSS().on('error', function(err) {
            console.log(err);
       }))
        .pipe(rename({suffix: '.min'}))
      .pipe(gulp.dest('./content/'));
});
Et ci-dessous le fichier de configuration package.json associé
{
  "name": "Mon projet",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-less": "^3.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-watch": "^4.3.11",
    "gulp-plumber": "^1.1.0"
  }
}

 Tester la tâche Gulp

Sous Visual Studio :

  • Cliquez droit sur le fichier gulpfile.js
  • Dans « l’explorateur de solution »cliquez sur « Task Runner Explorer »Menu_Task_runner.png
  • Dans la fenêtre de « Task Runner Explorer », Cliquez droit sur la tache « install » du package.json
  • Cliquez sur « Run »pour installer les packages en local à la solutionRun_Task_Install.png
  • Dans la fenêtre de « Task Runner Explorer », Cliquez droit sur la tache « less »
  • Cliquez sur « Run »pour exécuter le test de la tâcheRun_Task_runner

Ajouter la tâche au build VSTS

Prérequis sur le serveur de build

Le serveur de build doit contenir tout le nécessaire à la compilation de la solution. Node.js doit donc être installé sur le serveur de build. A télécharger ici

Modification de la définition du build VSTS

  • Connectez sur VSTS
  • Allez dans « Build & Realease »/Builds
  • Editez la définition du build pour lequel vous souhaitez ajouter la tâche Gulp
  • Ajoutez une tache « NPM »Add_Task_Npm
  • Configurez cette tache afin d’installer les package npm nécessaire à l’exécution sur la tâche gulp précédemment créée: « less »
    • Working folder : répertoire du projet contenant le fichier package.json
    • npm command : install
    • arguments : -configConfig_Task_Npm.png
  • Ajoutez une tâche « Gulp » afin d’exécuter la tache « less »Add_Task_Gulp
  • Configurez cette tâche afin d’exécuter la tâche gulp précédemment créée: « less »
    • Gulp File Path : Chemin du répertoire du projet contenant le fichier gulpfile.js
    • Gulp Task(s) : nom de la tâche à exécuter
    • Arguments : Arguments nécessaire à la tâche
    • Working Directory : Chemin du répertoire de travail, comme on travaille avec les packages npm définis pour le projet, il s’agit du répertoire du projetConfig_Task_Gulp.png
  • Cliquez sur « Save »

Maintenant votre build VSTS exécute une tâche Gulp pour compiler et minifier les fichiers .less !

 

Mettre en place du déploiement continue en local depuis VSTS

Objectif

L’objectif de cet article est de vous présenter comment mettre en place une chaine de déploiement continue sur un serveur IIS local, hébergé sur votre réseau, à partir de code source stocké dans Visual Studio Team System.

Contexte

Vous stockez  sur VSTS les code sources de vos différents projets applicatifs, mais vous aimeriez mettre en place un chaine de déploiement continue sur vos propres serveurs OnPremise n’ayant pas accès à internet à partir du code source contenu dans votre environnement VSTS.

La solution est de passer par un serveur build intermédiaire qui effectuera aussi le déploiement en local. Ce dernier  aura donc un accès à VSTS et au serveur cible IIS hébergé dans le réseau interne.

VSTS_BuildInterne

Serveur de Build

Nous avons utilisé dans notre cas un serveur de Build avec Windows Server 2012 R2. Mais il est possible d’utiliser le poste de développement en guise de serveur de Build, à condition de respecter les prérequis suivant :

 

L’environnement de développement doit être installé sur le serveur de build et l’agent de build, afin que celui-ci puisse effectuer la compilation du code source contenu dans le VSTS.

Installation et Configuration

Environnement de développement

Il est préférable d’installer et de configurer l’environnement de développement avant de configurer l’agent de build, car ce dernier détecte automatiquement l’environnement du serveur lorsqu’il se connecte à VSTS.

Dans notre cas nous avons installé :

  • Visual Studio 2015 Enterprise, version minimum recommandée
  • NodeJs pour la compilation des less avec gulp
  • Framework 4.6.2

Agent de build

Prérequis de sécurité

Pour installer et configurer l’agent de build, utiliser un compte qui soit à la fois Administrateur du Serveur de build et qui soit administrateur dans VSTS.

Authentification avec un « Personal Access Tokens »
  • Connectez vous sur votre VSTS avec le compte administrateur que vous souhaitez utiliser
  • Ouvrez le profil du compte
  • Allez dans sécurité

PAT_1

  • Allez dans Personal Acces Tokens
  • Cliquez sur PAT_2
  • Cochez seulement le scope Agent Pools (Read, manage), et veillez à laisser les autres décoché

PAT_3.png

  • Cliquez ensuite sur PAT_4

PAT_5

  • Copiez le token ainsi obtenu

Note : Veillez à conserver précieusement le token généré, il sera utile pour configurer et supprimer l’agent.

Installation

Pour installer l’agent sur le serveur de build :

  • Connectez vous sur le serveur de build, avec un compte administrateur
  • Depuis le serveur, connectez vous sur votre VSTS avec un compte administrateur.
  • Allez dans Settings\Agent Pools
  • Cliquez sur  DownLoadAgnet

Une fenêtre contenant les commandes à effectuer pour installer sur différent OS s’ouvre.

DownLoadAgent_2

Lancer le téléchargement à la fin de celui-ci exécuter les commandes PowerShell du bloc Create Agent. Ceci décompressera le zip précédemment téléchargé dans le répertoire C:\agent.

Configuration

Création du pool

Lors de la configuration de l’agent de build, nous allons le rattacher à un pool que nous avons spécialement créé :

  • Connectez vous sur votre VSTS avec un compte administrateur.
  • Allez dans Settings\Agent Pools
  • Cliquez sur « New Pool… » New_Pool
  • Dans la fenêtre de saisie, entrez le nom du nouveau pool : « Interne »

Create_Pool

Agent de build

Nous pouvons passer, maintenant, à la configuration de l’agent de build :

  • Dans la console PowerShell  en tant qu’administrateur, placez vous dans le répertoire où a été installé l’agent
  • Exécuter la commande :Configuration_agent_1

Un assistant de configuration en ligne de commande PowerShell démarre :

Connexion à VSTS :

Configuration_agent_Connection_PS_3
  • Saisissez l’URL VSTS : https://{your-account}.visualstudio.com
  • Sélectionnez le type authentification PAT (précédemment configuré avec le compte que vous utilisé)
  • Saisissez le jeton précédemment généré

Inscription de l’agent sur VSTS :

Configuration_agent_Inscription_PS_4

 

  • Saisissez le nom du pool d’agent précédent créé : Interne
  • Saisissez le nom de l’agent, par défaut il vous propose le nom du serveur : BuildInterne
  • Saisissez le dossier de travail de l’agent : _workVSTS
  • Choisissez de l’exécuter en tant que Service, en saisissant ‘O’
  • Choisissez le compte par défaut

Résultat :

  • Connectez vous sur votre VSTS
  • Allez dans Settings\Agent Queues

Vous  devez voir le résultat suivant :

Configuration_agent_Resultat_VSTS

Vous pouvez utiliser maintenant le pool Interne dans la configuration de vos Builds.

Note : Sur un serveur de build, vous pouvez installer plusieurs agent de build, il faut juste les utiliser des répertoires d’installation différents.

Création d’un Build VSTS

  • Connectez sur VSTS
  • Allez dans « Build & Realease »/Builds

 

Create_Build_1.png

  • Cliquez sur New

Create_Build_2

  • Sélectionnez le Template ASP.NET et cliquez sur « Apply »

Create_Build_3

  • Allez dans l’onglet « Triggers » pour activer l’intégration continue
  • Préciser la branche à surveiller

 

Create_Build_4.png

  • Allez dans l’onglet « Options » pour sélectionner l’agent interne précédemment créé

Create_Build_5.png

  • Allez dans l’onglet « Variables » Afin de modifier :
    • BuildConfiguration selon la configuration souhaitez (Release, Debug, ou une que vous avez créée dans votre solution). Dans notre cas, nous avons créé la configuration de Build « Developpement »

Create_Build_Variables

  • Cliquez sur « Save »

Save_Build_6.png

  • Cliquez sur « Save »

 

Déploiement automatique

L’objectif est déployer automatiquement sur le serveur cible IIS, le dernier package compilé par le pool de build que nous venons de créer avec l’agent « BuildInterne ».

Configuration du serveur Cible

Dans notre cas nous effectuons le déploiement automatique sur un serveur web IIS Windows server 2012 R2.

Sur ce dernier, il faut activer WinRM : Remote Management.

WinRM

Pour activer WinRM sur Windows Server 2012 :

  • Connectez vous sur le serveur Cible
  • Ouvrir sur le serveur Server Manager > Local Server

Server_manager

Site Web Cible

Dans notre exemple, nous allons mettre en place un déploiement automatique sur un site web existant que nous allons créer sur le serveur manuellement. mais cette action est parfaitement automatisable dans le processus de déploiement automatique.

  • Connectez vous sur le serveur cible
  • Ouvrir sur le serveur IIS manager
  • Ajouter un nouveau site Web, par exemple : WebInterne sur un port libre

Note : Pensez bien à ouvrir le port utilisé sur le serveur cible

Créer une release

  • Connectez sur VSTS
  • Allez dans « Build & Realease »/Releases

Create_release_1

  • Cliquez sur « Create release definition »

Create_release_2

  • Sélectionnez Empty et cliquez sur Next
 Create_release_3
  • Sélectionnez votre projet
  • Sélectionnez la définition du build que vous avez précédemment créé
  • Cochez « Continuous Deployement », pour le déploiement s’exécute à chaque nouveau build.
  • Cliquez sur Create

Ajout de tâches

Maintenant que la release a été créé vide, il faut lui ajouter des tâches à exécuter.

Task_release_1.png

  • Modifier le nom de la Release : Interne
  • Liez la release à un package de déploiement :
    • Cliquez sur « Link to an artifact source « Link_to_artefact_release_2.png
  • Sélectionnez la queue de déploiement :
    • Celle que nous avons précédemment créée : Interne

Select_Queue_release_2.png

  • Cliquez sur « Add tasks » :
    • Windows Machine File Copy
      • Ajouter la tache « Windows Machine File Copy », afin de copier le package à déployer sur le serveur cible.Add_Task_Copy_files.PNG
      • Configurez cette tache de copie :
        • Sélectionner le fichier compresser dans le package précédemment lié,Select_Package_release_3
        • Select_Package_release_4
        • Select_Package_release_5
    • WinRM – IIS Web Deployment
      • Ajoutez la tache « WinRM – IIS Web Deployment »Add_Task_Web App Deployment
        • Si cette dernière n’est pas disponible, il faut ajouter l’extension à votre VSTS depuis le market Visual Studio ici.
      • Configurez la tache :
        • WinRM :
          •  Machines : Nom réseau du serveur cible
          • Admin Login/Password : Login et Password d’un compte admin sur le serveur cible
          • Protocol : Sélectionnez le protocole utilisez par le WinRM sur le serveur cible
        • Deploiement :
          • Web Deploy Package : Nom et chemin de copie du package de déploiement, définie dans la tache précédente
          • Website Name : Name du site web précédemment créé : InterneWebApp_release_.png
  • Allez dans l’onglet « Triggers » :
    • Cochez « Continuous Deployment »
    • Sélectionnez le nom du build à surveiller et pour quelle branche le build a été effectuéTriggers_release_.png