Detaillierter Prozess zur Verwendung von Vscode in Kombination mit Docker für die Entwicklung

Vorwort

Durch die Verwendung von Docker und VS Code kann die gesamte lokale Entwicklungsumgebung optimiert und der Projektfortschritt beschleunigt werden. Die Verwendung desselben Basisimages in allen Umgebungen erleichtert die Standardisierung, da allen Entwicklern dieselben Editortools zur Verfügung gestellt werden.

Das Team eines großen Projekts muss zunächst sicherstellen, dass die Entwicklungsumgebung, beispielsweise Installationsabhängigkeiten und Kernel-Versionen, vereinheitlicht ist. Um das Konsistenzproblem in der Entwicklungsumgebung zu lösen, besteht der herkömmliche Ansatz darin, Richtlinien zu formulieren, an die sich die Entwickler halten müssen. Trotzdem stößt der eigentliche Entwicklungsprozess nach wie vor auf verschiedene Hindernisse.

Die allgemeine Methode zum Einrichten der Umgebung ist in der folgenden Abbildung dargestellt:

Eine andere Lösung ist eine mit allen erforderlichen Bibliotheken und Abhängigkeiten vorkonfigurierte Entwicklungsumgebung, die Entwickler in Containern entbündeln können. Entwickler können dann in der isolierten Umgebung arbeiten, die der Container bereitstellt. Dadurch wird die Zeit, die Entwickler zwischen dem Klonen eines Code-Repositorys und dem Beginn der Arbeit daran verbringen, erheblich reduziert.

Wir stellen nicht nur allen Entwicklern dieselbe Umgebung zur Verfügung, sondern können dies auch nutzen, um automatisch bestimmte Erweiterungen zu installieren, die Ihr Projekt erfordert. Dadurch wird eine inkonsistente Verwendung der Tools vermieden und Entwicklern wird die manuelle Installation erspart.

Folgendes wird durch die Verwendung von Docker mit der Remote – Containers-Erweiterung für VS Code erreicht.

aufstellen

In diesem Artikel gebe ich ein Beispiel für eine JavaScript-Anwendung, die in einer Node-Umgebung ausgeführt wird. Lesen Sie „Entwickeln in Containern“ für eine ausführliche Dokumentation aller Technologie-Stacks.

Wenn Sie Docker und VS Code noch nicht installiert haben, installieren Sie diese zuerst. Installieren Sie die Remote – Containers-Erweiterung in VS Code. Stellen Sie sicher, dass Docker auf Ihrem Computer ausgeführt wird.

Gehen Sie zu Ihrem Projekt und erstellen Sie im Stammverzeichnis einen Ordner namens .devcontainer. Dieser neue Ordner enthält die Konfigurationsdateien, die zur Entwicklung des Containers erforderlich sind.

Erstellen Sie Dockerfile und devcontainer.json in .devcontainer und fügen Sie die folgende Konfiguration hinzu.

Die Dockerfile-Datei lautet wie folgt

# Geben Sie das Basis-Image an, das Ihr Entwicklungscontainer verwenden soll.
# Aus Konsistenzgründen können Sie genau dasselbe Basis-Image verwenden, das Ihre Anwendung in der Produktion verwenden würde.
# Das könnte Überraschungen wie „funktioniert lokal, aber nicht in PROD“ verhindern.

VON Knoten:14.17.0-alpine

# Zusätzlich können Sie beim Konfigurieren des Basis-Images andere Abhängigkeiten für die Umgebung installieren.
# In diesem Beispiel installiere ich Git, da die Alpine-Version von Node ohne Git ausgestattet ist. 

APK-Update ausführen
RUN apk add git

Die Datei devcontainer.json sieht wie folgt aus

{
    "Name": "DevContainer ReactApp",

    // Stellen Sie dem Dev-Container eine Docker-Datei zur Verfügung, mit der er ein Image erstellen und den Container ausführen kann.
    "dockerFile": "Dockerdatei",

    // Befehl(e), die ausgeführt werden sollen, bevor der Container erstellt wird.
    // In diesem Fall installieren wir die Knotenmodule.
    "initializeCommand": "Garn installieren",

    // Startet den Entwicklungsserver bei jedem Start des Containers.
    // Dies wird auch beim erneuten Öffnen des Containers ausgelöst. 
    "postStartCommand": "Garnstart",

    // Leiten Sie die im Container ausgeführten Ports Ihrer Anwendung an die lokale Maschine weiter.
    "forwardPorts": [3000],

    // Erforderliche VSC-Codeerweiterungen, die Sie automatisch installieren möchten, damit die Entwickler sie verwenden können.
    "Erweiterungen": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "eamodio.gitlens"
    ]

    // Verwenden Sie die devcontainer.json-Referenz, um alle möglichen Konfigurationen zu erkunden.
    // https://code.visualstudio.com/docs/remote/devcontainerjson-reference
}

Sobald das erledigt ist, müssen wir den Container bauen. Verwenden Sie hierzu „Ordner im Container öffnen“ oder „Im Container erneut öffnen“ aus der VS Code-Befehlspalette.

Dadurch sollte der Entwicklungscontainer initialisiert werden. Es zieht das Docker-Basisimage, konfiguriert den Container und startet den Entwicklungsserver.

Abschluss

Das Erstellen und Konfigurieren eines Containers ist eine einmalige Aktivität, die Zeit in Anspruch nimmt. Wenn keine Änderungen vorgenommen werden, sind nachfolgende Umbauten schneller möglich. Wenn sich jedoch devcontainer.json oder Dockerfile ändert, ist ein Neuaufbau erforderlich, um die Änderungen anzuwenden. Wenn Sie versuchen, es direkt erneut zu öffnen, werden Sie zum Neuaufbau aufgefordert.

Dies ist das Ende dieses Artikels über die Verwendung von Vscode in Kombination mit Docker für die Entwicklung. Weitere relevante Inhalte zur Entwicklung von Vscode in Kombination mit Docker finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!