Environnement de développement Dev Container VS Code

Un Dev Container sous Visual Studio Code est un outil formidable permettant la mise en place d’un environnement de développement configuré à la guise des développeurs grâce à Docker et différents fichiers de configuration.

Lorsque plusieurs développeurs travaillent sur un même projet, mais sur leurs machines respectives, il n’est pas impossible d'entendre des choses comme "ça marche sur mon ordinateur, mais pas sur le tien..."

Résultat : On perd du temps à comprendre le pourquoi, avant de se rendre compte que l’un utilise une version dépréciée de NodeJs alors que l’autre la LTS, ou encore d’observer que l’un est sur Windows et l’autre sur macOS et que cela pose des soucis.

Les Dev Container sont là pour répondre à ces problématiques.

Introduction

Pour fonctionner, un Dev Container se base sur un conteneur Docker. C’est dans ce conteneur que se retrouve l’environnement utilisé dans VS Code pour développer.

Grâce à un ensemble de fichiers de configuration (Dockerfile, docker-compose.yml, etc), il est possible de partager un dossier (via un volume), qui correspond à votre projet, avec un lot de configuration : choix de l’OS (Ubuntu, Debian), des dépendances et leurs versions (NodeJs, .NET, etc), des extensions de Visual Studio Code ou encore de simple librairies (via Apt, Yum, etc).

Le fonctionnement est découpé en deux parties : l’interface Visual Studio Code, qui va agir comme le client; et le conteneur, qui va agir comme le serveur d'exécution. L’ensemble des extensions, IntelliSense, debuggers et codes sont exécutéds sur le container et non la machine client.

Chaque projet ayant ses versions de ses outils/langages et ses divers pré-requis : à chaque projet peut correspondre son conteneur.

Mise en place d’un environnement de développement Dev Container VS Code
Schéma de l’architecture Dev Container

Prérequis

  • Windows, macOS ou Linux (dans cet article nous utiliserons Windows)
  • Docker (pour Windows : avoir WSL2 de configuré).
  • Visual Studio Code et l’extension “ms-vscode-remote.remote-containers”

Pour l’installation de Docker (et la configuration de WSL2 pour Windows), veuillez-vous référer à la documentation officielle de Docker disponible selon votre OS.

Mise en place

Dans cet exemple, nous allons mettre en place un simple projet NodeJs. Bien sûr, il est possible de mettre en place n’importe quelle autre technologie.

Pour mettre en place un projet sous Dev Container, nous allons créer un dossier “demo”.

Note : si vous utilisez WSL2 et Windows, veuillez placer ce dossier dans un répertoire WSL2, exemple : \\wsl.localhost\Ubuntu-20.04\home\[votre nom]\projects\demo

Dans ce projet, créez un dossier “.devcontainer”, celui contiendra les fichier suivants :

devcontainer.json

Il s’agit du fichier de base de la configuration du Dev Container : libellé de conteneur, extensions, etc.

Mise en place d’un environnement de développement Dev Container VS Code
Exemple de “devcontainer.json”

docker-compose.yml

Le docker-compose permet de déclarer l’ensemble des conteneurs à utiliser pour le projet. On retrouve ici le conteneur mentionné dans le devcontainer.json, mais également un second pour nous rendre accessible une base de données propre à notre projet.

Mise en place d’un environnement de développement Dev Container VS Code
Exemple de “docker-compose.yml”

Dockerfile

Le Dockerfile est le fichier de configuration qui va contenir l’ensemble des librairies et outils de notre environnement Linux.

Mise en place d’un environnement de développement Dev Container VS Code
Exemple de “Dockerfile”

init.sh

Ce fichier “init.sh” est facultatif mais permet l'exécution de commande après le premier démarrage du container. Il peut être utile pour l’initialisation des dépendances de NodeJs par exemple.

Mise en place d’un environnement de développement Dev Container VS Code
Exemple de “init.sh”

Utilisation du Dev Container avec VS Code

Maintenant que l’ensemble est configuré, il faut pouvoir le tester !

Pour cela, ouvrez votre projet avec Visual Studio Code.

Cliquez sur la zone verte en bas à gauche de la fenêtre.

Mise en place d’un environnement de développement Dev Container VS Code

Puis cliquez sur “Open Folder in Container”.

Mise en place d’un environnement de développement Dev Container VS Code

Patientez et tadaaaam, vous êtes prêt à développer votre projet dans un environnement qui sera identique à celui d’un autre développeur utilisant le Dev Container !

Conclusion

Les Dev Containers de Visual Studio Code sont des outils formidables pour la mise en place d’un environnement de développement. Que vous soyez seul ou en équipe, vous limitez ainsi le risque de conflits entre (par exemple) la version de vos outils installés et ceux compatibles avec vos projets.

Il est possible d’aller plus loin dans la configuration de votre environnement Visual Studio Code. Je pense ici au fichier “.vscode/settings.json” qui permet de mettre en place tout un ensemble de paramètres pour l’IDE de manière relative au projet : gestion des espaces pour la tabulation, configuration des extensions, etc.

Chez Next Decision, nous utilisons toujours les Dev Container pour nos projets de développement. Ainsi, en passant par nous, en plus de la qualité de nos prestations, votre application web sera plus simple à maintenir grâce aux environnements pré-configurés !

Un projet Business Apps ? Nos développeurs Business Apps sont à votre écoute ! Contactez-nous !