Freigeben über

Tutorial: Freigeben einer Docker-App mit Visual Studio Code

  • Artikel

Dieses Tutorial ist Teil zwei einer vierteiligen Einführungsreihe in Docker zur Verwendung mit Visual Studio Code (VS Code).

In diesem Tutorial lernen Sie Folgendes:

  • Aktualisieren des Codes und Ersetzen des Containers
  • Freigeben des Images
  • Ausführen des Images auf einer neuen Instanz

Voraussetzungen

Dieses Tutorial stellt eine Fortsetzung des vorherigen Tutorials Erstellen einer Docker-App mit Visual Studio Code dar. Um hier fortzufahren, benötigen Sie den Manager für ausgeführte Aufgabenlisten aus Teil 1.

Aktualisieren des Codes und Ersetzen des Containers

Nehmen wir ein paar Änderungen vor, und erfahren wir mehr über das Verwalten Ihrer Container.

  1. Ändern Sie Zeile 56 in der Datei src/static/js/app.js, damit die neue Beschriftung verwendet wird:

    - <p className="text-center">No items yet! Add one above!</p>
+ <p className="text-center">You have no todo items yet! Add one above!</p>

    Speichern Sie die Änderung.

  2. Beenden und entfernen Sie die aktuelle Version des Containers. Ein Port kann immer nur von einem Container verwendet werden.

    Klicken Sie mit der rechten Maustaste auf den Container getting-started, und wählen Sie Entfernen aus.

    Screenshot shows the Docker extension with a container selected and a context menu with Remove selected.

    Verwenden Sie alternativ den folgenden Befehl über die Befehlszeile, um die Container-ID abzurufen:

    docker ps

    Beenden und entfernen Sie den Container dann:

    docker stop <container-id>
docker rm <container-id>

  3. Kompilieren Sie die aktualisierte Version des Images. Klicken Sie im Datei-Explorer mit der rechten Maustaste auf Dockerfile, und wählen Sie dann Image erstellen aus.

    Alternativ können Sie das Image auch über die Befehlszeile erstellen. Wechseln Sie dazu zum Ordner, der das Dockerfile enthält, und verwenden Sie den gleichen Befehl wie zuvor.

    docker build -t getting-started .

  4. Starten Sie einen neuen Container, der den aktualisierten Code verwendet.

    docker run -dp 3000:3000 getting-started

  5. Aktualisieren Sie die Seite http://localhost:3000 in Ihrem Browser, damit der geänderte Hilfetext angezeigt wird.

    Screenshot shows the sample application with the modified text, described above.

Freigeben des Images

Nachdem Sie nun ein Image erstellt haben, können Sie es freigeben. Verwenden Sie zum Freigeben von Docker-Images eine Docker-Registrierung. Docker Hub ist die Standardregistrierung. Von dort stammen alle bisher verwendeten Images.

Zum Pushen eines Images müssen Sie zunächst ein Repository in Docker Hub erstellen.

  1. Wechseln Sie zu Docker Hub, und melden Sie sich bei Ihrem Konto an.

  2. Wählen Sie Create repository (Repository erstellen) aus.

  3. Geben Sie getting-started als Repositorynamen ein. Legen Sie Visibility auf Public fest.

  4. Klicken Sie auf Erstellen.

    Auf der rechten Seite befindet sich ein Abschnitt namens Docker commands. Dieser Abschnitt enthält einen Beispielbefehl zum Pushen von Inhalt an dieses Repository.

    Screenshot shows the Docker Hub page with a suggested Docker command.

  5. Klicken Sie in VS Code in der Ansicht „Docker“ unter REGISTRIERUNGEN auf das Steckersymbol, um eine Verbindung mit einer Registrierung herzustellen, und wählen Sie Docker Hub aus.

    Geben Sie Name und Kennwort Ihres Docker Hub-Kontos ein.

  6. Klicken Sie in der Docker-Ansicht in VS Code unter IMAGES mit der rechten Maustaste auf das Imagetag, und wählen Sie Push aus. Geben Sie den Namespace und das Tag ein, oder übernehmen Sie die Standardwerte.

  7. Befolgen Sie diese Schritte, um Inhalte über die Befehlszeile an Docker Hub zu pushen:

    Melden Sie sich bei Docker Hub an:

    docker login -u <username>

  8. Verwenden Sie den folgenden Befehl, um dem Image getting-started einen neuen Namen zu geben.

    docker tag getting-started <username>/getting-started

  9. Verwenden Sie den folgenden Befehl, um Ihren Container zu pushen.

    docker push <username>/getting-started

Ausführen des Images auf einer neuen Instanz

Da Sie Ihr Image nun erstellt und in eine Registrierung gepusht haben, versuchen Sie als Nächstes, die App in einer neuen Instanz auszuführen, die dieses Containerimage noch nicht kennt. Verwenden Sie Play with Docker, um Ihre App auszuführen.

  1. Öffnen Sie Play with Docker in Ihrem Browser.

  2. Melden Sie sich mit Ihrem Docker Hub-Konto an.

  3. Wählen Sie Start und dann in der linken Seitenleiste den Link + ADD NEW INSTANCE aus. Nach einigen Sekunden wird in Ihrem Browser ein Terminalfenster geöffnet.

    Screenshot shows the Play with Docker site with an add new instance link.

  4. Starten Sie Ihre App über das Terminal:

    docker run -dp 3000:3000 <username>/getting-started

    Ihr Image wird von Play with Docker gepullt und gestartet.

  5. Wählen Sie den Badge 3000 neben OPEN PORT aus. Die App sollte mit Ihren Änderungen angezeigt werden.

    Wenn der Badge 3000 nicht vorhanden ist, wählen Sie OPEN PORT aus, und geben Sie 3000 ein.

Bereinigen von Ressourcen

Behalten Sie alles, was Sie bereits erarbeitet haben, so bei, um mit dieser Tutorialreihe fortzufahren.

Nächste Schritte

Herzlichen Glückwunsch! Sie haben Teil 2 abgeschlossen und gelernt, wie Sie Ihren Code aktualisieren und Ihr Image in einer neuen Instanz ausführen.

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

Sehen Sie sich das nächste Tutorial in dieser Reihe an:

Persistentes Speichern von Daten in einer Container-App mithilfe von Volumes in VS Code