Docker Dev Container

Avant la création de notre API, il serait intéressant de créer un environnement de développement qui :

  • facilement duplicable d'un ordinateur à l'autre

  • indépendant du système d'exploitation

  • contient le set de dépendances du projet (les versions des paquets par exemple)

Notamment, nous allons créer un API avec NodeJS (v.20) qui tourne en Ubuntu Linux (bullseye).

Nous utilisons Docker et VSCode afin de satisfaire ces demandes via leur Dev Containersarrow-up-right.

Il faut d'abord installer Docker et VSCode avant de procéder aux étapes suivantes. Un guide complèt se trouve iciarrow-up-right.

On crée un container qui tourne une version du système d'exploitation et interprète de notre choix. Idéalement, ce seront les mêmes que l'on utilisera en production (par exemple, Ubuntu Linux).

VSCode s'attache à ce container de plusieurs façons :

  • on monte le dossier de notre projet (en local) dans le container via l'élément volumes de docker compose.

  • quand on ouvre un terminal dans VSCode, c'est l'équivalent de lancer un docker exec -it [ID du container]. On lance donc un interprète dans le container. On peut ensuite installer et lancer des processus provenant de notre développement (par exemple, lancer l'API) dans son environnement précis.

Pour accomplir tout cela, VSCode exige la présence d'un dossier .devcontainer à la racine du workspace.

Nous commençons donc par créer ce dossier dans notre dossier de travail, et en ajoutant un fichier .devcontainer/devcontainer.json dedans :

.devcontainer/devcontainer.json
{
  "name": "API Code Samples",
  // Pointer vers notre docker-compose.dev.yml
  "dockerComposeFile": [
    "../docker-compose.dev.yml"
  ],
  // Le service dans docker-compose.dev.yml auquel on va attacher VSCode
  "service": "vscode_api",
  // Le dossier de travail précisé dans Dockerfile.dev
  "workspaceFolder": "/home/dev",
  // Set *default* container specific settings.json values on container create.
  "customizations": {
    "settings": {},
    "extensions": []
  },
  // Quelques extensions VSCode à inclure par défaut pour notre projet 
  "forwardPorts": [ 5050 ]
}

Si on analyse bien ce fichier, on voit que VSCode va consulter un fichier docker-compose.dev.yml qui existe dans le répertoire parent pour lancer les services nécessaires pour ce parent.

Ce docker-compose pourrait à la fois contenir un service pour notre VSCode, mais aussi une base de données (de l'image mariadb), et d'autres services comme redis, ou autre.

Pour le moment, nous créons uniquement le service pour VSCode, qui doit porter le même nom que le champ service dans devcontainer.json.

Remarquez le service vscode_api, qui finalement tourne une commande /bin/bash en boucle infinie. VSCode s'attache à ce service. Le container est créé à partir d'une image que je vous ai déjà crée.

Nous sommes prêts à lancer notre Dev Container. Vérifiez bien la structure de votre projet VSCode.

Vous pouvez ensuite lancer votre Dev Container en appuyant sur F1, et puis Dev Containers : Rebuild and Reopen in Container.

Une fois lancé, ouvrez un nouveau terminal.

Vous allez voir que NodeJS est déjà installé :

Au passage, nous avons installé mycli aussi, car on va travailler avec un SGBDR :

Pour utiliser typescript, nous avons aussi ajouté ts-node et typescript comme commandes globales :

triangle-exclamation

L'image Docker

Remarque : il n'est pas nécessaire d'effectuer les étapes de cette section, elles sont fournies à titre d'information.

Le conteneur de développement ci-dessus utilise une image Docker que j'ai préparée pour vous : rg.fr-par.scw.cloud/api-code-samples-vscode/vscode_api

Pour créer cette image, j'ai d'abord écrit un Dockerfile, décrivant exactement comment je souhaitais que l'image se présente :

Comme vous pouvez le voir, j'ai basé l'image sur une image node récente, qui est une image basée sur Ubuntu avec NodeJS déjà installé.

J'installe ensuite un certain nombre de paquets supplémentaires que j'utiliserai souvent. Je règle le fuseau horaire et le répertoire de travail. De cette manière, tous les développeurs de mon équipe partagent la même configuration de développement.

Ensuite, je construis l'image et je la déploie dans mon registre de conteneurs :

Mis à jour