Intégration de Docker avec Visual Studio Code : guide étape par étape

L’intégration de Docker à Visual Studio Code (VS Code) améliore considérablement l’expérience de développement, permettant aux développeurs de créer et de gérer efficacement des fichiers Docker, de visualiser les conteneurs et les images, et d’accéder facilement aux journaux ou aux terminaux. Cet article propose un guide complet sur la configuration de Docker dans VS Code grâce à l’extension Docker.

Comment installer l’extension Docker dans VS Code

Avant d’installer l’extension Docker, assurez-vous que Docker et Visual Studio Code sont correctement configurés sur votre machine. Pour commencer, ouvrez la vue Extensions dans VS Code, recherchez « Docker » et installez l’extension Docker officielle fournie par Microsoft.

Une fois l’installation réussie, vous remarquerez qu’une icône Docker/Containers apparaît dans le coin inférieur gauche de votre éditeur, indiquant que Docker Explorer est désormais disponible.

Établir une connexion entre Docker Desktop et VS Code

Lorsque Docker Desktop est en cours d’exécution, l’extension Docker avec VS Code se connecte parfaitement. En général, aucune configuration supplémentaire n’est requise, sauf si votre installation Docker implique des configurations spécifiques (par exemple, des hôtes distants ou une intégration WSL).

Pour vérifier la connexion, cliquez sur l’ icône Docker/Conteneurs pour lancer l’Explorateur Docker. Vous pourrez alors observer vos conteneurs en cours d’exécution et arrêtés, ainsi que les images, les registres, les volumes et les réseaux.

Gestion des conteneurs, des images et des volumes directement depuis VS Code

Grâce à l’intégration complète de Docker à VS Code, la gestion des tâches des conteneurs n’a jamais été aussi simple. Vous pouvez visualiser facilement les conteneurs en cours d’exécution et arrêtés dans la section CONTENEURS.

De plus, un clic droit sur n’importe quel conteneur vous donnera la possibilité de le démarrer, de l’arrêter, de le redémarrer ou de le supprimer en un seul clic.

Vous pouvez également extraire de nouvelles images, créer des images à partir de configurations existantes ou nettoyer facilement les images inutilisées. Par exemple, pour supprimer une image inutile, faites un clic droit dessus et sélectionnez Supprimer.

De plus, la gestion des volumes liés à vos conteneurs est simple : faites un clic droit sur le volume souhaité pour l’inspecter ou le modifier.

Vous pouvez également explorer et gérer les réseaux, les registres, les contextes Docker et accéder à une section d’aide et de commentaires, optimisant ainsi davantage votre flux de travail de développement.

Création et exécution d’une application conteneurisée dans VS Code

À titre d’exemple pratique, créons une application Node.js Express simple pour illustrer les fonctionnalités de l’extension Docker. Commencez par créer un dossier dans VS Code pour votre projet. Dans ce dossier, créez un fichier nommé index.jset saisissez le code suivant :

Cet extrait de code de base crée une petite application Express à l’écoute sur le port 4000 et répond par le message « Bienvenue dans notre application Express ! » à l’accès à l’URL racine (/).Il pose les bases du test de votre Dockerfile.

Ensuite, vous aurez besoin d’un Dockerfile. Au lieu de le créer manuellement et de spécifier ses instructions, l’extension Docker peut faciliter ce processus. Ouvrez la palette de commandes en appuyant ⇧⌘Psur (Mac) ou sur Ctrl+ Shift+ P(Windows) et saisissez la commande Add Docker files to Workspace.

Ajouter des fichiers Docker à l'espace de travail

Sélectionnez Node.js comme plate-forme d’application parmi les options proposées.

Accédez au fichier « package.json » situé à la racine de votre projet. Ce fichier est le fichier de configuration principal de votre application et guidera l’extension Docker dans la génération des fichiers Docker essentiels.

Ensuite, indiquez le numéro de port que votre application utilisera afin que Docker puisse l’exposer de manière appropriée.

Sélectionnez Oui lorsque vous êtes invité à inclure le fichier Docker Compose.

L’extension Docker va désormais générer un Dockerfile, un fichier «.dockerignore » et un fichier « compose.yaml », en fonction de votre sélection.

Pour procéder à la création de votre image Docker, faites un clic droit sur le Dockerfile et sélectionnez Créer une image, ou bien exécutez Docker Images : Créer une image à partir de la palette de commandes.

Après le processus de construction, accédez à la section Images dans l’explorateur Docker pour voir votre projet nouvellement créé reflété ici :

Maintenant, pour exécuter l’image, ouvrez la palette de commandes et exécutez container images: run, ou faites simplement un clic droit sur votre image et sélectionnez Exécuter.

Sélectionnez votre dernière image dans la liste affichée.

Enfin, vous pouvez valider que votre application est en cours d’exécution en vérifiant la section Conteneurs dans Docker Explorer.

Pour accéder à votre application, cliquez avec le bouton droit sur le conteneur en cours d’exécution dans Docker Explorer et sélectionnez Ouvrir dans le navigateur.

En conséquence, vous pourrez voir le conteneur en action avec votre application accessible via le port précédemment spécifié.

Conclusion

L’intégration de Docker à Visual Studio Code simplifie le processus de développement, permettant aux développeurs de construire, d’exécuter et de contrôler efficacement les conteneurs directement depuis leur environnement de développement. Une fois la configuration terminée, vous pourrez créer des fichiers Docker, naviguer entre les conteneurs et les images, et consulter les journaux ou les sorties de terminal en un seul clic. Cette intégration simplifie non seulement l’exécution et les tests des applications, mais maintient également un flux de travail organisé et productif.

Source et images