Oefening: een dev-container toevoegen aan een bestaand project

Voltooid

Bij het instellen van de dev-container voor een project moet u eerst een containerconfiguratie toevoegen aan dat project. Een containerconfiguratie stelt uw omgeving in Visual Studio Code in.

In deze oefening voegt u een dev-container toe en opent u het project Productendashboard in de container.

Een dev-container toevoegen

1. Ga terug naar VS Code en het project dat u eerder hebt gekloond.

2. Druk op F1 om het opdrachtenpalet te openen.

3. Typ dev-container toevoegen en selecteer Dev Containers: Ontwikkelcontainerconfiguratiebestanden toevoegen. Hiermee wordt een lijst met Dev Container Templates weergegeven. Sjablonen bevatten de bronbestanden die nodig zijn voor het configureren van een volledige ontwikkelomgeving voor de opgegeven technische stack.

4. Selecteer Configuratie toevoegen aan de map met gebruikersgegevens.

5. Selecteer de volgende opties:

   Optie	Weergegeven als
   Een containerconfiguratiesjabloon selecteren	Python 3
   Python-versie	3.11
   Extra functies selecteren die u wilt installeren	Selecteer OK.

Belangrijk

In de eerste stap bij het selecteren van een configuratiesjabloon moet u mogelijk Alle definities weergeven selecteren... in de lijst en selecteer Python zodra de volledige set sjablonen is geladen.

Er wordt een Dev Container-configuratie toegevoegd aan uw project. Visual Studio Code geeft een melding dat u het project nu in een container kunt openen. Sluit deze melding voor nu.

Configuratiebestanden controleren

1. U ziet dat er een nieuwe map met de naam .devcontainer is toegevoegd aan het project.
2. Vouw die map uit en u ziet dat deze een devcontainer.json bestand bevat.

Het project openen in een container

1. Druk op F1 om het opdrachtenpalet te openen.
2. Typ reopen in container.
3. Selecteer Dev Containers: Opnieuw openen in container in de lijst met beschikbare opties.

De container wordt gebouwd. Het kan enkele minuten duren voordat de eerste build is gecompileerd, omdat een nieuwe installatiekopie moet worden gemaakt en op uw computer gemaakt. Nadat de container de eerste keer is gebouwd, zullen volgende builds veel sneller zijn.

De externe indicator weergeven

Wanneer de containerbuild is voltooid, kunt u bevestigen dat u bent verbonden met de container door de externe indicator te controleren. U zou nu ook uw projectbestanden moeten zien die in VS Code zijn geladen.

• Bekijk de externe indicator door de linkerbenedenhoek van VS Code te bekijken. U ziet nu 'Dev Container: Python 3'.

  

Belangrijk

Mogelijk ziet u meldingen over Pylance of het verbeteren van de prestaties in Windows. U kunt alle meldingen die u in VS Code ziet veilig negeren. Je hoeft die dingen niet te doen.

De container controleren

1. Druk op Ctrl + ` om de geïntegreerde terminal in Visual Studio Code te openen als deze nog niet is geopend.

2. U ziet dat de terminalprompt er anders uitziet dan de normale terminalprompt.

   

3. Voer de volgende opdracht uit om te controleren of Python is geïnstalleerd:

   python --version
   

   De uitvoer van de terminal moet de versie van Python zijn die in de container wordt gebruikt.

Projectafhankelijkheden installeren

• Voer de volgende opdracht uit in de terminal om de Flask-afhankelijkheden te installeren die u nodig hebt om het project uit te voeren:

  pip3 install --user -r requirements.txt
  

Het project uitvoeren

1. Voer in de terminal de volgende opdracht in om het project te starten:

   python app.py
   

2. Open het project in een browser door naar http://127.0.0.1:5000.

   

Goed gedaan. U hebt een Python-webtoepassing met Flask die op uw computer wordt uitgevoerd en u weet mogelijk niet wat deze dingen zijn. Dat is helemaal geen probleem. Het is ook niet nodig om dit te weten. De container zorgt voor het instellen van de gehele omgeving.

In de volgende sectie leert u hoe u het bestand gebruikt om de devcontainer.json installatie van afhankelijkheid te automatiseren en VS Code voor dit Python-project aan te passen.