Dela via

Självstudie: Dela en containerapp med Visual Studio Code

Den här självstudien är del två i en serie i fyra delar som introducerar Docker för användning med Visual Studio Code (VS Code).

I den här tutorialen lär du dig följande:

  • Uppdatera koden och ersätt containern.
  • Dela din bild.
  • Kör bilden på en ny instans.

Förutsättningar

Den här självstudien fortsätter den tidigare självstudien Skapa en containerapp med Visual Studio Code. Om du vill fortsätta här måste du köra listhanteraren från del 1.

Uppdatera koden och ersätt containern

Nu ska vi göra några ändringar och lära oss mer om att hantera dina containrar.

  1. src/static/js/app.js Uppdatera rad 56 i filen för att använda den här nya textetiketten:

    - <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>

    Spara ändringen.

  2. Stoppa och ta bort den aktuella versionen av containern. Fler än en container kan inte använda samma port.

    Högerklicka på containern getting-started och välj Ta bort.

    Skärmbild som visar containerverktygstillägget med en container markerad och en snabbmeny med Ta bort markerat.

    Eller så använder du följande kommando från kommandoraden för att hämta container-ID:t.

    docker ps

    Stoppa och ta sedan bort containern:

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

  3. Skapa den uppdaterade versionen av avbildningen. Högerklicka på Dockerfile i utforskaren och välj sedan Skapa avbildning.

    Eller, för att bygga på kommandoraden, byt till den katalog som innehåller Dockerfile:n och använd samma kommando som du använde tidigare.

    docker build -t getting-started .

  4. Starta en ny container som använder den uppdaterade koden.

    docker run -dp 3000:3000 getting-started

  5. Uppdatera webbläsaren på http://localhost:3000 för att se den uppdaterade hjälptexten.

    Skärmbild som visar exempelprogrammet med den ändrade texten, som beskrivs ovan.

Dela din avbildning

Nu när du har skapat en avbildning kan du dela den. Om du vill dela containeravbildningar använder du ett containerregister. Standardregistret är Docker Hub, där alla avbildningar som vi har använt kommer från.

För att push-överföra en avbildning måste du först skapa en lagringsplats på Docker Hub.

  1. Gå till Docker Hub och logga in på ditt konto.

  2. Välj Skapa lagringsplats.

  3. För lagringsplatsens namn anger du getting-started. Kontrollera att synligheten är offentlig.

  4. Välj Skapa.

    Till höger på sidan visas ett avsnitt med namnet Docker-kommandon. Det här avsnittet innehåller ett exempelkommando som ska köras för att skicka till den här lagringsplatsen.

    Skärmbild som visar Docker Hub-sidan med ett föreslaget Docker-kommando.

  5. I VS Code går du till Container Explorer under Register, klickar på plugin-ikonen, ansluter till ett register och väljer Docker Hub.

    Ange ditt Docker Hub-kontonamn och lösenord.

  6. I Container Explorer i VS Code, högerklicka på bildtaggen under BILDER och välj Push. Ange namnområdet och taggen eller acceptera standardvärdena.

  7. Använd den här proceduren om du vill skicka till Docker Hub med hjälp av kommandoraden.

    Logga in på Docker Hub:

    docker login -u <username>

  8. Använd följande kommando för att ge getting-started-avbildningen ett nytt namn.

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

  9. Använd följande kommando för att pusha din container.

    docker push <username>/getting-started

Kör avbildningen på en ny instans

Nu när avbildningen har skapats och push-överförts till ett register kan du prova att köra appen på en helt ny instans som aldrig har sett den här containeravbildningen. Om du vill köra din app, använd Play with Docker.

  1. Öppna webbläsaren för att spela med Docker.

  2. Logga in med ditt Docker Hub-konto.

  3. Välj Start och välj sedan länken + LÄGG TILL NY INSTANS i det vänstra sidofältet. Efter några sekunder öppnas ett terminalfönster i webbläsaren.

    Skärmbild som visar Play with Docker-webbplatsen med länken Lägg till ny instans.

  4. Starta appen i terminalen.

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

    Spela med Docker hämtar avbildningen och startar den.

  5. Välj märket 3000 bredvid ÖPPNA PORT. Du bör se appen med dina ändringar.

    Om 3000-märket inte visas väljer du ÖPPNA PORT och anger 3 000.

Rensa resurser

Behåll allt du har gjort hittills för att fortsätta den här serien med självstudier.

Nästa steg

Grattis. Du har slutfört del 2 och lärt dig hur du uppdaterar koden och kör avbildningen på en ny instans.

Här är några resurser som kan vara användbara för dig:

Prova sedan nästa självstudie i den här serien:

Spara data och lagra en Docker-app

  • Last updated on