Dev Containers Tutorial
Dieses Tutorial führt Sie durch das Ausführen von Visual Studio Code in einem Docker-Container mithilfe der Dev Containers-Erweiterung. Sie benötigen keine Vorkenntnisse in Docker, um dieses Tutorial abzuschließen.
VS Code innerhalb eines Docker-Containers auszuführen, kann aus vielen Gründen nützlich sein. In dieser Anleitung konzentrieren wir uns jedoch darauf, einen Docker-Container zum Einrichten einer Entwicklungsumgebung zu verwenden, die von Ihrer lokalen Umgebung getrennt ist.
Voraussetzungen
Sie benötigen Visual Studio Code installiert.
Docker installieren
Docker wird benötigt, um Ihre Container zu erstellen und zu verwalten.
Docker Desktop
Laden Sie Docker Desktop oder eine alternative Docker-Option wie Docker auf einem Remote-Host oder eine Docker-konforme CLI herunter und installieren Sie diese.
Docker starten
Starten Sie die Docker Desktop-Anwendung, um Docker zu starten. Sie wissen, dass es läuft, wenn Sie in der Aktivitätsleiste nachsehen und das Docker-Wal-Symbol sehen.
Docker kann einige Minuten zum Starten benötigen. Wenn das Wal-Symbol animiert ist, ist es wahrscheinlich noch im Startvorgang. Sie können auf das Symbol klicken, um den Status anzuzeigen.
Docker prüfen
Sobald Docker läuft, können Sie bestätigen, dass alles funktioniert, indem Sie ein neues Terminalfenster öffnen und den folgenden Befehl eingeben:
docker --version
# Docker version 18.09.2, build 6247962
Erweiterung installieren
Die Dev Containers-Erweiterung ermöglicht es Ihnen, Visual Studio Code innerhalb eines Docker-Containers auszuführen.
Installation prüfen
Nach der Installation der Dev Containers-Erweiterung sehen Sie ein neues Statusleistenelement ganz links.
Das Remote-Statusleistenelement kann Ihnen schnell anzeigen, in welchem Kontext VS Code ausgeführt wird (lokal oder remote), und ein Klick auf das Element öffnet die Dev Containers-Befehle.
Beispiel herunterladen
Um einen Docker-Container zu erstellen, werden wir ein GitHub-Repository mit einem Node.js-Projekt öffnen.
Öffnen Sie die Befehlspalette (F1), um den Befehl Dev Containers: Try a Dev Container Sample... auszuführen und wählen Sie das Node-Beispiel aus der Liste aus.
Hinweis: Es gibt weitere Dev Container-Beispiele wie vscode-remote-try-python oder vscode-remote-try-java. Dieses Tutorial verwendet jedoch vscode-remote-try-node.
Auf das Erstellen des Containers warten
Das Fenster wird dann neu geladen. Da der Container noch nicht existiert, erstellt VS Code einen und klont das Beispiel-Repository in ein isoliertes Container-Volume. Dies kann einige Zeit dauern, und eine Fortschrittsanzeige informiert Sie über den Status. Glücklicherweise ist dieser Schritt beim nächsten Öffnen des Ordners nicht notwendig, da der Container bereits existiert.
Nachdem der Container erstellt wurde, verbindet sich VS Code automatisch damit und ordnet den Projektordner von Ihrem lokalen Dateisystem dem Container zu.
Container prüfen
Sobald der Container läuft und Sie verbunden sind, sollten Sie sehen, wie sich Ihr Remote-Kontext unten links in der Statusleiste ändert.
Umgebung prüfen
Einer der Vorteile der Entwicklung in einem Container ist, dass Sie spezifische Versionen von Abhängigkeiten verwenden können, die Ihre Anwendung benötigt, ohne Ihre lokale Entwicklungsumgebung zu beeinträchtigen.
Der spezifische Container für dieses Tutorial hat Node.js v18 installiert, was Sie überprüfen können, indem Sie ein neues Terminal öffnen Terminal > Neues Terminal (⌃⇧` (Windows, Linux Ctrl+Shift+`)) und Folgendes eingeben:
node --version; npm --version
Dies sollte die folgenden Versionen anzeigen:
Anwendung ausführen
Wir können nun F5 drücken, um die Anwendung innerhalb des Containers auszuführen. Sobald der Prozess gestartet ist, navigieren Sie zu https://:3000 und Sie sollten den einfachen Node.js-Server laufen sehen!
Verbindung zum Container beenden
Sie können Ihre Sitzung im Container beenden und mit Datei > Remote-Verbindung schließen wieder mit VS Code lokal arbeiten.
Wie es funktioniert
Der nächste Abschnitt beschreibt detaillierter, wie die Dev Containers-Erweiterung Ihre Container einrichtet und konfiguriert.
Die Dev Containers-Erweiterung verwendet die Dateien im Ordner .devcontainer, nämlich devcontainer.json, und optional eine Dockerfile oder docker-compose.yml, um Ihre Dev-Container zu erstellen.
In dem gerade erkundeten Beispiel verfügt das Projekt über einen Ordner .devcontainer mit einer devcontainer.json darin. Die devcontainer.json verwendet das Image mcr.microsoft.com/devcontainers/javascript-node:0-18. Sie können dieses Image detaillierter im devcontainers/images-Repository untersuchen.
Zuerst wird Ihr Image aus der bereitgestellten Dockerfile oder dem Image-Namen erstellt, in diesem Beispiel mcr.microsoft.com/devcontainers/javascript-node:0-18. Dann wird ein Container mit einigen Einstellungen aus der devcontainer.json erstellt und gestartet. Abschließend wird Ihre Visual Studio Code-Umgebung gemäß den Einstellungen in der devcontainer.json installiert und konfiguriert. Zum Beispiel installiert der Dev-Container in diesem Beispiel die Erweiterung streetsidesoftware.code-spell-checker.
Hinweis: Zusätzliche Konfigurationen werden basierend auf dem Basis-Image bereits zum Container hinzugefügt. Zum Beispiel sehen wir oben die Erweiterung
streetsidesoftware.code-spell-checker, und der Container wird auch"dbaeumer.vscode-eslint"enthalten, da dies Teil vonmcr.microsoft.com/devcontainers/typescript-nodeist. Dies geschieht automatisch beim Vorab-Build mit devcontainer.json, worüber Sie im Abschnitt Vorab-Build mehr erfahren können.
Sobald all dies abgeschlossen ist, verbindet sich Ihre lokale Kopie von Visual Studio Code mit dem Visual Studio Code Server, der in Ihrem neuen Dev-Container läuft.
devcontainer.json
Die devcontainer.json ist im Grunde eine Konfigurationsdatei, die bestimmt, wie Ihr Dev-Container erstellt und gestartet wird.
//devcontainer.json
{
"name": "Node.js",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
"customizations": {
"vscode": {
"settings": {},
"extensions": ["streetsidesoftware.code-spell-checker"]
}
},
// "forwardPorts": [3000],
"portsAttributes": {
"3000": {
"label": "Hello Remote World",
"onAutoForward": "notify"
}
},
"postCreateCommand": "yarn install"
// "remoteUser": "root"
}
Das obige Beispiel stammt aus dem vscode-remote-try-node-Repository, das wir im Tutorial verwendet haben.
| Option | Beschreibung |
|---|---|
image |
Der Name eines Images in einer Container-Registry (Docker Hub, GitHub Container Registry, Azure Container Registry), das VS Code zur Erstellung des Dev-Containers verwenden soll. |
dockerfile |
Anstatt auf ein image zu verweisen, können Sie stattdessen die Eigenschaft dockerfile verwenden, die der relative Pfad zu einer Dockerfile ist, die Sie als Ihr Image verwenden möchten. |
features |
Ein Objekt von Dev Container Feature-IDs und zugehörigen Optionen, die hinzugefügt werden sollen. |
customizations |
Konfigurieren Sie Tools-spezifische Eigenschaften, wie die Eigenschaften settings und extensions für VS Code. |
settings |
Fügt Standardwerte für settings.json in eine Container/Machine-spezifische Einstellungsdatei ein, wie z. B. "terminal.integrated.defaultProfile.linux": "bash". |
extensions |
Eine Liste von Erweiterungs-IDs, die die Erweiterungen angeben, die beim Erstellen im Container installiert werden sollen. |
forwardPorts |
Machen Sie eine Liste von Ports innerhalb des Containers lokal verfügbar. |
portsAttributes |
Legen Sie Standardeigenschaften für bestimmte weitergeleitete Ports fest. |
postCreateCommand |
Ein Befehlsstring oder eine Liste von Befehlsargumenten, die nach der Erstellung des Containers ausgeführt werden sollen. |
remoteUser |
Überschreibt den Benutzer, als der VS Code im Container ausgeführt wird (zusammen mit Unterprozessen). Standardmäßig der containerUser. |
Sie können die vollständige Liste der devcontainer.json-Optionen überprüfen.
Glückwunsch
Herzlichen Glückwunsch, Sie haben dieses Tutorial erfolgreich abgeschlossen!
Dies war ein kurzer Überblick über die Möglichkeiten von Dev-Containern. Als nächsten Schritt empfehlen wir Ihnen, sich damit zu beschäftigen, wie Sie einen vorhandenen Ordner von Ihrem Rechner in einem Container öffnen oder ein GitHub-Repository oder eine PR in einem Container öffnen können.
Schauen Sie sich die anderen Remote Development-Erweiterungen an.
Oder erhalten Sie sie alle, indem Sie das Remote Development-Erweiterungspaket installieren.
Fehlerbehebung
Docker-Kontext überprüfen
Wenn Sie keine frische Docker-Installation verwenden und das Beispiel Dev Containers: Try a Dev Container Sample... Probleme mit dem aktuellen Kontext hat, sollten Sie Ihren Docker-Kontext überprüfen. Frische Installationen haben einen "default"-Kontext, den Sie wieder als aktuellen Kontext festlegen können.
# Displays the list of contexts, '*' denotes the current context
docker context list
# Switches the list to the 'default' context
docker context use default