Delen via


Zelfstudie: Een container-app delen met Visual Studio Code

Deze zelfstudie is deel twee van een vierdelige serie waarin Docker wordt gebruikt voor gebruik met Visual Studio Code (VS Code).

In deze handleiding leer je hoe je:

  • Werk de code bij en vervang de container.
  • Deel uw afbeelding.
  • Draai de image op een nieuwe instantie.

Vereiste voorwaarden

Deze zelfstudie gaat verder met de vorige zelfstudie, Een container-app maken met Visual Studio Code. Als u wilt doorgaan, hebt u het actieve takenlijstbeheer uit deel 1 nodig.

De code bijwerken en de container vervangen

Laten we een paar wijzigingen aanbrengen en meer informatie krijgen over het beheren van uw containers.

  1. Werk regel 56 in het src/static/js/app.js bestand bij om dit nieuwe tekstlabel te gebruiken:

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

    Sla uw wijziging op.

  2. Stop en verwijder de huidige versie van de container. Meerdere containers kunnen niet dezelfde poort gebruiken.

    Klik met de rechtermuisknop op de container aan de slag en selecteer Verwijderen.

    Schermopname van de extensie Container Tools met een container geselecteerd en een contextmenu met Verwijderen geselecteerd.

    Of gebruik via de commandoregel de volgende opdracht om de container-id op te halen.

    docker ps
    

    Stop de container en verwijder deze:

    docker stop <container-id>
    docker rm <container-id>
    
  3. Bouw de bijgewerkte versie van de afbeelding. Klik in de Verkenner met de rechtermuisknop op Dockerfile en selecteer vervolgens Afbeelding bouwen.

    Als u wilt bouwen via de command line, navigeert u naar de map die Dockerfile bevat en gebruikt u dezelfde opdracht die u eerder hebt gebruikt.

    docker build -t getting-started .
    
  4. Start een nieuwe container die gebruikmaakt van de bijgewerkte code.

    docker run -dp 3000:3000 getting-started
    
  5. Vernieuw uw browser op http://localhost:3000 om de bijgewerkte Help-tekst weer te geven.

    Schermopname van de voorbeeldtoepassing met de gewijzigde tekst die hierboven wordt beschreven.

Uw afbeelding delen

Nu u een image hebt gemaakt, kunt u deze delen. Gebruik een containerregister om container images te delen. Het standaardregister is Docker Hub, waar alle afbeeldingen die we hebben gebruikt vandaan komen.

Als u een image wilt pushen, moet u eerst een opslagplaats op Docker Hub maken.

  1. Ga naar Docker Hub en meld u aan bij uw account.

  2. Selecteer Opslagplaats maken.

  3. Voer de naam van de opslagplaats in getting-started. Zorg ervoor dat de zichtbaarheidopenbaar is.

  4. Klik op Creëren.

    Aan de rechterkant van de pagina ziet u een sectie met de naam Docker-opdrachten. Deze sectie bevat een voorbeeldopdracht die moet worden uitgevoerd om naar deze opslagplaats te pushen.

    Schermopname van de pagina Docker Hub met een voorgestelde Docker-opdracht.

  5. Klik in VS Code, in Container Explorer, onder REGISTERS, op het invoegtoepassingspictogram, om verbinding te maken met een register en kies Docker Hub.

    Voer de naam en het wachtwoord van uw Docker Hub-account in.

  6. Klik in containerverkenner van VS Code onder IMAGES met de rechtermuisknop op de afbeeldingstag en selecteer Pushen. Voer de naamruimte en de tag in of accepteer de standaardwaarden.

  7. Gebruik deze procedure om naar Docker Hub te pushen met behulp van de opdrachtregel.

    Meld u aan bij docker Hub:

    docker login -u <username>
    
  8. Gebruik de volgende opdracht om de getting-started-afbeelding een nieuwe naam te geven.

    docker tag getting-started <username>/getting-started
    
  9. Gebruik de volgende opdracht om uw container te pushen.

    docker push <username>/getting-started
    

Voer het image uit op een nieuwe instance

Nu uw afbeelding is gemaakt en naar een register is gepusht, probeert u de app te draaien op een gloednieuw exemplaar dat deze containerafbeelding nog nooit eerder heeft gebruikt. Als u uw app wilt uitvoeren, gebruikt u Play met Docker.

  1. Open uw browser om met Docker te spelen.

  2. Meld u aan met uw Docker Hub-account.

  3. Selecteer Start en selecteer vervolgens de koppeling + ADD NEW INSTANCE in de linkerzijbalk. Na een paar seconden wordt er een terminalvenster geopend in uw browser.

    Schermopname van de site 'Play with Docker' met een koppeling om een nieuwe instantie toe te voegen.

  4. Start uw app in de terminal.

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

    Play with Docker haalt uw afbeelding binnen en start deze op.

  5. Selecteer de badge 3000 naast OPEN PORT. Als het goed is, ziet u de app met uw wijzigingen.

    Als de badge 3000 niet wordt weergegeven, selecteert u POORT OPENEN en voert u 3000 in.

De hulpbronnen opschonen

Bewaar alles wat u tot nu toe hebt gedaan om deze reeks zelfstudies voort te zetten.

Volgende stappen

Gefeliciteerd. U hebt deel 2 voltooid en geleerd hoe u uw code bijwerkt en uw installatiekopieën uitvoert op een nieuw exemplaar.

Hier volgen enkele resources die nuttig kunnen zijn voor u:

Probeer vervolgens de volgende zelfstudie in deze reeks: