Container mit VS Code inspizieren

31. Oktober 2019 von Bowden Kelly, @bowdenk7

Bei der Entwicklung containerisierter Anwendungen ist es üblich, Build- und Laufzeitprobleme zu debuggen, indem man eine Shell an den laufenden Container anhängt, z. B. mit docker exec --it {containerID} /bin/sh.

Diese Technik ermöglicht es Ihnen, die Containerumgebung über die Kommandozeile zu inspizieren, bietet aber keine reichhaltigen Werkzeuge zur Diagnose von Problemen.

In diesem Beitrag erfahren Sie, wie Sie Visual Studio Code an Ihren Container anhängen können, um die volle Leistungsfähigkeit von VS Code, einschließlich Debugging, zur Inspektion des Containers zu nutzen, herauszufinden, was schief läuft, und es zu beheben.

Die Erweiterung Dev Containers, die im Mai dieses Jahres veröffentlicht wurde, ermöglicht es Ihnen, Ihr lokales VS Code mit einem Container-Host zu verbinden und dabei alle Ihre personalisierten Einstellungen, Designs und Tastenkombinationen beizubehalten.

Voraussetzungen

Dieser Blogbeitrag setzt voraus, dass Sie Docker Desktop und Visual Studio Code installiert haben. Sie benötigen außerdem die Erweiterung Dev Containers. Um die Dev Containers-Erweiterung zu installieren, öffnen Sie die Erweiterungsansicht (⇧⌘X (Windows, Linux Ctrl+Shift+X)), suchen Sie nach "Dev Containers", wählen Sie Installieren und starten Sie VS Code neu, falls dazu aufgefordert.

Die Anwendung

Als Erstes benötigen wir eine Anwendung, die wir in einem Container ausführen können. Wenn Sie bereits eine haben, großartig! Sie können diesen Schritt überspringen. Wenn nicht, können Sie diese einfache Node.js Express-Anwendung klonen.

Hinweis: Sie müssen Node.js nicht lokal installiert haben, wir werden diese Anwendung im Container ausführen!

git clone https://github.com/microsoft/vscode-express-sample.git

Diese Anwendung verfügt über eine einfache Dockerfile, die auf dem Node 10-Image basiert, sowie eine docker-compose.yml-Datei, die wir zum Ausführen des Images, zum Exponieren der entsprechenden Ports und zum Mappen des lokalen Dateisystems verwenden werden. Wir führen Node mit dem Flag –inspect aus, damit wir die App debuggen können, wie wir es beim lokalen Ausführen tun würden. In einer realen Anwendung möchten Sie wahrscheinlich eine separate Docker Compose-Datei für Ihre Produktionsbereitstellung.

Hinweis: Sie benötigen keine Docker Compose-Datei, Sie können sich auch an Container anhängen, die mit einer einzelnen Dockerfile erstellt wurden.

Erstellen und ausführen

Um die Anwendung zu erstellen und auszuführen, installieren wir zuerst die Abhängigkeiten und führen dann docker-compose up im Terminal/Eingabeaufforderung aus. Dadurch wird das Node-Basisimage heruntergeladen, Abhängigkeiten kopiert und der Container gestartet.

docker-compose up

Wenn alles funktioniert hat, sollten Sie eine Ausgabe wie diese sehen

Und Sie sollten in der Lage sein, zu https://:3000 zu navigieren und Folgendes zu sehen

An den Container anhängen

Wir können nun die Dev Containers-Erweiterung verwenden, um uns an unseren laufenden Container anzuhängen, die Umgebung zu inspizieren und die Anwendung zu debuggen.

Wählen Sie im Aktivitätsleiste den Remote Explorer aus, um eine Liste der laufenden Container anzuzeigen, an die Sie sich im Abschnitt Andere Container anhängen können. Suchen Sie den Container, den wir gerade gestartet haben. Er hat den Namen 'express_server_1'. Hängen Sie sich dann mit der Schaltfläche Mit Container verbinden daran an. Dieser Container wird nun im Abschnitt Angehängte Container des Remote Explorers angezeigt.

Dies startet ein neues VS Code-Fenster (Instanz), das die folgende Benachrichtigung unten rechts anzeigt.

Während dieser Zeit installiert VS Code eine Instanz des VS Code Servers im Container, in dem Ihre App läuft. Um weitere Details und den Fortschritt dieses Installationsschritts zu sehen, können Sie auf den Link Details in der Benachrichtigung klicken. Sobald der VS Code-Server installiert ist, verbindet sich Ihr lokaler VS Code-Client mit dem Remote VS Code-Server. Das Ergebnis ist, dass Ihre lokale VS Code-Instanz mit all Ihren Einstellungen, Designs und Tastenkombinationen mit einem "Backend" verbunden ist, das im Container neben Ihrer Anwendung läuft.

Nach Abschluss der Verbindung haben Sie ein neues VS Code-Fenster mit einer grünen Anzeige unten links, die darauf hinweist, dass diese VS Code-Instanz in einem Remote-Kontext ausgeführt wird. Wenn Sie auf die Anzeige klicken, sehen Sie ein Dropdown-Menü mit Befehlen, die für den aktuellen Remote-Kontext relevant sind.

Gehen wir nun vor und öffnen unsere App, indem wir die Schaltfläche Ordner öffnen auswählen und zu /usr/src/app navigieren. Beachten Sie, dass der Dialog "Ordner öffnen" das Dateisystem des laufenden Containers und nicht das lokale Dateisystem anzeigt.

Sobald Sie Ihren Quellordner geöffnet haben, werden Sie feststellen, dass eine Datei mit dem Dateinamen express-server.json in Ihrem Editor geöffnet wurde. Dieser Name leitet sich vom Namen des Container-Images ab, an das Sie sich angehängt haben. In unserem Beispiel erstellt docker-compose den Image-Namen 'express_server', der sich vom Ordnernamen express und dem Dienstnamen server ableitet, die in der Datei docker-compose.yml definiert sind. Diese Datei ist eine Konfigurationsdatei, die mit Ihrem Image verknüpft ist und Konfigurationseinstellungen speichert, wenn Sie sich an Container anhängen, die auf diesem Image basieren. Wenn Auto-Speichern nicht aktiviert ist, müssen Sie sicherstellen, dass Sie diese Datei speichern. In zukünftigen Sitzungen wird VS Code diesen Quellordner erneut öffnen, wenn Sie sich an dieses Image anhängen.

Hinweis: Sie können diese Datei für den aktuellen Dev-Container anzeigen, indem Sie den Befehl Container-Konfigurationsdatei öffnen aus der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) ausführen.

An diesem Punkt sieht VS Code genauso aus wie ein normales lokales VS Code-Fenster.

Sie können alles tun, was Sie in einem normalen lokalen VS Code-Kontext tun können.

Öffnen Sie beispielsweise app.js. Klicken Sie mit der rechten Maustaste auf Zeile 8 und führen Sie Alle Referenzen finden aus, um alle Verwendungen von usersRouter zu finden. Alle Bearbeitungen werden auf der lokalen Festplatte gespeichert, da wir das lokale Dateisystem mithilfe der docker-compose-Datei in den Container gemountet haben.

Innerhalb des Containers debuggen

Um weiter zu zeigen, wie ähnlich der Dev-Container einer lokalen Umgebung ist, lassen Sie uns einen Debugger anhängen. Wir haben unsere Node-App mit dem Parameter –inspect in docker-compose.yaml gestartet, sodass wir nur noch einen Debugger an diesen Prozess anhängen müssen.

Suchen Sie in der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) nach Debug: An Node-Prozess anhängen und wählen Sie ihn aus. Wahrscheinlich werden mehrere Node-Prozesse im Container ausgeführt. Wir möchten den Prozess, der unsere Anwendung ausführt, also wählen Sie denjenigen aus, der bin/www anzeigt.

Öffnen Sie als Nächstes index.js und setzen Sie einen Haltepunkt in Zeile 6, indem Sie auf die Spalte klicken oder F9 drücken.

res.render('index', { title: 'Express' });

Gehen Sie nun in Ihrem Browser zu https://:3000 und sehen Sie, wie der Haltepunkt wie erwartet ausgelöst wird!

Erweiterungen installieren

Genau wie bei einer normalen VS Code-Instanz können Sie Erweiterungen installieren und verwenden, während Sie an einen Dev-Container angehängt sind.

Abhängig vom Erweiterungstyp kann sie entweder auf der Clientseite oder im Container auf dem Remote VS Code-Server ausgeführt werden. Erweiterungen, die hauptsächlich UI-basiert sind, wie z. B. Designs und Snippets, bleiben auf der Clientseite, während alle anderen Erweiterungen im Container installiert werden. Dies ermöglicht es Ihnen, nur die Erweiterungen zu haben, die Sie in jeder Umgebung benötigen, während eine konsistente Benutzeroberfläche über alle Umgebungen hinweg beibehalten wird.

Wenn Sie die Erweiterungsansicht öffnen (⇧⌘X (Windows, Linux Ctrl+Shift+X)), sehen Sie die Liste der Erweiterungen, die Sie lokal installiert haben, und die Erweiterungen, die Sie in Ihrer aktuellen Container-Instanz installiert haben. Lokal installierte Erweiterungen, die im Container installiert werden müssen (wie die Azure Account-Erweiterung unten), werden ausgegraut angezeigt.

Installieren wir die GitLens-Erweiterung, indem wir 'gitlens' in der Erweiterungsansicht eingeben und dann Im angehängten Container installieren auswählen.

Dies fordert Sie auf, VS Code neu zu starten, und danach sehen Sie kurz die Benachrichtigung Dev Container wird installiert, während der Container und der VS Code-Server mit unserer neu installierten Erweiterung neu gestartet werden.

Sie werden auch feststellen, dass die zuvor gesehene Container-Konfigurationsdatei erneut geöffnet wurde und mit einer neuen Eigenschaft aktualisiert wurde, die die Erweiterungen auflistet, die bei jedem Anhängen an dieses Image installiert werden sollen.

{
  "workspace": "/usr/src/app",
  "extensions": ["eamodio.gitlens"]
}

Öffnen Sie nun eine beliebige Datei, wählen Sie eine Codezeile aus und bemerken Sie die Inline-Git-Informationen, die von GitLens bereitgestellt werden!

Aufräumen

Wenn Sie fertig sind, können Sie entweder den Befehl Remote-Verbindung schließen aus der Befehlspalette ausführen oder einfach das VS Code-Fenster schließen, um die Remote-Verbindung zu beenden.

Führen Sie dann im Terminal/Eingabeaufforderung docker-compose down aus, um den laufenden Container zu stoppen. Dies gibt Speicher frei und gibt alle verwendeten Ports frei.

docker-compose down

Jetzt können Sie einen weiteren Container hochfahren und an einem anderen Projekt arbeiten!

Nächste Schritte

In diesem Blogbeitrag haben wir behandelt, wie Sie die Dev Containers-Erweiterung verwenden können, um sich an Ihre vorhandenen containerisierten Anwendungen anzuhängen.

Sie können auch eine devcontainer.json erstellen, die die Entwicklungsumgebung beschreibt, die Sie erstellen oder an die Sie sich anhängen möchten, und die mit Ihrem Projekt lebt, um sie mit Ihren Teammitgliedern zu teilen.

Weitere nützliche Ressourcen sind die vollständige Dokumentation zur Entwicklung in einem Container, Erweiterte Containerkonfiguration und unser Einführungs-Tutorial zum Erstellen isolierter Entwicklungsumgebungen mit der Dev Containers-Erweiterung.

Viel Spaß beim Remote Coding,

Bowden Kelly, VS Code Program Manager @bowdenk7