Aller au contenu

Installation et configuration

Installer l'extension Dev Containers, configurer le backend conteneur et créer un premier devcontainer fonctionnel.

Prerequis

Backend conteneur

Un runtime de conteneurs est nécessaire. Deux options :

Voir le tutoriel complet : Conteneuriser avec Podman

# Verifier l'installation
podman --version
podman machine start  # macOS/Windows uniquement

# Verifier l'installation
docker --version
docker info

Podman rootless

Podman fonctionne sans daemon et sans privileges root. C'est l'option la plus securisee pour le développement local.

Extension VS Code

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

Configurer VS Code pour Podman

Si vous utilisez Podman, indiquer a VS Code de l'utiliser comme runtime :

// settings.json (User)
{
  "dev.containers.dockerPath": "podman",
  "dev.containers.dockerComposePath": "podman-compose"
}

Premier devcontainer

Structure minimale

Créer le dossier .devcontainer/ a la racine du projet :

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

Configuration de base

// .devcontainer/devcontainer.json
{
  "name": "Mon Projet",
  "image": "mcr.microsoft.com/devcontainers/base:ubuntu",

  // Outils a installer via les features
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "20"
    }
  },

  // Extensions VS Code dans le conteneur
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint"
      ],
      "settings": {
        "editor.formatOnSave": true
      }
    }
  },

  // Commande executee apres creation
  "postCreateCommand": "npm install",

  // Port forwarde automatiquement
  "forwardPorts": [3000],

  // Utilisateur non-root
  "remoteUser": "vscode"
}

Lancer le devcontainer

  1. Ctrl+Shift+P → "Dev Containers: Reopen in Container"
  2. VS Code reconstruit le conteneur (première fois : quelques minutes)
  3. Le terminal s'ouvre dans le conteneur
  4. Les extensions sont installees dans le conteneur

Vérifier :

# Dans le terminal du devcontainer
node --version   # v20.x
whoami           # vscode
cat /etc/os-release  # Ubuntu

Avec un Dockerfile personnalise

Pour plus de contrôle sur l'image :

.devcontainer/
├── devcontainer.json
└── Dockerfile

# .devcontainer/Dockerfile
FROM mcr.microsoft.com/devcontainers/base:ubuntu

# Installer des outils systeme
RUN apt-get update && apt-get install -y \
    jq \
    httpie \
    && rm -rf /var/lib/apt/lists/*

// .devcontainer/devcontainer.json
{
  "name": "Mon Projet",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "features": {
    "ghcr.io/devcontainers/features/node:1": { "version": "20" },
    "ghcr.io/devcontainers/features/python:1": { "version": "3.12" }
  }
}

Vérification

Apres le lancement du devcontainer :

  1. Le terminal affiche le prompt du conteneur (pas celui de votre machine)
  2. Les extensions listees dans devcontainer.json sont installees
  3. Les ports configures dans forwardPorts sont accessibles depuis le navigateur local
  4. Les fichiers du projet sont presents (montes via un volume)