Docker in Visual Studio Code integrieren: Eine Schritt-für-Schritt-Anleitung

Die Integration von Docker in Visual Studio Code (VS Code) verbessert die Entwicklungserfahrung erheblich. Entwickler können Docker-Dateien effizient erstellen und verwalten, Container und Images visuell anzeigen und problemlos auf Protokolle oder Terminals zugreifen. Dieser Artikel bietet eine umfassende Anleitung zur Einrichtung von Docker in VS Code über die Docker-Erweiterung.

So installieren Sie die Docker-Erweiterung in VS Code

Stellen Sie vor der Installation der Docker-Erweiterung sicher, dass sowohl Docker als auch Visual Studio Code auf Ihrem Computer ordnungsgemäß konfiguriert sind.Öffnen Sie zunächst die Erweiterungsansicht in VS Code, suchen Sie nach „Docker“ und installieren Sie die offizielle Docker-Erweiterung von Microsoft.

Sobald die Installation erfolgreich war, wird in der unteren linken Ecke Ihres Editors ein Docker-/Container -Symbol angezeigt, das darauf hinweist, dass der Docker Explorer jetzt verfügbar ist.

Herstellen einer Verbindung zwischen Docker Desktop und VS Code

Wenn Docker Desktop ausgeführt wird, verbindet sich die Docker-Erweiterung nahtlos mit VS Code. Normalerweise ist keine zusätzliche Konfiguration erforderlich, es sei denn, Ihr Docker-Setup erfordert spezielle Konfigurationen (z. B.Remote-Hosts oder WSL-Integration).

Um die Verbindung zu überprüfen, klicken Sie auf das Docker/Container -Symbol, um den Docker Explorer zu starten. Dort können Sie Ihre laufenden und gestoppten Container sowie Images, Registrierungen, Volumes und Netzwerke beobachten.

Verwalten von Containern, Images und Volumes direkt aus VS Code

Dank der vollständigen Integration von Docker in VS Code ist die Verwaltung von Containeraufgaben so einfach wie nie zuvor. Im Bereich „CONTAINER“ können Sie sowohl laufende als auch gestoppte Container bequem anzeigen.

Darüber hinaus erhalten Sie durch Rechtsklicken auf einen beliebigen Container die Möglichkeit, ihn mit nur einem Klick zu starten, zu stoppen, neu zu starten oder zu entfernen.

Sie können auch neue Images abrufen, Images aus vorhandenen Setups erstellen oder nicht verwendete Images einfach bereinigen. Um beispielsweise ein nicht mehr benötigtes Image zu löschen, klicken Sie einfach mit der rechten Maustaste darauf und wählen Sie Entfernen.

Darüber hinaus ist die Verwaltung der mit Ihren Containern verknüpften Volumes unkompliziert: Klicken Sie mit der rechten Maustaste auf das gewünschte Volume, um es zu prüfen oder zu ändern.

Sie können auch Netzwerke, Register und Docker-Kontexte erkunden und verwalten und auf einen Hilfe- und Feedbackbereich zugreifen, wodurch Sie Ihren Entwicklungsworkflow weiter optimieren können.

Erstellen und Ausführen einer containerisierten Anwendung in VS Code

Als praktisches Beispiel erstellen wir eine einfache Node.js Express-Anwendung, um die Möglichkeiten der Docker-Erweiterung zu veranschaulichen. Erstellen Sie zunächst einen neuen Ordner in VS Code für Ihr Projekt. Erstellen Sie in diesem Ordner eine Datei mit dem Namen index.jsund geben Sie den folgenden Code ein:

Dieser grundlegende Codeausschnitt richtet eine kleine Express-App ein, die auf Port 4000 lauscht und beim Zugriff auf die Stamm-URL (/) mit der Meldung „Willkommen bei unserer Express-App!“ antwortet. Er bildet die Grundlage für das Testen Ihres Dockerfiles.

Als Nächstes benötigen Sie ein Dockerfile. Anstatt ein Dockerfile manuell zu erstellen und dessen Anweisungen anzugeben, kann die Docker-Erweiterung diesen Vorgang erleichtern.Öffnen Sie die Befehlspalette, indem Sie ⇧⌘Pauf einem Mac oder Ctrl+ Shift+ Punter Windows drücken und den Befehl eingeben Add Docker files to Workspace.

Docker-Dateien zum Arbeitsbereich hinzufügen

Wählen Sie aus den bereitgestellten Optionen Node.js als Ihre Anwendungsplattform aus.

Verweisen Sie auf die Datei „package.json“ im Stammverzeichnis Ihres Projekts. Diese Datei ist die primäre Konfigurationsdatei für Ihre Anwendung und unterstützt die Docker-Erweiterung beim Generieren wichtiger Docker-bezogener Dateien.

Geben Sie als Nächstes die Portnummer an, die Ihre App verwenden wird, damit Docker sie entsprechend verfügbar machen kann.

Wählen Sie „Ja“, wenn Sie aufgefordert werden, die Docker Compose-Datei einzuschließen.

Die Docker-Erweiterung generiert nun je nach Ihrer Auswahl eine Docker-Datei, eine „.dockerignore“-Datei und eine „compose.yaml“-Datei.

Um mit der Erstellung Ihres Docker-Images fortzufahren, klicken Sie mit der rechten Maustaste auf die Docker-Datei und wählen Sie „Image erstellen“ oder führen Sie alternativ „Docker-Images: Image erstellen“ aus der Befehlspalette aus.

Navigieren Sie nach dem Build-Prozess zum Abschnitt „Images“ im Docker Explorer, um Ihr neu erstelltes Projekt dort anzuzeigen:

Um das Image jetzt auszuführen, öffnen Sie die Befehlspalette und führen Sie es aus container images: runoder klicken Sie einfach mit der rechten Maustaste auf Ihr Image und wählen Sie Ausführen.

Wählen Sie Ihr neuestes Bild aus der angezeigten Liste aus.

Abschließend können Sie überprüfen, ob Ihre Anwendung ausgeführt wird, indem Sie den Abschnitt „Container“ im Docker Explorer prüfen.

Um auf Ihre App zuzugreifen, klicken Sie mit der rechten Maustaste auf den laufenden Container im Docker Explorer und wählen Sie Im Browser öffnen.

Dadurch können Sie den Container in Aktion sehen, wobei Ihre Anwendung über den zuvor angegebenen Port zugänglich ist.

Abschluss

Die Integration von Docker in Visual Studio Code optimiert den Entwicklungsprozess und ermöglicht Entwicklern die effiziente Erstellung, Ausführung und Steuerung von Containern direkt aus ihrer Programmierumgebung. Nach Abschluss der Einrichtung können Sie Docker-Dateien erstellen, durch Container und Images navigieren und Protokolle oder Terminalausgaben mit nur einem Klick anzeigen. Diese Integration vereinfacht nicht nur das Ausführen und Testen von Anwendungen, sondern sorgt auch für einen organisierten und produktiven Workflow.

Quelle & Bilder