Övning – Lägga till en utvecklingscontainer i ett befintligt projekt

  • 4 minuter

När du konfigurerar utvecklingscontainern för ett projekt, måste du först lägga till en containerkonfiguration i projektet. En containerkonfiguration konfigurerar din miljö i Visual Studio Code.

I den här övningen lägger du till en utvecklingscontainer och öppnar projektet Products Dashboard i containern.

Lägga till en utvecklingscontainer

  1. Gå tillbaka till VS Code och projektet som du klonade tidigare.

  2. Tryck på F1 för att öppna kommandopaletten.

  3. Skriv lägg till utvecklingscontainer och välj Dev Containers: Lägg till konfigurationsfiler för utvecklingscontainer.

  4. Välj följande alternativ:

    Alternativ Värde
    Välj en mall för containerkonfiguration Python 3
    Python-version 3.11
    Välj ytterligare funktioner att installera Välj OK

Viktigt

I det första steget när du väljer en konfigurationsmall kan du behöva välja "Visa alla definitioner..." i listan och välj sedan Python när den fullständiga uppsättningen mallar har lästs in.

En Dev Container-konfiguration läggs till i projektet. Du får ett meddelande i Visual Studio Code om att du kan öppna projektet i en container. Stäng meddelandet för tillfället.

Granska konfigurationsfiler

  1. Observera att en ny mapp med namnet ".devcontainer" har lagts till i projektet.
  2. Expandera mappen och observera att den innehåller en devcontainer.json-fil.

Öppna projektet i en container

  1. Tryck på F1 för att öppna kommandopaletten.
  2. Skriv reopen in container.
  3. Välj Dev Containers: Öppna igen i containern i listan över tillgängliga alternativ.

Containern börjar byggas. Det kan ta några minuter att bygga containern för första gången, eftersom en ny avbildning måste hämtas och byggas på din dator. Efterföljande byggen kommer att gå mycket snabbare.

Visa fjärrindikatorn

När containerversionen är klar kan du bekräfta att du är ansluten till containern genom att undersöka fjärrindikatorn. Nu bör du också se dina projektfiler läsas in i VS Code.

  • Granska fjärrindikatorn genom att visa det nedre vänstra hörnet i VS Code. Observera att den nu visar "Dev Container: Python 3".

    Skärmbild av fjärrindikatorn med text som säger dev container python 3

Viktigt

Du kan se meddelanden om Pylance eller förbättra prestanda i Windows. Du kan på ett säkert sätt stänga alla meddelanden som visas i VS Code. Du behöver inte göra de sakerna.

Granska containern

  1. Tryck på Ctrl + ` för att öppna den integrerade terminalen i Visual Studio Code om den inte redan är öppen.

  2. Observera att terminalprompten kan se annorlunda ut än den vanliga terminalprompten.

    Integrerad terminalprompt för VS Code

  3. Kör följande kommando för att säkerställa att Python är installerat:

    python --version

    Terminalens utdata ska vara den version av Python som används i containern.

Installera projektberoenden

  • Kör följande kommando i terminalen för att installera Flask-beroenden som du behöver för att köra projektet:

    pip3 install --user -r requirements.txt

Kör projektet

  1. Ange följande kommando i terminalen för att starta projektet:

    python app.py

  2. Öppna projektet i en webbläsare genom att gå till http://127.0.0.1:5000.

    Skärmbild av Python-programmet (instrumentpanel för produkter).

Bra jobbat! Du har ett Python-webbprogram med Flask som körs på datorn och du kanske inte vet vad det ens är. Det gör ingenting. Du behöver inte veta det. Containern tar hand om att konfigurera hela miljön.

I nästa avsnitt får du lära dig hur du använder devcontainer.json filen för att automatisera beroendeinstallationen och anpassa VS Code för det här Python-projektet.