Środowisko programistyczne JavaScript: Konfiguracja kontenera Docker

W dzisiejszym dynamicznym krajobrazie tworzenia oprogramowania utrzymanie spójnego i odtwarzalnego środowiska programistycznego jest kluczowe. Różne systemy operacyjne, różne wersje oprogramowania i konflikty zależności mogą prowadzić do przykrego syndromu "u mnie działa". Docker, wiodąca platforma konteneryzacji, stanowi potężne rozwiązanie tego problemu, umożliwiając programistom pakowanie aplikacji i jej zależności w jedną, izolowaną jednostkę.

Ten przewodnik przeprowadzi Cię przez proces konfiguracji solidnego i spójnego środowiska programistycznego JavaScript przy użyciu kontenerów Docker. Omówimy wszystko, od podstawowej konfiguracji po zaawansowane ustawienia, zapewniając płynny i efektywny przepływ pracy dla Twoich projektów JavaScript, niezależnie od różnorodnych systemów operacyjnych w Twoim zespole.

Dlaczego warto używać Dockera do programowania w JavaScript?

Zanim przejdziemy do szczegółów, przyjrzyjmy się korzyściom płynącym z używania Dockera do środowiska programistycznego JavaScript:

• Spójność: Docker zapewnia, że wszyscy w Twoim zespole pracują w dokładnie tym samym środowisku, eliminując problemy z kompatybilnością i zmniejszając prawdopodobieństwo błędów spowodowanych różnicami w środowisku. Jest to szczególnie ważne dla zespołów rozproszonych geograficznie.
• Izolacja: Kontenery zapewniają izolację od systemu hosta, zapobiegając konfliktom z innymi projektami i zapewniając, że Twoje zależności nie będą ze sobą kolidować.
• Odtwarzalność: Obrazy Dockera można łatwo udostępniać i wdrażać, co ułatwia odtwarzanie środowiska programistycznego na różnych maszynach lub w produkcji. Jest to szczególnie pomocne przy wdrażaniu nowych członków zespołu lub wdrażaniu do różnych dostawców chmur.
• Przenośność: Kontenery Dockera mogą działać na każdej platformie obsługującej Dockera, w tym na systemach Windows, macOS i Linux, co pozwala programistom na używanie preferowanego systemu operacyjnego bez wpływu na projekt.
• Uproszczone wdrażanie: Ten sam obraz Dockera używany do programowania może być używany do testowania i produkcji, usprawniając proces wdrażania i zmniejszając ryzyko błędów.

Wymagania wstępne

Zanim zaczniesz, upewnij się, że masz zainstalowane następujące elementy:

• Docker: Pobierz i zainstaluj Docker Desktop dla swojego systemu operacyjnego ze strony internetowej Dockera (docker.com). Docker Desktop zawiera Docker Engine, Docker CLI, Docker Compose i inne niezbędne narzędzia.
• Node.js i npm (opcjonalnie): Chociaż nie są one ściśle wymagane na Twojej maszynie hosta, ponieważ będą znajdować się w kontenerze, posiadanie zainstalowanego lokalnie Node.js i npm może być pomocne w zadaniach poza kontenerem lub podczas konfigurowania początkowej struktury projektu. Możesz je pobrać ze strony nodejs.org.
• Edytor kodu: Wybierz preferowany edytor kodu (np. VS Code, Sublime Text, Atom). VS Code ma doskonałe rozszerzenia Docker, które mogą uprościć Twój przepływ pracy.

Podstawowa konfiguracja Dockerfile

Fundamentem każdego środowiska opartego na Dockerze jest Dockerfile. Ten plik zawiera instrukcje dotyczące budowania Twojego obrazu Dockera. Utwórzmy podstawowy Dockerfile dla aplikacji Node.js:

# Użyj oficjalnego obrazu bazowego Node.js
FROM node:18-alpine

# Ustaw katalog roboczy w kontenerze
WORKDIR /app

# Skopiuj pliki package.json i package-lock.json do katalogu roboczego
COPY package*.json ./

# Zainstaluj zależności aplikacji
RUN npm install

# Skopiuj kod źródłowy aplikacji do katalogu roboczego
COPY . .

# Udostępnij port 3000 na zewnątrz (dostosuj, jeśli Twoja aplikacja używa innego portu)
EXPOSE 3000

# Zdefiniuj polecenie do uruchomienia po starcie kontenera
CMD ["npm", "start"]

Przeanalizujmy każdą linię:

• FROM node:18-alpine: Określa obraz bazowy dla kontenera. W tym przypadku używamy oficjalnego obrazu Node.js 18 Alpine, który jest lekką dystrybucją Linuksa. Alpine jest znany ze swoich niewielkich rozmiarów, co pomaga utrzymać obraz Dockera w czystości. Rozważ inne wersje Node.js w zależności od potrzeb Twojego projektu.
• WORKDIR /app: Ustawia katalog roboczy wewnątrz kontenera na /app. Tutaj znajdować się będzie kod Twojej aplikacji.
• COPY package*.json ./: Kopiuje pliki package.json i package-lock.json (lub yarn.lock, jeśli używasz Yarn) do katalogu roboczego. Kopiowanie tych plików najpierw pozwala Dockerowi na buforowanie kroku npm install, co znacznie przyspiesza czas budowania, gdy zmieniasz tylko kod aplikacji.
• RUN npm install: Instaluje zależności aplikacji zdefiniowane w package.json.
• COPY . .: Kopiuje wszystkie pozostałe pliki i katalogi z Twojego lokalnego katalogu projektu do katalogu roboczego wewnątrz kontenera.
• EXPOSE 3000: Udostępnia port 3000, czyniąc go dostępnym z maszyny hosta. Jest to ważne, jeśli Twoja aplikacja nasłuchuje na tym porcie. Dostosuj numer portu, jeśli Twoja aplikacja używa innego portu.
• CMD ["npm", "start"]: Określa polecenie do wykonania po uruchomieniu kontenera. W tym przypadku używamy npm start, które jest powszechnym poleceniem do uruchamiania aplikacji Node.js. Upewnij się, że to polecenie pasuje do polecenia zdefiniowanego w sekcji scripts Twojego package.json.

Budowanie obrazu Dockera

Po utworzeniu Dockerfile możesz zbudować obraz Dockera za pomocą następującego polecenia:

docker build -t moj-node-app .

Gdzie:

• docker build: Polecenie Dockera do budowania obrazów.
• -t moj-node-app: Określa tag (nazwę) dla obrazu. Wybierz opisową nazwę dla swojej aplikacji.
• .: Określa kontekst budowania, którym jest bieżący katalog. Docker użyje Dockerfile w tym katalogu do zbudowania obrazu.

Docker wykona instrukcje w Twoim Dockerfile, budując obraz warstwa po warstwie. Za pierwszym razem, gdy zbudujesz obraz, może to potrwać trochę czasu, aby pobrać obraz bazowy i zainstalować zależności. Jednak kolejne budowania będą znacznie szybsze, ponieważ Docker buforuje warstwy pośrednie.

Uruchamianie kontenera Dockera

Po zbudowaniu obrazu możesz uruchomić kontener z niego za pomocą następującego polecenia:

docker run -p 3000:3000 moj-node-app

Gdzie:

• docker run: Polecenie Dockera do uruchamiania kontenerów.
• -p 3000:3000: Mapuje port 3000 na maszynie hosta do portu 3000 wewnątrz kontenera. Pozwala to na dostęp do aplikacji z przeglądarki za pomocą localhost:3000. Pierwsza liczba to port hosta, a druga to port kontenera.
• moj-node-app: Nazwa obrazu, który chcesz uruchomić.

Twoja aplikacja powinna teraz działać wewnątrz kontenera Dockera. Możesz uzyskać do niej dostęp, otwierając przeglądarkę i przechodząc do localhost:3000 (lub do portu, który określiłeś). Powinieneś zobaczyć ekran powitalny lub początkowy interfejs użytkownika swojej aplikacji.

Używanie Dockera Compose

Dla bardziej złożonych aplikacji z wieloma usługami, Docker Compose jest nieocenionym narzędziem. Pozwala on na definiowanie i zarządzanie aplikacjami wielokontenerowymi za pomocą pliku YAML. Utwórzmy plik docker-compose.yml dla naszej aplikacji Node.js:

version: "3.9"
services:
  app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    environment:
      NODE_ENV: development
    command: npm run dev

Przeanalizujmy każdą sekcję:

• version: "3.9": Określa wersję formatu pliku Docker Compose.
• services: Definiuje usługi tworzące Twoją aplikację. W tym przypadku mamy pojedynczą usługę o nazwie app.
• build: .: Określa, że obraz powinien być zbudowany z Dockerfile znajdującego się w bieżącym katalogu.
• ports: - "3000:3000": Mapuje port 3000 na maszynie hosta do portu 3000 wewnątrz kontenera, podobnie jak polecenie docker run.
• volumes: - .:/app: Tworzy wolumen, który mapuje bieżący katalog na Twojej maszynie hosta do katalogu /app wewnątrz kontenera. Pozwala to na wprowadzanie zmian w kodzie na maszynie hosta i ich natychmiastowe odbicie wewnątrz kontenera, co umożliwia przeładowanie na gorąco.
• environment: NODE_ENV: development: Ustawia zmienną środowiskową NODE_ENV wewnątrz kontenera na development. Jest to przydatne do konfiguracji aplikacji do działania w trybie deweloperskim.
• command: npm run dev: Zastępuje domyślne polecenie zdefiniowane w Dockerfile. W tym przypadku używamy npm run dev, które jest często używane do uruchamiania serwera deweloperskiego z przeładowywaniem na gorąco.

Aby uruchomić aplikację przy użyciu Docker Compose, przejdź do katalogu zawierającego plik docker-compose.yml i uruchom następujące polecenie:

docker-compose up

Docker Compose zbuduje obraz (jeśli jest to konieczne) i uruchomi kontener. Flagę -d można dodać, aby uruchomić kontener w trybie rozłączonym (w tle).

Zaawansowane opcje konfiguracji

Oto kilka zaawansowanych opcji konfiguracji, które usprawnią Twoje środowisko programistyczne JavaScript w Dockerze:

1. Budowanie wieloetapowe

Budowanie wieloetapowe pozwala na użycie wielu instrukcji FROM w Twoim Dockerfile, z których każda reprezentuje inny etap budowania. Jest to przydatne do zmniejszenia rozmiaru końcowego obrazu poprzez oddzielenie środowiska budowania od środowiska uruchomieniowego.

# Etap 1: Budowanie aplikacji
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Etap 2: Tworzenie obrazu uruchomieniowego
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

W tym przykładzie pierwszy etap (builder) buduje aplikację przy użyciu Node.js. Drugi etap używa Nginx do serwowania plików zbudowanej aplikacji. Tylko zbudowane pliki z pierwszego etapu są kopiowane do drugiego etapu, co skutkuje mniejszym i bardziej wydajnym obrazem.

2. Używanie zmiennych środowiskowych

Zmienne środowiskowe są potężnym sposobem konfiguracji aplikacji bez modyfikowania kodu. Możesz zdefiniować zmienne środowiskowe w pliku docker-compose.yml lub przekazać je podczas uruchamiania za pomocą flagi -e.

services:
  app:
    environment:
      API_URL: "http://api.example.com"

Wewnątrz swojej aplikacji możesz uzyskać dostęp do tych zmiennych środowiskowych za pomocą process.env.

const apiUrl = process.env.API_URL;

3. Mapowanie wolumenów do rozwoju

Mapowanie wolumenów (jak pokazano w przykładzie Docker Compose) jest kluczowe dla rozwoju, ponieważ pozwala na wprowadzanie zmian w kodzie na maszynie hosta i ich natychmiastowe odzwierciedlenie wewnątrz kontenera. Eliminuje to potrzebę ponownego budowania obrazu za każdym razem, gdy wprowadzisz zmianę.

4. Debugowanie z VS Code

VS Code ma doskonałe wsparcie do debugowania aplikacji Node.js działających w kontenerach Dockera. Możesz użyć rozszerzenia VS Code Docker, aby dołączyć do uruchomionego kontenera i ustawiać punkty przerwania, sprawdzać zmienne i krok po kroku przechodzić przez kod.

Najpierw zainstaluj rozszerzenie Docker w VS Code. Następnie utwórz plik launch.json w swoim katalogu .vscode z następującą konfiguracją:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Docker",
      "port": 9229,
      "address": "localhost",
      "remoteRoot": "/app",
      "localRoot": "${workspaceFolder}"
    }
  ]
}

Upewnij się, że Twoja aplikacja Node.js jest uruchamiana z flagą --inspect lub --inspect-brk. Na przykład, możesz zmodyfikować plik docker-compose.yml, aby uwzględnić tę flagę:

services:
  app:
    command: npm run dev -- --inspect=0.0.0.0:9229

Następnie, w VS Code, wybierz konfigurację "Attach to Docker" i rozpocznij debugowanie. Będziesz mógł ustawiać punkty przerwania i debugować swój kod działający w kontenerze.

5. Używanie prywatnego rejestru npm

Jeśli pracujesz nad projektem z prywatnymi pakietami npm, będziesz musiał skonfigurować swój kontener Docker do uwierzytelniania w swoim prywatnym rejestrze npm. Można to zrobić, ustawiając zmienną środowiskową NPM_TOKEN w pliku docker-compose.yml lub tworząc plik .npmrc w katalogu projektu i kopiując go do kontenera.

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
COPY .npmrc .
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

Plik `.npmrc` powinien zawierać Twój token uwierzytelniający:

//registry.npmjs.org/:_authToken=TWOJ_TOKEN_npm

Pamiętaj, aby zastąpić TWOJ_TOKEN_npm swoim rzeczywistym tokenem npm. Przechowuj ten token bezpiecznie i nie dodawaj go do publicznego repozytorium.

6. Optymalizacja rozmiaru obrazu

Utrzymanie małego rozmiaru obrazu Dockera jest ważne dla szybszego budowania i wdrażania. Oto kilka wskazówek dotyczących optymalizacji rozmiaru obrazu:

• Użyj lekkiego obrazu bazowego, takiego jak node:alpine.
• Użyj budowania wieloetapowego, aby oddzielić środowisko budowania od środowiska uruchomieniowego.
• Usuń niepotrzebne pliki i katalogi z obrazu.
• Użyj pliku .dockerignore, aby wykluczyć pliki i katalogi z kontekstu budowania.
• Połącz wiele poleceń RUN w jedno polecenie, aby zmniejszyć liczbę warstw.

Przykład: Dockerowanie aplikacji React

Zilustrujmy te koncepcje praktycznym przykładem: dockerowaniem aplikacji React stworzonej za pomocą Create React App.

Najpierw utwórz nową aplikację React za pomocą Create React App:

npx create-react-app moja-aplikacja-react
cd moja-aplikacja-react

Następnie utwórz Dockerfile w katalogu głównym projektu:

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Utwórz plik docker-compose.yml:

version: "3.9"
services:
  app:
    build: .
    ports:
      - "3000:80"
    volumes:
      - .:/app
    environment:
      NODE_ENV: development

Uwaga: Mapujemy port 3000 na hoście do portu 80 wewnątrz kontenera, ponieważ Nginx serwuje aplikację na porcie 80. Może być konieczne dostosowanie mapowania portów w zależności od konfiguracji aplikacji.

Na koniec uruchom docker-compose up, aby zbudować i uruchomić aplikację. Następnie możesz uzyskać dostęp do aplikacji, przechodząc do localhost:3000 w przeglądarce.

Częste problemy i rozwiązywanie problemów

Nawet przy starannej konfiguracji możesz napotkać problemy podczas pracy z Dockerem. Oto kilka częstych problemów i ich rozwiązania:

• Konflikty portów: Upewnij się, że porty, które mapujesz w swoim poleceniu docker-compose.yml lub docker run, nie są już używane przez inne aplikacje na Twojej maszynie hosta.
• Problemy z mapowaniem wolumenów: Sprawdź uprawnienia do plików i katalogów, które mapujesz. Docker może nie mieć niezbędnych uprawnień do dostępu do plików.
• Błędy budowania obrazu: Dokładnie przeanalizuj wyjście polecenia docker build pod kątem błędów. Typowe przyczyny obejmują nieprawidłową składnię Dockerfile, brakujące zależności lub problemy z siecią.
• Awaryjne zamykanie kontenerów: Użyj polecenia docker logs, aby wyświetlić logi swojego kontenera i zidentyfikować przyczynę awarii. Typowe przyczyny obejmują błędy aplikacji, brakujące zmienne środowiskowe lub ograniczenia zasobów.
• Długi czas budowania: Zoptymalizuj swój Dockerfile, używając budowania wieloetapowego, buforując zależności i minimalizując liczbę warstw.

Wnioski

Docker stanowi potężne i wszechstronne rozwiązanie do tworzenia spójnych i odtwarzalnych środowisk programistycznych JavaScript. Korzystając z Dockera, możesz wyeliminować problemy z kompatybilnością, uprościć wdrażanie i zapewnić, że wszyscy w Twoim zespole pracują w tym samym środowisku.

Ten przewodnik omówił podstawy konfiguracji środowiska programistycznego JavaScript w Dockerze, a także kilka zaawansowanych opcji konfiguracji. Postępując zgodnie z tymi krokami, możesz stworzyć solidny i wydajny przepływ pracy dla swoich projektów JavaScript, niezależnie od ich złożoności czy wielkości Twojego zespołu. Przyjmij Dockera i uwolnij pełny potencjał swojego procesu programowania JavaScript.

Następne kroki:

• Przeglądaj Docker Hub w poszukiwaniu gotowych obrazów, które pasują do Twoich konkretnych potrzeb.
• Zagłęb się w Docker Compose, aby zarządzać aplikacjami wielokontenerowymi.
• Dowiedz się o Docker Swarm i Kubernetes do orkiestracji kontenerów Dockera w środowiskach produkcyjnych.

Włączając te najlepsze praktyki do swojego przepływu pracy, możesz stworzyć bardziej wydajne, niezawodne i skalowalne środowisko programistyczne dla swoich aplikacji JavaScript, zapewniając sukces na konkurencyjnym rynku.