Tutorial: Erstellen einer Docker-App mit Visual Studio Code

Artikel
04/12/2023

Dieses Tutorial ist der Anfang einer vierteiligen Einführungsreihe in Docker zur Verwendung mit Visual Studio Code (VS Code). Sie erfahren, wie Sie Docker-Container erstellen und ausführen, Daten beibehalten und mit Docker Compose mehrere Container verwalten.

VS Code bietet eine Docker-Erweiterung, mit der Sie mit einem lokalen Docker Desktop-Dienst arbeiten können. Docker Desktop wird auf Ihrem Computer ausgeführt und verwaltet Ihre lokalen Container, die kompakte virtualisierte Umgebungen sind, die eine Plattform zum Erstellen und Ausführen von Apps bieten. Container sind kleiner und leichter zu verwalten als ein vollständiges Betriebssystem.

In diesem ersten Tutorial lernen Sie Folgendes:

Erstellen Sie einen Docker-Container.
Dieser Schritttyp erstellt ein Containerimage.
Starten eines App-Containers

Voraussetzungen

Installation von Visual Studio Code.
Installierte Docker-Erweiterung für VS Code
Konfigurierte Docker Desktop-Instanz für die Verwendung von Linux-Containern
Ein Docker Hub-Konto. Sie können ein Konto kostenlos erstellen.

Das Tutorial funktioniert mit Windows 10 oder höher und Docker Desktop, das für die Verwendung von Linux-Containern konfiguriert ist.

Erstellen eines Containers

Ein Container ist ein Prozess auf Ihrem Computer. Er ist von allen anderen Prozessen auf dem Hostcomputer isoliert. Für diese Isolation werden Kernelnamespaces und Steuerungsgruppen verwendet.

Ein Container verwendet ein isoliertes Dateisystem. Dieses benutzerdefinierte Dateisystem wird von einem Containerimage bereitgestellt. Das Image enthält alle Komponenten, die zum Ausführen einer Anwendung erforderlich sind, z. B. Abhängigkeiten, Konfigurationen, Skripts und Binärdateien. Das Image enthält auch weitere Konfigurationen wie Umgebungsvariablen, einen Standardbefehl für die Ausführung und andere Metadaten für den Container.

Nachdem Sie die Docker-Erweiterung für VS Code installiert haben, können Sie mit Containern in VS Code arbeiten. Sie können neben den Kontextmenü im Docker-Bereich auch Terminal>Neues Terminal auswählen, um ein Befehlszeilenfenster zu öffnen. Sie können Befehle auch in einem Bash-Fenster ausführen. Sofern nicht anders angegeben, kann jeder Befehl mit der Bezeichnung Bash in einem Bash-Fenster oder im VS Code-Terminal ausgeführt werden.

Legen Sie Docker auf den Linux-Containermodus fest. Wenn Sie zurzeit Windows-Container verwenden und auf Linux-Container umstellen möchten, klicken Sie mit der rechten Maustaste auf das Docker-Symbol im Infobereich, während Docker Desktop ausgeführt wird, und wählen Sie Zu Linux-Containern wechseln.
Wählen Sie in VS Code Terminal>Neues Terminal aus.
Führen Sie diesen Befehl im Terminalfenster oder in einem Bash-Fenster aus.
```
docker run -d -p 80:80 docker/getting-started
```
Dieser Befehl enthält die folgenden Parameter:
- -d: Hiermit wird der Container im getrennten Modus ausgeführt, also im Hintergrund.
- -p 80:80: Hiermit wird Port 80 des Hosts zu Port 80 im Container zugeordnet.
- docker/getting-started: Hiermit wird das zu verwendende Image angegeben.
Tipp

Sie können einzelne Zeichenflags kombinieren, um den vollständigen Befehl zu verkürzen. Der obige Befehl könnte z. B. wie folgt geschrieben werden:
```
docker run -dp 80:80 docker/getting-started
```
Wählen Sie in VS Code links das Docker-Symbol aus, um die Docker-Erweiterung anzuzeigen.

Die Docker-Erweiterung für VS Code zeigt die Container an, die auf Ihrem Computer ausgeführt werden. Sie können auf Containerprotokolle zugreifen und den Containerlebenszyklus verwalten, z. B. können Sie Container beenden und entfernen.

Der Containername, modest_schockley in diesem Beispiel, wird nach dem Zufallsprinzip erstellt. Ihre werden anders heißen.
Klicken Sie mit der rechten Maustaste auf docker/getting-started, um ein Kontextmenü zu öffnen. Klicken Sie auf In Browser öffnen.

Öffnen Sie alternativ einen Browser, und geben Sie http://localhost/tutorial/ ein.

Es wird eine lokal gehostete Seite zu DockerLabs angezeigt.
Klicken Sie mit der rechten Maustaste auf docker/getting-started, um ein Kontextmenü zu öffnen. Wählen Sie Entfernen aus, um diesen Container zu entfernen.

Wenn Sie einen Container über die Befehlszeile entfernen möchten, führen Sie den folgenden Befehl aus, um die Container-ID abzurufen:
```
docker ps
```
Beenden und entfernen Sie den Container dann:
```
docker stop <container-id>
docker rm <container-id>
```
Aktualisieren Sie Ihren Browser. Die zuvor angezeigte Seite „Getting Started“ ist nun nicht mehr verfügbar.

Erstellen eines Containerimages für die App

In diesem Tutorial wird eine einfache Anwendung für To-do-Listen verwendet.

Screenshot shows the sample application with several items added and a text box and button to add new items.

Mit der App können Sie Arbeitselemente erstellen und als erledigt markieren oder löschen.

Erstellen Sie ein Dockerfile, um die Anwendung zu erstellen. Ein Dockerfile ist ein textbasiertes Skript mit Anweisungen, das zum Erstellen eines Containerimages verwendet wird.

Rufen Sie das Repository Docker Getting Started Tutorial auf, und wählen Sie Code>Download ZIP aus. Entpacken Sie den Inhalt in einen lokalen Ordner.
Wählen Sie in VS Code Datei>Ordner öffnen aus. Navigieren Sie zum Ordner app im entpackten Projekt, und öffnen Sie diesen Ordner. Es sollten die Datei package.json und die zwei Ordner src und spec aufgeführt werden.
Erstellen Sie eine Datei mit dem Namen Dockerfile mit folgendem Inhalt im selben Ordner wie die Datei package.json:
```
FROM node:20-alpine
RUN apk add --no-cache python3 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]
```
Hinweis

Achten Sie darauf, dass die Datei keine Erweiterung wie .txt besitzt.
Klicken Sie im Datei-Explorer links in VS Code mit der rechten Maustaste auf das Dockerfile, und wählen Sie dann Image erstellen aus. Geben Sie getting-started als Tag für das Image in das Texteingabefeld ein.

Das Tag ist der Anzeigename für das Image.

Verwenden Sie den folgenden Befehl, um ein Containerimage über die Befehlszeile zu erstellen.
```
docker build -t getting-started .
```
Hinweis

Wechseln Sie in einem externen Bash-Fenster zum app Ordner mit dem Dockerfile, um diesen Befehl auszuführen.

Sie haben das Dockerfile verwendet, um ein neues Containerimage zu erstellen. Möglicherweise haben Sie festgestellt, dass viele Schichten heruntergeladen wurden. Das Dockerfile beginnt mit dem Image node:20-alpine. Sofern sich das Image nicht bereits auf Ihrem Computer befand, musste es heruntergeladen werden.

Nachdem das Image heruntergeladen wurde, kopiert das Dockerfile Ihre Anwendung und verwendet yarn, um die Abhängigkeiten Ihrer Anwendung zu installieren. Mit dem Wert CMD im Dockerfile wird der Standardbefehl festgelegt, der ausgeführt werden soll, wenn ein Container über dieses Image gestartet wird.

Das Zeichen . am Ende des Befehls docker build weist Docker an, dass im aktuellen Verzeichnis nach dem Dockerfile gesucht werden soll.

Starten Ihres App-Containers

Nachdem Sie nun über ein Image verfügen, können Sie die Anwendung ausführen.

Verwenden Sie den folgenden Befehl, um Ihren Container zu starten:
```
docker run -dp 3000:3000 getting-started
```
Der Parameter -d gibt an, dass Sie den Container im getrennten Modus im Hintergrund ausführen. Der Wert -p erstellt eine Zuordnung zwischen dem Hostport 3000 und dem Containerport 3000. Ohne die Portzuordnung könnten Sie nicht auf die Anwendung zugreifen.
Klicken Sie nach einigen Sekunden in VS Code im Docker-Bereich unter CONTAINER mit der rechten Maustaste auf getting-started, und wählen Sie Im Browser öffnen aus. Sie können alternativ http://localhost:3000 in einem Webbrowser aufrufen.

Die App sollte nun ausgeführt werden.
Fügen Sie ein oder zwei Elemente hinzu, um zu testen, ob die App wie erwartet funktioniert. Sie können Elemente als abgeschlossen kennzeichnen oder entfernen. Ihr Front-End speichert Elemente erfolgreich im Back-End.

Nächste Schritte

Sie haben dieses Tutorial abgeschlossen und verfügen über einen ausgeführten Aufgabenlisten-Manager mit einigen Elementen. Sie haben gelernt, Containerimages zu erstellen und eine containerisierte App auszuführen.

Behalten Sie alles, was Sie bereits erarbeitet haben, so bei, um mit dieser Tutorialreihe fortzufahren. Arbeiten Sie als Nächstes Teil 2 dieser Reihe durch:

Aktualisieren und Freigeben einer Docker-App

Hier sind einige Ressourcen, die für Sie nützlich sein können: