Dev Containers : environnements de développement reproductibles

Dev Containers crée un environnement de développement identique pour tous les membres de votre équipe, quel que soit leur système d’exploitation. Fini le “ça marche sur ma machine” : les dépendances, versions et configurations sont définies dans un fichier versionné. Ce guide couvre la configuration de base, Docker Compose, les features, et l’intégration CI/CD.

Le problème que Dev Containers résout

Sans environnement standardisé, chaque développeur a sa propre configuration :

Problème	Conséquence
Versions différentes (Node, Python…)	Bugs impossibles à reproduire
Dépendances système manquantes	”Ça marche chez moi”
Configuration manuelle	Onboarding de plusieurs heures
Pollution du système local	Conflits entre projets

Glissez pour voir

Dev Containers résout ces problèmes avec Docker :

• Environnement défini en code : fichier devcontainer.json versionné
• Isolation complète : chaque projet a son container
• Portabilité : fonctionne sur Linux, macOS, Windows
• Onboarding instantané : clone le repo, ouvre VS Code, c’est prêt

Spec ouverte

Dev Containers est une spécification ouverte maintenue par Microsoft et la communauté. Elle est utilisée au-delà de VS Code : GitHub Codespaces, JetBrains, DevPod, et d’autres outils supportent le format devcontainer.json.

Fonctionnement

Quand vous ouvrez un projet avec Dev Containers :

1. VS Code lit .devcontainer/devcontainer.json
2. Docker crée le container avec l’image spécifiée
3. VS Code Server s’installe dans le container
4. Extensions et dépendances s’installent automatiquement
5. Votre code est monté dans le container (volume)

Vous travaillez dans VS Code normalement, mais tout s’exécute dans le container : terminal, debug, LSP, extensions.

Prérequis

1. Visual Studio Code

   Téléchargez depuis code.visualstudio.com.

2. Docker

   Le moteur de containers qui exécute l’environnement. Installez Docker Desktop ou Docker Engine.

   docker --version
   # Docker version 24.0.7 ou supérieur

3. Extension Dev Containers

   Installez l’extension Dev Containers (anciennement “Remote - Containers”) :

   code --install-extension ms-vscode-remote.remote-containers

   Ou recherchez “Dev Containers” dans le Marketplace (ID : ms-vscode-remote.remote-containers).

Configuration de base

Structure des fichiers

À la racine de votre projet, créez le dossier .devcontainer/ :

mon-projet/
├── .devcontainer/
│   └── devcontainer.json
├── src/
├── package.json
└── ...

Exemple minimal (Node.js / Astro)

{
  "name": "Astro Dev Container",
  "image": "node:20-alpine3.19",
  "postCreateCommand": "npm ci",
  "customizations": {
    "vscode": {
      "extensions": [
        "astro-build.astro-vscode",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ]
    }
  },
  "forwardPorts": [4321]
}

Explication des champs :

Champ	Description
name	Nom affiché dans VS Code
image	Image Docker à utiliser
postCreateCommand	Commande exécutée après création (installation)
customizations.vscode.extensions	Extensions à installer automatiquement
forwardPorts	Ports exposés sur localhost

Glissez pour voir

JSON strict

Le format JSON n’accepte pas de virgule finale. Vérifiez vos fichiers avec un linter JSON si VS Code signale une erreur de parsing.

Démarrer le container

1. Ouvrez le projet dans VS Code
2. Appuyez sur F1 → Dev Containers: Reopen in Container
3. VS Code télécharge l’image, crée le container, installe les extensions
4. Votre terminal s’exécute maintenant dans le container

Vérification :

# Dans le terminal VS Code (container)
node --version
# v20.x.x

cat /etc/os-release | grep PRETTY_NAME
# PRETTY_NAME="Alpine Linux v3.19"

Propriétés du devcontainer.json

Lifecycle commands

La spec définit plusieurs hooks exécutés à différents moments :

Hook	Moment	Usage typique
postCreateCommand	Après création du container	npm ci, installation dépendances
postStartCommand	À chaque démarrage	Lancer un serveur de dev
postAttachCommand	À chaque connexion VS Code	Messages de bienvenue
initializeCommand	Avant création (sur l’hôte)	Clone de submodules

Glissez pour voir

Exemple avec séparation des responsabilités :

{
  "postCreateCommand": "npm ci",
  "postStartCommand": "npm run dev -- --host"
}

Serveur automatique

Lancer le serveur avec postStartCommand est pratique mais peut surprendre l’équipe. Certains préfèrent démarrer manuellement pour contrôler quand les ports sont ouverts.

Variables d’environnement

{
  "containerEnv": {
    "NODE_ENV": "development",
    "DATABASE_URL": "postgres://user:pass@db:5432/mydb"
  }
}

Utilisateur non-root

Par défaut, le container peut s’exécuter en root. Pour un comportement plus proche de la production :

{
  "remoteUser": "node"
}

L’utilisateur node existe dans les images officielles Node.js. Pour d’autres images, utilisez containerUser ou créez l’utilisateur dans un Dockerfile.

Monter des fichiers/dossiers

{
  "mounts": [
    "source=${localEnv:HOME}/.ssh,target=/home/node/.ssh,type=bind,readonly"
  ]
}

Cela monte vos clés SSH dans le container pour les opérations Git.

Features : ajouter des outils sans Dockerfile

Les features sont des modules réutilisables qui installent des outils dans votre container. Plus propre que de tout faire dans un Dockerfile.

{
  "image": "mcr.microsoft.com/devcontainers/base:ubuntu",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "20"
    },
    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
    "ghcr.io/devcontainers/features/git:1": {}
  }
}

Features populaires :

Feature	Description
node	Node.js + npm
python	Python + pip
docker-in-docker	Docker dans le container
kubectl-helm-minikube	Outils Kubernetes
terraform	Terraform CLI
aws-cli	AWS CLI

Glissez pour voir

Consultez le catalogue de features pour la liste complète.

Docker Compose : multi-services

Quand votre projet nécessite plusieurs services (base de données, cache, API), utilisez Docker Compose.

docker-compose.yml

services:
  web:
    image: node:20-alpine3.19
    ports:
      - "4321:4321"
    volumes:
      - ./:/workspace:cached
    command: sleep infinity

  db:
    image: postgres:16
    restart: unless-stopped
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: myapp_user
      POSTGRES_PASSWORD: myapp_password
      POSTGRES_DB: myapp_db
    ports:
      - "5432:5432"

volumes:
  postgres-data:

Option :cached

L’option :cached améliore les performances sur macOS et Windows en autorisant un léger délai entre les écritures et leur visibilité dans le container.

devcontainer.json pour Compose

{
  "name": "Mon App + Postgres",
  "dockerComposeFile": "../docker-compose.yml",
  "service": "web",
  "workspaceFolder": "/workspace",
  "postCreateCommand": "npm ci",
  "forwardPorts": [4321, 5432],
  "customizations": {
    "vscode": {
      "extensions": [
        "astro-build.astro-vscode",
        "ms-azuretools.vscode-docker"
      ]
    }
  }
}

Champs spécifiques à Compose :

Champ	Description
dockerComposeFile	Chemin vers le docker-compose.yml
service	Service principal (où VS Code se connecte)
workspaceFolder	Dossier de travail dans le container

Glissez pour voir

forwardPorts au premier niveau

forwardPorts est une propriété de premier niveau de devcontainer.json, pas un sous-champ de customizations.vscode. Cette erreur courante empêche la redirection de ports.

Accéder à la base de données

Depuis le service web, la base de données est accessible via le nom du service :

# Dans le terminal du container
psql -h db -U myapp_user -d myapp_db

Depuis votre machine locale, utilisez localhost:5432 grâce à forwardPorts.

Dockerfile personnalisé

Pour des besoins spécifiques, créez un Dockerfile :

.devcontainer/Dockerfile

FROM node:20-alpine3.19

# Installer des outils supplémentaires
RUN apk add --no-cache \
    git \
    openssh-client \
    curl

# Créer un utilisateur non-root
RUN adduser -D -u 1000 developer
USER developer

WORKDIR /workspace

devcontainer.json avec Dockerfile

{
  "name": "Custom Dev Container",
  "build": {
    "dockerfile": "Dockerfile",
    "context": ".."
  },
  "remoteUser": "developer",
  "postCreateCommand": "npm ci",
  "forwardPorts": [4321]
}

Remote SSH + Dev Containers

Vous pouvez combiner l’accès SSH distant avec Dev Containers : VS Code se connecte en SSH à un serveur, puis utilise Docker sur ce serveur.

1. Connectez-vous en SSH

   F1 → Remote-SSH: Connect to Host → sélectionnez votre serveur

2. Ouvrez le projet

   Une fois connecté, ouvrez le dossier contenant .devcontainer/

3. Ouvrez dans le container

   F1 → Dev Containers: Reopen in Container

Avantages :

• Docker tourne sur le serveur (pas besoin de Docker local)
• Ressources du serveur (RAM, CPU, stockage rapide)
• Réseau du serveur (accès aux services internes)

Consultez la documentation officielle pour les configurations avancées.

Intégration CI/CD

Le devcontainer.json peut servir de source de vérité pour votre pipeline CI.

Pattern recommandé

Dev Container = environnement de développement (VS Code) CI = job container basé sur la même image

GitHub Actions

.github/workflows/ci.yml

name: CI

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    container:
      image: node:20-alpine3.19  # Même image que devcontainer.json

    steps:
      - uses: actions/checkout@v4

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test

      - name: Build
        run: npm run build

Utiliser devcontainer CLI en CI

Pour une cohérence totale, utilisez la CLI devcontainer :

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Build dev container
        uses: devcontainers/ci@v0.3
        with:
          runCmd: npm ci && npm test && npm run build

Cette approche utilise exactement la configuration de votre devcontainer.json.

Performance

Placement du code

OS	Recommandation
Linux	Code sur le filesystem Linux, performances natives
macOS	Préférer le code dans le container (volume nommé) pour éviter les I/O lents
Windows	Stocker le code en WSL2 (\\wsl$\Ubuntu\...), pas sur /mnt/c/

Glissez pour voir

Volume nommé pour les dépendances

Évitez de remonter node_modules depuis l’hôte :

{
  "mounts": [
    "source=myproject-node_modules,target=/workspace/node_modules,type=volume"
  ]
}

Cela stocke node_modules dans un volume Docker plus rapide.

Dépannage

Symptôme	Cause probable	Solution
”Cannot connect to Docker”	Docker non démarré	Lancez Docker Desktop
Container lent à créer	Téléchargement de l’image	Normal la première fois, cache ensuite
Fichiers en root sur l’hôte	remoteUser non configuré	Ajouter "remoteUser": "node"
Extensions non installées	Mauvais format JSON	Vérifier customizations.vscode.extensions
Port non accessible	forwardPorts mal placé	Doit être au premier niveau, pas dans customizations
Erreur “image not found”	Typo dans le nom d’image	Vérifier l’orthographe (alpine pas apline)

Glissez pour voir

Reconstruire le container

Si quelque chose ne fonctionne pas après une modification :

F1 → Dev Containers: Rebuild Container

Pour repartir de zéro (sans cache Docker) :

F1 → Dev Containers: Rebuild Container Without Cache

À retenir

1. Dev Containers = environnement en code — devcontainer.json définit tout
2. Spec ouverte — Fonctionne avec VS Code, Codespaces, JetBrains, DevPod
3. postCreateCommand pour l’installation, postStartCommand pour les process
4. Features pour ajouter des outils sans Dockerfile
5. Docker Compose pour les architectures multi-services
6. forwardPorts au premier niveau — pas dans customizations
7. Même image en CI — garantit la cohérence dev/production
8. Remote SSH + DevContainers — Docker sur le serveur distant

Prochaines étapes

Docker : guide complet Maîtriser les containers Docker

VS Code Remote SSH Développer sur une machine distante

GitHub Actions Pipelines CI/CD avec GitHub

Docker Compose Orchestrer plusieurs services

×

📖 Voir la documentation →