Lernprogramm: Erstellen einer Container-App mit Visual Studio Code

2025-05-14

Dieses Lernprogramm ist der Anfang einer vierteiligen Reihe, die Docker für die Verwendung mit Visual Studio Code (VS Code) einführt. Sie erfahren, wie Sie Docker-Container erstellen und ausführen, Datenspeichern und mehrere Container mit Docker Compose verwalten.

VS Code bietet eine Containertools-Erweiterung, mit der Sie mit einem lokalen Docker-Desktopdienst 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 erfordern nicht die Größe und den Aufwand eines vollständigen Betriebssystems.

In diesem ersten Lernprogramm erfahren Sie, wie Sie:

Erstellen Sie einen Docker-Container.
Erstellen Sie ein Containerimage.
Starten Sie einen App-Container.

Voraussetzungen

Visual Studio Code installiert
Containertools VS Code Extension installiert.
Docker Desktop für die Verwendung von Linux-Containern konfiguriert.
Ein Docker Hub Konto. Sie können kostenlos ein Konto erstellen.

Das Lernprogramm 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. Sie ist von allen anderen Prozessen auf dem Hostcomputer isoliert. Diese Isolation verwendet Kernelnamespaces und Steuerelementgruppen.

Ein Container verwendet ein isoliertes Dateisystem. Dieses benutzerdefinierte Dateisystem wird von einem Container-Imagebereitgestellt. Das Image enthält alles, was zum Ausführen einer Anwendung erforderlich ist, z. B. alle Abhängigkeiten, Konfigurationen, Skripts und Binärdateien. Das Image enthält auch andere Konfigurationen für den Container, z. B. Umgebungsvariablen, einen Standardbefehl, der ausgeführt werden soll, und andere Metadaten.

Nachdem Sie die Containertools-Erweiterung für VS Code installiert haben, können Sie mit Containern in VS Code arbeiten. Zusätzlich zu Kontextmenüs im Container-Explorer können Sie terminalNew Terminal>, um ein Befehlszeilenfenster zu öffnen. Sie können befehle auch in einem Bash-Fenster ausführen. Sofern nicht angegeben, kann ein Befehl, der als Bash- bezeichnet wird, in einem Bash-Fenster oder im VS Code-Terminal ausgeführt werden.

Legen Sie Docker auf den Linux-Containermodus fest. Um zu Linux-Containern zu wechseln, wenn Sie derzeit auf Windows-Container festgelegt sind, klicken Sie mit der rechten Maustaste auf das Docker-Symbol in der Taskleiste, während Docker Desktop ausgeführt wird, und wählen Sie Wechseln zu Linux-Containern.
Wählen Sie in VS Code Terminal>Neuen Terminalaus.
Führen Sie im Terminalfenster oder in einem Bash-Fenster diesen Befehl aus.
```
docker run -d -p 80:80 docker/getting-started
```
Dieser Befehl enthält die folgenden Parameter:
- -d Führen Sie den Container im getrennten Modus im Hintergrund aus.
- -p 80:80: Hiermit wird Port 80 des Hosts dem Port 80 im Container zugeordnet.
- docker/getting-started Gibt das zu verwendende Bild an.
Tipp

Sie können einzelne Zeichenkennzeichnungen kombinieren, um den vollständigen Befehl zu kürzen. Der obige Befehl könnte beispielsweise wie folgt geschrieben werden:
```
docker run -dp 80:80 docker/getting-started
```
Wählen Sie im VS Code das Containersymbol auf der linken Seite aus, um den Container-Explorer anzuzeigen.

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

Der Containername, modest_shockley in diesem Beispiel, wird zufällig erstellt. Ihre wird einen anderen Namen haben.
Klicken Sie mit der rechten Maustaste auf docker/getting-started, um ein Kontextmenü zu öffnen. Wählen Sie Im Browser öffnen aus.

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

Sie sehen eine Seite, die lokal gehostet wird, über DockerLabs.
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.

Um einen Container mithilfe der Befehlszeile zu entfernen, führen Sie diesen Befehl aus, um die Container-ID abzurufen:
```
docker ps
```
Stoppen Sie dann den Container und entfernen Sie ihn.
```
docker stop <container-id>
docker rm <container-id>
```
Aktualisieren Sie Ihren Browser. Die Seite "Erste Schritte", die Sie vor einem Moment gesehen haben, ist verschwunden.

Erstellen eines Containerimages für die App

In diesem Lernprogramm wird eine einfache Todo-Anwendung verwendet.

Screenshot zeigt die Beispielanwendung mit mehreren hinzugefügten Elementen und einem Textfeld und einer Schaltfläche zum Hinzufügen neuer Elemente.

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

Um die Anwendung zu bauen, sollten Sie ein Dockerfileerstellen. Eine Dockerfile ist ein textbasiertes Skript mit Anweisungen, die zum Erstellen eines Containerimages verwendet werden.

Rufen Sie das Repository Docker Getting Started Tutorial auf, und wählen Sie Code>ZIP herunterladen aus. Extrahieren Sie den Inhalt in einen lokalen Ordner.
Wählen Sie in VS Code Datei>Ordner öffnen aus. Navigieren Sie zum ordner App im extrahierten Projekt, und öffnen Sie diesen Ordner. Es sollte eine Datei namens package.json und zwei Ordner mit den Namen src und specangezeigt werden.
Erstellen Sie eine Datei namens Dockerfile- im selben Ordner wie die Datei package.json mit dem folgenden Inhalt.
```
FROM node:lts-alpine
RUN apk add --no-cache python3 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]
```
Anmerkung

Stellen Sie sicher, dass die Datei keine Dateierweiterung wie .txthat.
Klicken Sie im Datei-Explorer links in VS Code mit der rechten Maustaste auf die Dockerfile-, und wählen Sie dann Build Imageaus. 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 zum Erstellen eines Containerimages in der Befehlszeile den folgenden Befehl aus dem Ordner app mit dem Dockerfile .
```
docker build -t getting-started .
```

Sie haben das Dockerfile verwendet, um ein neues Containerimage zu erstellen. Möglicherweise haben Sie bemerkt, dass viele "Ebenen" heruntergeladen wurden. Das Dockerfile beginnt mit dem Image node:lts-alpine. Sofern sich dieses Bild nicht bereits auf Ihrem Computer befindet, muss dieses Bild heruntergeladen werden.

Nachdem das Image heruntergeladen wurde, kopiert die Dockerfile- Ihre Anwendung und verwendet yarn, um die Abhängigkeiten Ihrer Anwendung zu installieren. Der CMD Wert im Dockerfile- gibt den Standardbefehl an, der beim Starten eines Containers aus diesem Image ausgeführt werden soll.

Die . am Ende des befehls docker build teilt mit, dass Docker nach dem Dockerfile- im aktuellen Verzeichnis suchen sollte.

Starten des App-Containers

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

Verwenden Sie den folgenden Befehl, um den 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önnen Sie nicht auf die Anwendung zugreifen.
Klicken Sie nach ein paar Sekunden im Container-Explorer unter CONTAINERS 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 es wie erwartet funktioniert. Sie können Elemente als erledigt markieren und Elemente entfernen. Ihr Frontend speichert Elemente erfolgreich im Back-End.

Nächste Schritte

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

Behalten Sie alles, was Sie bisher getan haben, um diese Tutorial-Reihe fortzusetzen. Versuchen Sie als Nächstes Teil II dieser Reihe:

Aktualisieren und Freigeben einer Container-App

Im Folgenden finden Sie einige Ressourcen, die für Sie hilfreich sein können:

Freigeben über