Intégrer Docker à Visual Studio Code

Pourquoi intégrer Docker à VS Code ? Parce que cela réduit les allers-retours entre terminal et IDE : vous générez des fichiers Docker, construisez et lancez des images, accédez aux logs et ouvrez des shells de container d’un clic. Le flux visuel (Docker Explorer) accélère le débogage et la routine développeur.

Pré-requis

• Docker Desktop installé et opérationnel sur votre poste (Windows, macOS, Linux selon votre distribution).
• Visual Studio Code installé.
• Compétences de base en Docker (image, container, Dockerfile).

Important: si vous utilisez WSL2 sous Windows, assurez-vous que Docker Desktop est configuré pour l’intégration WSL. Si vous utilisez un hôte Docker distant, configurez le contexte Docker avant d’ouvrir VS Code.

Installer l’extension Docker dans VS Code

Ouvrez la vue Extensions (ou tapez Extensions dans la palette de commandes), cherchez « Docker » et installez l’extension officielle par Microsoft. Une fois installée, l’icône Docker/Containers apparaît en bas à gauche et ouvre Docker Explorer.

Note: l’extension ne remplace pas Docker Engine — elle interagit avec celui-ci. Si VS Code ne se connecte pas automatiquement, vérifiez que Docker Desktop est en cours d’exécution.

Connexion de Docker Desktop à VS Code

Quand Docker Desktop tourne, VS Code détecte automatiquement le daemon via l’extension Docker. Pour valider la connexion, cliquez sur l’icône Docker/Containers pour ouvrir Docker Explorer et inspecter containers, images, volumes, réseaux et contextes.

En cas de problème:

• Vérifiez que Docker Desktop fonctionne et que votre utilisateur a la permission d’accéder au socket Docker.
• Sur Windows, activez l’intégration WSL si vous travaillez depuis une distribution WSL.
• Pour un hôte distant, configurez le DOCKER_HOST ou changez le contexte Docker via la palette de commandes.

Gérer containers, images et volumes depuis VS Code

Le Docker Explorer expose des sections CONTAINERS, IMAGES, VOLUMES, NETWORKS et REGISTRIES. Vous pouvez démarrer/arrêter/restart/supprimer des containers par un clic droit, inspecter les volumes et supprimer des images non utilisées.

Chaque action génère une commande Docker équivalente en arrière-plan — utile pour apprendre la CLI tout en profitant d’une interface graphique.

Exemple: construire et exécuter une application conteneurisée dans VS Code

Nous allons dockeriser une petite application Node.js/Express pour illustrer la génération automatique de fichiers et l’exécution depuis VS Code.

1. Créez un dossier de projet et un fichier index.js contenant le code suivant:

const express = require("express");
const server = express();
const PORT = 4000;

server.get("/", (req, res) => {
  res.send("Welcome to our Express app!");
});

server.listen(PORT, () => {
  console.log(`App running on port ${PORT}`);
});

Ce fichier lance un serveur qui répond sur le port 4000.

2. Générer les fichiers Docker automatiquement

Ouvrez la palette de commandes (Ctrl+Shift+P ou ⇧⌘P) et exécutez Add Docker files to Workspace. Sélectionnez Node.js, pointez vers votre package.json, indiquez le port (4000) et choisissez d’inclure Docker Compose si vous le souhaitez. L’extension crée un Dockerfile, un .dockerignore et éventuellement un compose.yaml.

3. Construire l’image

Clic droit sur le Dockerfile > Build Image ou utilisez la commande Docker Images: Build Image depuis la palette. L’image apparaît ensuite dans la section IMAGES.

4. Lancer l’image

Dans IMAGES, faites Clic droit > Run ou exécutez container images: run depuis la palette. Choisissez le port et les options si nécessaire. Le container apparaîtra dans CONTAINERS.

5. Ouvrir l’application dans le navigateur

Clic droit sur le container > Open in Browser. Vous devriez voir la réponse du serveur.

Exemple de Dockerfile minimal généré (référence)

Voici un Dockerfile typique pour Node.js (l’extension peut générer une version similaire):

FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
EXPOSE 4000
CMD ["node", "index.js"]

Mini-méthodologie: dockeriser une application en 6 étapes

1. Vérifier que l’app fonctionne localement.
2. Créer package.json et point d’entrée (index.js).
3. Générer Dockerfile via l’extension ou écrire un Dockerfile optimisé.
4. Construire l’image et exécuter le container en local.
5. Tester endpoints, logs et volumes.
6. Versionner l’image ou pousser vers un registre si nécessaire.

Checklist par rôle

Développeur:

• L’application fonctionne localement.
• Dockerfile généré et build réussi.
• Container accessible sur le port défini.

DevOps:

• Images taggées et testées en staging.
• Compose/CI configurés pour builds automatiques.
• Scans de sécurité des images (SAST/DAST) prévus.

QA:

• Tests d’intégration sur container (endpoints, persistence).
• Vérifier volumétries et état après redémarrage.

Critères d’acceptation / cas de test rapides

• Build: l’image se construit sans erreurs.
• Run: le container démarre et retourne HTTP 200 sur /.
• Persistance: un volume lié conserve les données après redémarrage.
• Logs: possibilité d’ouvrir le terminal/logs depuis VS Code.

Mémo / Cheat sheet des commandes utiles (VS Code + CLI)

• Palette: Add Docker files to Workspace
• Palette: Docker Images: Build Image
• Palette: Docker Images: Run
• CLI: docker build -t monapp:latest .
• CLI: docker run -p 4000:4000 monapp:latest
• Inspecter logs: docker logs
• Ouvrir shell: docker exec -it /bin/sh

Contre-exemples et limites

• Applications graphiques complexes (GUI) ne bénéficient que partiellement de cette intégration.
• Si votre environnement Docker est distant sans accès au daemon, l’extension peut nécessiter une configuration manuelle.
• Pour des pipelines CI/CD, préférez l’automatisation via scripts et runners plutôt que l’interface VS Code.

Bonnes pratiques et sécurité

• Utilisez des images officielles et maintenues.
• Minimisez les couches et installez uniquement ce dont vous avez besoin.
• Scannez les images pour vulnérabilités avant publication.
• Ne mappez pas inutilement des volumes contenant des secrets.

Glossaire rapide

• Image: artefact immuable contenant l’application.
• Container: instance en exécution d’une image.
• Dockerfile: fichier décrivant la construction d’une image.
• Volume: stockage persistant lié à un container.

Résumé et prochaines étapes

L’intégration de Docker à VS Code vous fait gagner du temps en centralisant la construction, l’exécution et le diagnostic des containers. Commencez par dockeriser une petite app (comme l’exemple Node.js), validez les builds et automatisez ensuite via Compose ou CI. Pour aller plus loin: configurez le débogage distant, intégrez la sécurité d’image et déployez vers un registre privé ou managé.

Important: ne confiez jamais de secrets en clair dans un Dockerfile ni dans un dépôt public. Utilisez des variables d’environnement et des solutions de gestion des secrets.

• Points d’action recommandés:
  • Générer les fichiers Docker via VS Code pour prototype rapide.
  • Ajouter des étapes de build et scan dans votre pipeline CI.
  • Documenter les commandes et la configuration dans le README du projet.