Docker in Visual Studio Code integrieren

Warum Docker in VS Code nutzen

Die Integration von Docker in VS Code verkürzt Feedback-Zyklen: Sie sehen Container, Images, Volumes und Netzwerke visuell, öffnen Logs oder ein Terminal mit einem Klick und erzeugen Dockerfiles automatisch. Für Entwickler, DevOps-Engineers und Tester reduziert das den Kontextwechsel zwischen Editor und Terminal.

Wichtig: Voraussetzungen sind eine installierte Docker-Engine (z. B. Docker Desktop) und Visual Studio Code. Auf Windows mit WSL2 sollten WSL-Integration und Ressourcen korrekt konfiguriert sein.

Installation der Docker-Erweiterung in VS Code

1. Prüfen Sie, ob Docker (Docker Desktop oder Docker Engine) und VS Code installiert sind.
2. Öffnen Sie die Erweiterungsansicht in VS Code (Seitenleiste oder Strg+Shift+X).
3. Suchen Sie nach “Docker” und installieren Sie die offizielle Erweiterung von Microsoft.

Nach erfolgreicher Installation erscheint unten links im Editor ein Symbol mit der Bezeichnung Docker/Containers — das ist der Docker Explorer.

Verbindung von Docker Desktop mit VS Code

Wenn Docker Desktop läuft, verbindet sich die Docker-Erweiterung automatisch. Zusätzliche Konfiguration ist nur notwendig, wenn Sie Remote-Docker-Hosts verwenden, eine spezielle TLS-Konfiguration benötigen oder WSL-Integration anpassen müssen.

So prüfen Sie die Verbindung:

• Klicken Sie auf das Docker/Containers-Symbol, um den Docker Explorer zu öffnen.
• Kontrollieren Sie die Sektionen: Containers, Images, Registries, Volumes und Networks.

Container, Images und Volumes in VS Code verwalten

Im Docker Explorer sehen Sie laufende und gestoppte Container, vorhandene Images und Volumes. Viele Operationen lassen sich per Rechtsklick ausführen: Start, Stop, Restart, Remove, View Logs oder Open Shell.

Zum Entfernen eines nicht mehr benötigten Images wählen Sie Remove im Kontextmenü.

Volumes lassen sich inspizieren und verwalten, wenn Sie sie im Explorer auswählen.

Sie können außerdem Netzwerke, Registries und Docker-Kontexte verwalten oder Hilfe und Feedback aufrufen.

Beispiel: Containerisierte Node.js-App bauen und starten

Wir erstellen eine kleine Express-App, generieren Docker-Dateien automatisch und starten ein Image aus VS Code.

1. Projekt vorbereiten

• Legen Sie einen neuen Ordner in VS Code an.
• Erstellen Sie eine Datei index.js und fügen Sie folgenden Code ein:

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}`);  
});

Diese App antwortet auf GET / mit einer Willkommensnachricht und läuft auf Port 4000.

2. Docker-Dateien automatisch erzeugen

Öffnen Sie die Command Palette (⇧⌘P auf macOS oder Strg+Shift+P unter Windows) und geben Sie Add Docker files to Workspace ein. Folgen Sie den Dialogen:

• Wählen Sie Node.js als Plattform.
• Wählen Sie package.json im Projektstamm (wenn vorhanden).
• Geben Sie den Port an, der exposed werden soll (z. B. 4000).
• Bestätigen Sie, ob Sie eine Docker Compose-Datei hinzufügen möchten.

Die Erweiterung erzeugt in der Regel eine Dockerfile, eine .dockerignore und optional eine compose.yaml.

3. Image bauen und starten

• Rechtsklicken Sie auf die Dockerfile und wählen Sie Build Image oder nutzen Sie Docker Images: Build Image in der Command Palette.

Nach dem Build sehen Sie das neue Image im Images-Bereich.

Im Images-Tab können Sie das Image auswählen und Run ausführen, um einen Container zu starten.

Im Containers-Bereich erscheint der laufende Container.

Öffnen Sie die App im Browser per Open in Browser im Kontextmenü des Containers.

Die Ausgabe zeigt, dass der Container läuft und die Anwendung erreichbar ist.

Mini-Methodik: Schnellstart-Checklist (Playbook)

1. Installieren: Docker und VS Code.
2. Erweiterung: Docker (Microsoft) installieren.
3. Projekt: Code + package.json vorbereiten.
4. Generieren: Add Docker files to Workspace ausführen.
5. Bauen: Dockerfile → Build Image.
6. Starten: Image → Run.
7. Testen: Open in Browser / Logs prüfen.
8. Aufräumen: Unbenutzte Images/Container entfernen.

Kurze Befehlsübersicht (Cheat Sheet)

• Docker extension öffnen: Klick auf Docker-Symbol unten links.
• Build image: Rechtsklick Dockerfile → Build Image.
• Run image: Images → Rechtsklick → Run.
• Logs anzeigen: Container → Rechtsklick → View Logs.
• Shell öffnen: Container → Attach Shell.

Rollenbasierte Checklisten

Entwickler:

• Lokales Image bauen und schnell debuggen.
• Werkzeuge: Open Shell, View Logs.

DevOps:

• Docker Compose hinzufügen, Multi-Stage Builds prüfen.
• Registry-Zugriff konfigurieren.

QA:

• Container für Tests automatisiert starten.
• Prüfen, ob Ports korrekt gemappt sind und Volumes persistent.

Häufige Probleme und Lösungen

• Problem: VS Code zeigt keine Verbindung zu Docker an.

  • Lösung: Prüfen Sie, ob Docker Desktop läuft und VS Code Zugriff auf den Docker-Socket hat. Unter Windows: WSL2-Integration aktivieren.

• Problem: Port nicht erreichbar von Host.

  • Lösung: Prüfen Sie die port-Expose-Einstellung in Dockerfile/Compose und ob der Container mit dem richtigen Netzwerk gestartet wurde.

• Problem: Build scheitert wegen fehlender Abhängigkeiten.

  • Lösung: Package.json prüfen, Node-Version im Dockerfile anpassen, Cache leeren und neu bauen.

• Problem: Rechteprobleme beim Zugriff auf Dateien im Container (Windows + WSL).

  • Lösung: Verwenden Sie bind mounts mit korrekten Berechtigungen oder kopieren Sie Dateien in das Image.

Kriterien für erfolgreiche Integration

• Docker Explorer listet mindestens ein laufendes oder gestopptes Container-Objekt.
• Image lässt sich erfolgreich bauen ohne Fehler.
• Container antwortet auf die erwarteten Ports und Routen.
• Logs sind über VS Code einsehbar und eine Shell ist attachbar.

Best Practices und Sicherheitshinweise

• Verwenden Sie .dockerignore, um unnötige Dateien vom Build auszuschließen.
• Nutzen Sie Multi-Stage Builds für kleinere Images und weniger Angriffsfläche.
• Speichern Sie geheimen Schlüssel nicht im Image; verwenden Sie Build-Args, Secrets oder Umgebungsvariablen aus sicheren Stores.
• Halten Sie die Docker-Erweiterung aktuell und prüfen Sie Changelogs bei Updates.

Fazit

Die Docker-Erweiterung für Visual Studio Code bringt viele Alltagsaufgaben direkt in den Editor: Image-Builds, Container-Lifecycle, Logs und Shell-Zugriff. Für kleine bis mittelgroße Projekte ist das ein großer Produktivitätsgewinn — besonders, wenn Sie häufiger zwischen Code und Container wechseln.

Wichtig: Für produktive Pipelines und Sicherheitsanforderungen bleibt weiterhin eine separate CI/CD- und Registry-Konfiguration sinnvoll.

Zusammenfassung:

• Schnell Dockerfiles erzeugen und Images bauen.
• Container direkt in VS Code starten, stoppen und debuggen.
• Nutzt .dockerignore, Compose und Multi-Stage Builds für saubere Images.