Samouczek: tworzenie aplikacji platformy Docker za pomocą programu Visual Studio Code

Artykuł
08/25/2023

Ten samouczek jest początkiem czteroczęściowej serii wprowadzającej platformę Docker do użycia z programem Visual Studio Code (VS Code). Dowiesz się, jak tworzyć i uruchamiać kontenery platformy Docker, utrwalać dane i zarządzać wieloma kontenerami za pomocą narzędzia Docker Compose.

Program VS Code oferuje rozszerzenie platformy Docker, które umożliwia pracę z lokalną usługą docker Desktop. Program Docker Desktop działa na komputerze i zarządza lokalnymi kontenerami, które są kompaktowymi środowiskami zwirtualizowanymi, które zapewniają platformę do tworzenia i uruchamiania aplikacji. Kontenery nie wymagają rozmiaru i obciążenia kompletnego systemu operacyjnego.

Z tego pierwszego samouczka dowiesz się, jak wykonywać następujące działania:

Tworzenie kontenera platformy Docker.
Tworzenie obrazu kontenera.
Uruchom kontener aplikacji.

Wymagania wstępne

Zainstalowany program Visual Studio Code .
Zainstalowane rozszerzenie programu VS Code platformy Docker.
Docker Desktop skonfigurowany do korzystania z kontenerów systemu Linux.
Konto usługi Docker Hub. Możesz bezpłatnie utworzyć konto.

Samouczek działa z systemem Windows 10 lub nowszym i programem Docker Desktop skonfigurowanym do korzystania z kontenerów systemu Linux.

Tworzenie kontenera

Kontener to proces na komputerze. Jest odizolowany od wszystkich innych procesów na komputerze hosta. Ta izolacja używa przestrzeni nazw jądra i grup kontrolek.

Kontener używa izolowanego systemu plików. Ten niestandardowy system plików jest dostarczany przez obraz kontenera. Obraz zawiera wszystkie elementy potrzebne do uruchomienia aplikacji, takie jak wszystkie zależności, konfiguracja, skrypty i pliki binarne. Obraz zawiera również inną konfigurację kontenera, taką jak zmienne środowiskowe, domyślne polecenie do uruchomienia i inne metadane.

Po zainstalowaniu rozszerzenia platformy Docker dla programu VS Code można pracować z kontenerami w programie VS Code. Oprócz menu kontekstowych w okienku platformy Docker możesz wybrać pozycję Terminal>Nowy terminal , aby otworzyć okno wiersza polecenia. Polecenia można również uruchamiać w oknie powłoki Bash. O ile nie określono, każde polecenie oznaczone jako powłoka Bash może być uruchamiane w oknie powłoki Bash lub w terminalu programu VS Code.

Ustaw pozycję Docker na tryb kontenera systemu Linux. Aby przełączyć się do kontenerów systemu Linux, jeśli obecnie ustawiono kontenery systemu Windows, kliknij prawym przyciskiem myszy ikonę platformy Docker na pasku zadań systemowych, gdy jest uruchomiony program Docker Desktop, a następnie wybierz polecenie Przełącz do kontenerów systemu Linux.
W programie VS Code wybierz pozycję Terminal>Nowy terminal.
W oknie terminalu lub w oknie powłoki Bash uruchom to polecenie.
```
docker run -d -p 80:80 docker/getting-started
```
To polecenie zawiera następujące parametry:
- -d Uruchom kontener w trybie odłączonym w tle.
- -p 80:80 Zamapuj port 80 hosta na port 80 w kontenerze.
- docker/getting-started Określa obraz do użycia.
Napiwek

Możesz połączyć flagi z pojedynczym znakiem, aby skrócić pełne polecenie. Na przykład powyższe polecenie można napisać jako:
```
docker run -dp 80:80 docker/getting-started
```
W programie VS Code wybierz ikonę platformy Docker po lewej stronie, aby wyświetlić rozszerzenie platformy Docker.

Rozszerzenie programu VS Code platformy Docker pokazuje kontenery uruchomione na komputerze. Możesz uzyskać dostęp do dzienników kontenerów i zarządzać cyklem życia kontenera, takim jak zatrzymywanie i usuwanie.

Nazwa kontenera, modest_shockley w tym przykładzie, jest tworzona losowo. Twój będzie miał inną nazwę.
Kliknij prawym przyciskiem myszy pozycję docker/getting-started , aby otworzyć menu kontekstowe. Kliknij pozycję Otwórz w przeglądarce.

Zamiast tego otwórz przeglądarkę i wprowadź polecenie http://localhost/tutorial/.

Zobaczysz stronę hostowaną lokalnie na temat platformy DockerLabs.
Kliknij prawym przyciskiem myszy pozycję docker/getting-started , aby otworzyć menu kontekstowe. Wybierz pozycję Usuń, aby usunąć ten kontener.

Aby usunąć kontener przy użyciu wiersza polecenia, uruchom następujące polecenie, aby uzyskać identyfikator kontenera:
```
docker ps
```
Następnie zatrzymaj i usuń kontener:
```
docker stop <container-id>
docker rm <container-id>
```
Odśwież przeglądarkę. Strona Wprowadzenie, która została wyświetlona chwilę temu, zniknęła.

Tworzenie obrazu kontenera dla aplikacji

W tym samouczku jest używana prosta aplikacja zadań do wykonania.

Screenshot shows the sample application with several items added and a text box and button to add new items.

Aplikacja umożliwia tworzenie elementów roboczych i oznaczanie ich jako ukończonych lub usunięcie.

Aby skompilować aplikację, utwórz plik Dockerfile. Plik Dockerfile to tekstowy skrypt instrukcji używany do tworzenia obrazu kontenera.

Przejdź do repozytorium Docker Getting Started Tutorial (Samouczek wprowadzenie do platformy Docker), a następnie wybierz pozycję Code Download ZIP (Pobierz kod>ZIP). Wyodrębnij zawartość do folderu lokalnego.
W programie VS Code wybierz pozycję Plik>Otwórz folder. Przejdź do folderu aplikacji w wyodrębnionym projekcie i otwórz ten folder. Powinien zostać wyświetlony plik o nazwie package.json i dwa foldery o nazwie src i spec.
Utwórz plik o nazwie Dockerfile w tym samym folderze co plik package.json z następującą zawartością.
```
FROM node:20-alpine
RUN apk add --no-cache python3 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]
```
Uwaga

Upewnij się, że plik nie ma rozszerzenia pliku, takiego jak .txt.
W Eksploratorze plików po lewej stronie w programie VS Code kliknij prawym przyciskiem myszy plik Dockerfile , a następnie wybierz pozycję Kompiluj obraz. Wprowadź wprowadzenie jako tag obrazu w polu wprowadzania tekstu.

Tag jest przyjazną nazwą obrazu.

Aby utworzyć obraz kontenera z poziomu wiersza polecenia, użyj następującego polecenia.
```
docker build -t getting-started .
```
Uwaga

W zewnętrznym oknie powłoki Bash przejdź do folderu zawierającego app plik Dockerfile , aby uruchomić to polecenie.

Do utworzenia nowego obrazu kontenera użyto pliku Dockerfile . Być może zauważono, że pobrano wiele "warstw". Plik Dockerfile rozpoczyna się od node:20-alpine obrazu. Chyba że ten obraz był już na komputerze, ten obraz musi zostać pobrany.

Po pobraniu obrazu plik Dockerfile kopiuje aplikację i używa jej yarn do zainstalowania zależności aplikacji. Wartość CMD w pliku Dockerfile określa domyślne polecenie do uruchomienia podczas uruchamiania kontenera z tego obrazu.

Na . końcu docker build polecenia informuje, że platforma Docker powinna szukać pliku Dockerfile w bieżącym katalogu.

Uruchamianie kontenera aplikacji

Teraz, gdy masz obraz, możesz uruchomić aplikację.

Aby uruchomić kontener, użyj następującego polecenia.
```
docker run -dp 3000:3000 getting-started
```
Parametr -d wskazuje, że używasz kontenera w trybie odłączonym w tle. Wartość -p tworzy mapowanie między portem hosta 3000 a portem kontenera 3000. Bez mapowania portów nie można uzyskać dostępu do aplikacji.
Po kilku sekundach w programie VS Code w obszarze Docker w obszarze KONTENERY kliknij prawym przyciskiem myszy pozycję Wprowadzenie i wybierz polecenie Otwórz w przeglądarce. Zamiast tego możesz otworzyć przeglądarkę internetową na http://localhost:3000.

Powinna zostać wyświetlona aplikacja uruchomiona.
Dodaj element lub dwa, aby sprawdzić, czy działa zgodnie z oczekiwaniami. Możesz oznaczyć elementy jako kompletne i usunąć elementy. Fronton pomyślnie przechowuje elementy w zapleczu.

Następne kroki

Ten samouczek został ukończony i masz uruchomionego menedżera listy zadań do wykonania z kilkoma elementami. Wiesz już, jak tworzyć obrazy kontenerów i uruchamiać konteneryzowaną aplikację.

Zachowaj wszystko, co zostało zrobione do tej pory, aby kontynuować tę serię samouczków. Następnie spróbuj wykonać część II tej serii:

Aktualizowanie i udostępnianie aplikacji platformy Docker

Poniżej przedstawiono niektóre zasoby, które mogą być przydatne: