Ćwiczenie — dodawanie kontenera deweloperskiego do istniejącego projektu

Ukończone

Podczas konfigurowania kontenera deweloperskiego na potrzeby projektu musisz najpierw dodać do tego projektu konfigurację kontenera. Konfiguracja kontenera ustawia środowisko w programie Visual Studio Code.

W tym ćwiczeniu dodasz kontener deweloperski i otworzysz projekt Products Dashboard w kontenerze.

Dodawanie kontenera deweloperskiego

  1. Wróć do programu VS Code i sklonowanego wcześniej projektu.

  2. Naciśnij F1 , aby otworzyć paletę poleceń.

  3. Wpisz dodaj kontener deweloperski i wybierz pozycję Dev Containers: Dodaj pliki konfiguracji kontenera deweloperskiego. Spowoduje to wyświetlenie listy szablonów kontenerów deweloperskich. Szablony zawierają pliki źródłowe potrzebne do skonfigurowania kompletnego środowiska programistycznego dla określonego stosu technologicznego.

  4. Wybierz pozycję Dodaj konfigurację do obszaru roboczego.

  5. Wybierz jedną z następujących opcji:

    Opcja Wartość
    Wybieranie szablonu konfiguracji kontenera Python 3
    Wersja języka Python 3.11
    Wybieranie dodatkowych funkcji do zainstalowania Wybierz przycisk OK

Ważne

W pierwszym kroku podczas wybierania szablonu konfiguracji może być konieczne wybranie pozycji "Pokaż wszystkie definicje..." z listy, a następnie wybierz pozycję Python po załadowaniu pełnego zestawu szablonów.

Konfiguracja kontenera deweloperskiego zostanie dodana do projektu. W programie Visual Studio Code zostanie wyświetlone powiadomienie, że można teraz otworzyć projekt w kontenerze. Na razie odrzuć to powiadomienie.

Sprawdzanie plików konfiguracji

  1. Zwróć uwagę, że do projektu dodano nowy folder o nazwie ".devcontainer".
  2. Rozwiń ten folder i zwróć uwagę, że zawiera on plik devcontainer.json.

Otwieranie projektu w kontenerze

  1. Naciśnij F1 , aby otworzyć paletę poleceń.
  2. Wpisz otwórz ponownie w kontenerze.
  3. Wybierz pozycję Dev Containers: Otwórz ponownie w kontenerze z listy opcji dostępnych.

Rozpocznie się kompilowanie kontenera. Kompilacja początkowa może potrwać kilka minut, ponieważ nowy obraz musi zostać ściągnięty i skompilowany na maszynie. Po skompilowaniu kontenera po raz pierwszy późniejsze kompilacje będą znacznie szybsze.

Wyświetlanie wskaźnika zdalnego

Po zakończeniu kompilacji kontenera możesz potwierdzić, że masz połączenie z kontenerem, sprawdzając wskaźnik zdalny. Powinny być również widoczne pliki projektu załadowane w programie VS Code.

  • Sprawdź wskaźnik zdalny, wyświetlając lewy dolny róg programu VS Code. Zwróć uwagę, że teraz jest wyświetlany komunikat "Dev Container: Python 3".

    Zrzut ekranu przedstawiający wskaźnik zdalny z tekstem informującym o kontenerze deweloperskim python 3

Ważne

Możesz zobaczyć powiadomienia dotyczące rozwiązania Pylance lub poprawy wydajności w systemie Windows. Możesz bezpiecznie odrzucić wszystkie powiadomienia widoczne w programie VS Code. Nie trzeba robić tych rzeczy.

Sprawdzanie kontenera

  1. Naciśnij Ctrl + ` , aby otworzyć zintegrowany terminal w programie Visual Studio Code, jeśli jeszcze nie jest otwarty.

  2. Zwróć uwagę, że monit terminalu może wyglądać inaczej niż w normalnym wierszu polecenia terminalu.

    Zintegrowany monit terminalu programu VS Code

  3. Uruchom następujące polecenie, aby upewnić się, że język Python jest zainstalowany:

    python --version
    

    Dane wyjściowe terminalu powinny być wersją języka Python używaną w kontenerze.

Instalowanie zależności projektu

  • Uruchom następujące polecenie w terminalu, aby zainstalować zależności Flask potrzebne do uruchomienia projektu.

    pip3 install --user -r requirements.txt
    

Uruchamianie projektu

  1. Wprowadź następujące polecenie w terminalu, aby uruchomić projekt:

    python app.py
    
  2. Otwórz projekt w przeglądarce, przechodząc do http://127.0.0.1:5000witryny .

    Zrzut ekranu przedstawiający aplikację pulpitu nawigacyjnego produktów języka Python.

Dobra robota! Masz aplikację internetową w języku Python z platformą Flask uruchomioną na swojej maszynie i możesz nie wiedzieć, co to są nawet te elementy. Nie przejmuj się. Nie musisz tego wiedzieć. Kontener automatycznie skonfigurował całe środowisko.

W następnej sekcji dowiesz się, jak używać devcontainer.json pliku do automatyzowania instalacji zależności i dostosowywania programu VS Code dla tego projektu języka Python.