
Table des matières
L’intégration de Docker dans le code Visual Studio rend le développement plus facile et plus efficace. Vous pouvez créer rapidement des fichiers Docker, explorer des conteneurs et des images dans un panneau visuel et passer à des journaux ou des terminaux en un seul clic. Dans cet article, nous explorerons comment configurer Docker dans VS Code avec l’extension Docker.
Installation de l’extension docker dans le code vs
Avant d’installer l’extension Docker, assurez-vous que Docker et Visual Studio Code sont déjà configurés sur votre système. Ouvrez la vue d’extensions dans Visual Studio Code, recherchez Docker et installez l’extension Docker officielle par Microsoft.
Une fois l’installation terminée, vous verrez un Docker / conteneurs Le logo apparaît dans le coin inférieur gauche de l’éditeur, qui sert de Explorateur de docker.

Connecter Docker Desktop à VS Code
Lorsque Docker Desktop est en cours d’exécution, VS Code se connecte automatiquement via l’extension Docker. Vous n’avez pas besoin de configuration supplémentaire, sauf si Docker nécessite une configuration spéciale (comme des hôtes distants ou une intégration WSL).
Pour confirmer la connexion, cliquez sur le Docker / conteneurs icône pour ouvrir l’explorateur Docker. De là, vous pouvez vérifier vos conteneurs en cours d’exécution et arrêtés, ainsi que des images, des registres, des volumes et des réseaux.

Gestion des conteneurs, des images et des volumes de VS Code
Une fois Docker correctement intégré, vous pouvez gérer la plupart des tâches de conteneurs directement à partir du code vs. Par exemple, vous pouvez afficher les conteneurs en cours d’exécution et arrêtés dans la section des conteneurs.

De plus, vous pouvez cliquer avec le bouton droit sur un conteneur spécifique pour démarrer, arrêter, redémarrer ou le supprimer.

Vous pouvez également tirer des images, en créer de nouveaux ou nettoyer les images inutilisées. Par exemple, pour supprimer une image inutilisée, je peux simplement cliquer avec le bouton droit dessus et sélectionner Supprimer pour le supprimer immédiatement.

En dehors de cela, vous pouvez cliquer avec le bouton droit sur un volume spécifique lié à vos conteneurs pour l’inspecter ou le gérer.

Vous pouvez également explorer et gérer les réseaux de conteneurs, les registres, les contextes Docker et même accéder à la section d’aide et de rétroaction pour simplifier votre flux de travail.
Créer et exécuter une application conteneurisée dans le code vs
Créons une application simple Node.js Express pour essayer l’extension. Pour ce faire, créez d’abord un nouveau dossier dans VS Code pour votre projet, puis un fichier nommé «index.js», et ajoutez le code suivant dans ce fichier:
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 code crée une petite application express qui s’exécute sur le port 4000. Lorsque vous ouvrez l’URL racine (/), il affiche le message « Bienvenue dans notre application Express!«. C’est juste une configuration de base pour les tests Dockerfile.
Ensuite, vous devez ajouter un fichier docker. Normalement, l’ajout de docker signifie créer un dockerfile, écrire les instructions, construire une image à partir du terminal, puis l’exécuter manuellement. Avec l’extension Docker, VS Code peut générer ces fichiers pour vous. Pour ce faire, ouvrez la palette de commande (⇧⌘P sur mac ou Ctrl + Changement + P sous Windows) et tapez la commande Add Docker files to Workspace
.

Sélectionnez Node.js comme plate-forme d’application.

Sélectionnez le fichier «package.json» situé dans la racine de votre projet (le même dossier que votre fichier index.js). Il s’agit du fichier de configuration principal de votre application, et l’extension Docker l’utilisera pour générer le DockerFile et d’autres fichiers connexes nécessaires.

Spécifiez le port sur lequel votre application s’exécute pour que Docker l’expose.

Sélectionner Oui Pour inclure le fichier Docker Compose.

L’extension Docker générera un fichier DockerFile, un fichier «.dockerignore», et éventuellement un fichier «compose.yaml» si vous le choisissez.

Enfin, pour construire une image Docker, cliquez avec le bouton droit sur le Dockerfile et Sélectionner l’image de construction ou courir Images docker: construire l’image Dans la palette de commande.


Ensuite, allez au Images Section dans Docker Explorer pour voir votre projet nouvellement ajouté:

Maintenant, ouvrez la palette de commande, exécutez la commande container images: run
ou cliquez avec le bouton droit sur votre image et sélectionnez Courir.

Dans la liste des images, choisissez votre dernière image.

Et enfin, vous pouvez confirmer qu’il s’exécute en vérifiant la section des conteneurs dans Docker Explorer.

Pour voir votre application en action, cliquez avec le bouton droit sur le conteneur en cours d’exécution dans Docker Explorer et choisissez Ouvert dans le navigateur.

À partir de la sortie, vous pouvez voir que le conteneur est en cours d’exécution et que notre application est accessible via le port spécifié.

Emballage
Intégrer Docker dans VS Code rationalise votre développement en vous permettant de créer, d’exécuter et de gérer les conteneurs directement au sein de votre éditeur. Une fois configuré, vous pouvez facilement créer des fichiers Docker, explorer les conteneurs et les images et accéder aux journaux ou aux terminaux en un seul clic. Il simplifie les applications d’exécution et de test et maintient votre flux de travail organisé et efficace.