Integrate Docker Vscode

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.

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.

Vérifiez l'intégration Docker

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.

Gérer les 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.

Démarrer Stop Retirez le conteneur

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.

Supprimer l'image

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.

Gérer le volume

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.

Ajouter des fichiers docker à l'espace de travail

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

Sélectionnez le nœud JS

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.

Sélectionnez le fichier JSON du package

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

Sélectionner le numéro de port

Sélectionner Oui Pour inclure le fichier Docker Compose.

Docker Compose Fichier

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

Générer les fliles nécessaires

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.

Construire l'image Docker
Vérifiez l'image construite

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

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.

Exécuter l'image

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

Choisir l'image

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

Confirmer le conteneur en cours d'exécution

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.

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é.

Sortir

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.

Partager :
Facebook
Twitter
LinkedIn

Gentil Geek

Passionné d'informatique depuis ma plus tendre enfance aujourd'hui j'en ai fait mon métier. A vos côtés pour simplifier votre utilisation de l'informatique et vous permettre de gagner en compétences.

Poster le commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *