Aktualisieren der App

Als kleine Funktionsanforderung wurden Sie vom Produktteam aufgefordert, den „leeren Text“ zu ändern, wenn keine Aufgabenlistenelemente vorhanden sind. Es soll Folgendes angezeigt werden:

You have no todo items yet! (Es sind noch keine Aufgabenelemente vorhanden!) Add one above! (Fügen Sie oben ein Element hinzu!)

Ganz einfach, nicht wahr? Nehmen wir die Änderung vor.

Aktualisieren des Quellcodes

  1. Aktualisieren Sie in der Datei src/static/js/app.js Zeile 56, um den neuen „leeren Text“ zu verwenden.

    -                <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>
    
  2. Erstellen Sie die aktualisierte Version des Images mit dem gleichen Befehl, den Sie zuvor verwendet haben.

    docker build -t getting-started .
    
  3. Starten Sie einen neuen Container mit dem aktualisierten Code.

    docker run -dp 3000:3000 getting-started
    

Seltsam. Es wurde möglicherweise ein Fehler wie dieser angezeigt (die IDs unterscheiden sich):

docker: Error response from daemon: driver failed programming external connectivity on endpoint laughing_burnell 
(bb242b2ca4d67eba76e79474fb36bb5125708ebdabd7f45c8eaf16caaabde9dd): Bind for 0.0.0.0:3000 failed: port is already allocated.

Was ist passiert? Der neue Container konnte nicht gestartet werden, weil der alte Container noch ausgeführt wird. Der Grund für dieses Problem liegt darin, dass dieser Container Port 3000 des Hosts verwendet und nur ein Prozess auf dem Computer (Container eingeschlossen) auf einen bestimmten Port lauschen kann. Um dieses Problem zu beheben, entfernen Sie den alten Container.

Ersetzen des alten Containers

Um einen Container zu entfernen, muss er zuerst beendet werden. Nachdem er beendet wurde, kann er entfernt werden. Sie haben zwei Möglichkeiten, den alten Container zu entfernen. Sie können den Pfad wählen, der Ihnen am besten gefällt.

Entfernen eines Containers mithilfe der CLI

  1. Verwenden Sie den Befehl docker ps, um die ID des Containers abzurufen.

    docker ps
    
  2. Verwenden Sie den Befehl docker stop, um den Container zu beenden.

    # Swap out <the-container-id> with the ID from docker ps
    docker stop <the-container-id>
    
  3. Nachdem der Container beendet wurde, können Sie ihn mithilfe des Befehls docker rm entfernen.

    docker rm <the-container-id>
    

Tipp

Sie können einen Container mit einem einzigen Befehl beenden und entfernen, indem Sie dem Befehl docker rm das Flag „force“ hinzufügen. Beispiel: docker rm -f <the-container-id>

Entfernen eines Containers mithilfe der Docker-Ansicht

Wenn Sie die VS Code-Erweiterung öffnen, können Sie einen Container mit zwei Mausklicks entfernen! Dies ist sicherlich viel einfacher, als nach der Container-ID zu suchen und den Container zu entfernen.

  1. Navigieren Sie bei geöffneter Erweiterung zum Container, und klicken Sie mit der rechten Maustaste.

  2. Klicken Sie auf die Option Entfernen.

  3. Bestätigen Sie den Entfernungsvorgang, und schon sind Sie fertig!

Docker-Ansicht: Entfernen eines Containers

Starten des aktualisierten App-Containers

  1. Starten Sie nun Ihre aktualisierte App.

    docker run -dp 3000:3000 getting-started
    
  2. Aktualisieren Sie Ihren Browser unter http://localhost:3000. Der aktualisierte Hilfetext sollte angezeigt werden!

Aktualisierte Anwendung mit aktualisiertem „leeren Text“

Zusammenfassung

Während Sie ein Update erstellt haben, sind Ihnen vielleicht zwei Dinge aufgefallen:

  • Alle zuvor vorhandenen Elemente in der Aufgabenliste sind nicht mehr vorhanden! Das ist keine gute App! Darüber werden wir in Kürze sprechen.
  • Für eine so kleine Änderung waren zahlreiche Schritte erforderlich. In einem späteren Abschnitt erfahren Sie, wie Sie Codeaktualisierungen realisieren können, ohne bei jeder Änderung einen neuen Container erneut erstellen und starten zu müssen.

Bevor Sie sich mit Persistenz vertraut machen, werden Sie schnell erfahren, wie Sie diese Images mit anderen Benutzern teilen können.

Nächste Schritte

Tutorial fortsetzen!