Prostředí pro vývoj JavaScriptu: Konfigurace Docker kontejneru

V dnešním rychle se vyvíjejícím prostředí softwarového vývoje je udržování konzistentního a reprodukovatelného vývojového prostředí klíčové. Různé operační systémy, odlišné verze softwaru a konfliktní závislosti mohou vést k obávanému syndromu "u mě to funguje". Docker, přední platforma pro kontejnerizaci, nabízí silné řešení tohoto problému, které umožňuje vývojářům zabalit jejich aplikaci a její závislosti do jedné izolované jednotky.

Tento průvodce vás provede procesem nastavení robustního a konzistentního prostředí pro vývoj JavaScriptu pomocí Docker kontejnerů. Probereme vše od základního nastavení po pokročilé konfigurace, což zajistí hladký a efektivní pracovní postup pro vaše JavaScriptové projekty, bez ohledu na různé operační systémy vašeho týmu.

Proč používat Docker pro vývoj JavaScriptu?

Než se pustíme do specifik, prozkoumejme výhody používání Dockeru pro vaše vývojové prostředí JavaScriptu:

• Konzistence: Docker zajišťuje, že každý ve vašem týmu pracuje se stejným prostředím, čímž eliminuje problémy s kompatibilitou a snižuje pravděpodobnost chyb způsobených rozdíly v prostředí. To je zvláště důležité pro geograficky distribuované týmy.
• Izolace: Kontejnery poskytují izolaci od hostitelského systému, čímž zabraňují konfliktům s jinými projekty a zajišťují, že se vaše závislosti vzájemně neovlivňují.
• Reprodukovatelnost: Docker obrazy lze snadno sdílet a nasazovat, což usnadňuje reprodukci vašeho vývojového prostředí na různých strojích nebo v produkci. To je obzvláště užitečné při onboardingu nových členů týmu nebo při nasazování na různé cloudové poskytovatele.
• Přenositelnost: Docker kontejnery lze spustit na jakékoli platformě, která podporuje Docker, včetně Windows, macOS a Linuxu, což umožňuje vývojářům používat jejich preferovaný operační systém, aniž by to ovlivnilo projekt.
• Zjednodušené nasazení: Stejný Docker obraz použitý pro vývoj lze použít pro testování a produkci, čímž se zefektivní proces nasazení a sníží riziko chyb.

Předpoklady

Než začnete, ujistěte se, že máte nainstalováno následující:

• Docker: Stáhněte a nainstalujte si Docker Desktop pro váš operační systém z oficiálních stránek Dockeru (docker.com). Docker Desktop obsahuje Docker Engine, Docker CLI, Docker Compose a další nezbytné nástroje.
• Node.js a npm (volitelné): Ačkoli nejsou striktně vyžadovány na vašem hostitelském stroji, protože budou uvnitř kontejneru, mít lokálně nainstalovaný Node.js a npm může být užitečné pro úkoly mimo kontejner nebo při nastavování počáteční struktury projektu. Můžete si je stáhnout z nodejs.org.
• Editor kódu: Vyberte si svůj oblíbený editor kódu (např. VS Code, Sublime Text, Atom). VS Code má vynikající rozšíření pro Docker, která mohou zjednodušit váš pracovní postup.

Základní konfigurace Dockerfile

Základem každého prostředí založeného na Dockeru je Dockerfile. Tento soubor obsahuje instrukce pro sestavení vašeho Docker obrazu. Vytvořme základní Dockerfile pro Node.js aplikaci:

# Použijte oficiální Node.js runtime jako nadřazený obraz
FROM node:18-alpine

# Nastavte pracovní adresář v kontejneru
WORKDIR /app

# Zkopírujte soubory package.json a package-lock.json do pracovního adresáře
COPY package*.json ./

# Nainstalujte závislosti aplikace
RUN npm install

# Zkopírujte zdrojový kód aplikace do pracovního adresáře
COPY . .

# Zpřístupněte port 3000 vnějšímu světu (upravte, pokud vaše aplikace používá jiný port)
EXPOSE 3000

# Definujte příkaz, který se spustí při startu kontejneru
CMD ["npm", "start"]

Pojďme si rozebrat každý řádek:

• FROM node:18-alpine: Určuje základní obraz pro kontejner. V tomto případě používáme oficiální obraz Node.js 18 Alpine, což je lehká distribuce Linuxu. Alpine je známý svou malou velikostí, která pomáhá udržet váš Docker obraz štíhlý. Zvažte jiné verze Node.js podle potřeby vašeho projektu.
• WORKDIR /app: Nastavuje pracovní adresář uvnitř kontejneru na /app. Zde bude umístěn kód vaší aplikace.
• COPY package*.json ./: Kopíruje soubory package.json a package-lock.json (nebo yarn.lock, pokud používáte Yarn) do pracovního adresáře. Kopírování těchto souborů jako prvních umožňuje Dockeru cachovat krok npm install, což výrazně zrychluje časy sestavení, když měníte pouze kód aplikace.
• RUN npm install: Nainstaluje závislosti aplikace definované v package.json.
• COPY . .: Kopíruje všechny zbývající soubory a adresáře z vašeho lokálního projektového adresáře do pracovního adresáře uvnitř kontejneru.
• EXPOSE 3000: Zpřístupňuje port 3000, čímž jej činí dostupným z hostitelského stroje. To je důležité, pokud vaše aplikace naslouchá na tomto portu. Upravte číslo portu, pokud vaše aplikace používá jiný port.
• CMD ["npm", "start"]: Určuje příkaz, který se spustí při startu kontejneru. V tomto případě používáme npm start, což je běžný příkaz pro spouštění Node.js aplikací. Ujistěte se, že tento příkaz odpovídá příkazu definovanému v sekci scripts vašeho package.json.

Sestavení Docker obrazu

Jakmile vytvoříte svůj Dockerfile, můžete sestavit Docker obraz pomocí následujícího příkazu:

docker build -t my-node-app .

Kde:

• docker build: Příkaz Docker pro sestavování obrazů.
• -t my-node-app: Určuje tag (název) pro obraz. Zvolte popisný název pro vaši aplikaci.
• .: Určuje kontext sestavení, což je aktuální adresář. Docker použije Dockerfile v tomto adresáři k sestavení obrazu.

Docker poté provede instrukce ve vašem Dockerfile a sestaví obraz vrstvu po vrstvě. Poprvé, když sestavíte obraz, může to chvíli trvat, než se stáhne základní obraz a nainstalují závislosti. Následná sestavení však budou mnohem rychlejší, protože Docker cachuje mezilehlé vrstvy.

Spuštění Docker kontejneru

Po sestavení obrazu můžete spustit kontejner z něj pomocí následujícího příkazu:

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

Kde:

• docker run: Příkaz Docker pro spouštění kontejnerů.
• -p 3000:3000: Mapuje port 3000 na hostitelském stroji na port 3000 uvnitř kontejneru. To vám umožní přistupovat k vaší aplikaci z prohlížeče pomocí localhost:3000. První číslo je port hostitele a druhé číslo je port kontejneru.
• my-node-app: Název obrazu, který chcete spustit.

Vaše aplikace by nyní měla běžet uvnitř Docker kontejneru. Můžete k ní přistupovat otevřením prohlížeče a přechodem na localhost:3000 (nebo na port, který jste specifikovali). Měli byste vidět uvítací obrazovku nebo počáteční UI vaší aplikace.

Použití Docker Compose

Pro složitější aplikace s více službami je Docker Compose neocenitelným nástrojem. Umožňuje definovat a spravovat multi-kontejnerové aplikace pomocí souboru YAML. Vytvořme soubor docker-compose.yml pro naši Node.js aplikaci:

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

Podívejme se na jednotlivé sekce:

• version: "3.9": Určuje verzi formátu souboru Docker Compose.
• services: Definuje služby, které tvoří vaši aplikaci. V tomto případě máme jednu službu s názvem app.
• build: .: Určuje, že obraz by měl být sestaven z Dockerfile v aktuálním adresáři.
• ports: - "3000:3000": Mapuje port 3000 na hostitelském stroji na port 3000 uvnitř kontejneru, podobně jako příkaz docker run.
• volumes: - .:/app: Vytvoří volume, které připojí aktuální adresář na vašem hostitelském stroji k adresáři /app uvnitř kontejneru. To vám umožní provádět změny kódu na hostitelském stroji a mít je automaticky promítnuté uvnitř kontejneru, což umožňuje hot reloading.
• environment: NODE_ENV: development: Nastavuje proměnnou prostředí NODE_ENV uvnitř kontejneru na development. To je užitečné pro konfiguraci vaší aplikace tak, aby běžela v režimu vývoje.
• command: npm run dev: Přepíše výchozí příkaz definovaný v Dockerfile. V tomto případě používáme npm run dev, což se často používá ke spuštění vývojového serveru s hot reloadingem.

Chcete-li spustit aplikaci pomocí Docker Compose, přejděte do adresáře obsahujícího soubor docker-compose.yml a spusťte následující příkaz:

docker-compose up

Docker Compose sestaví obraz (pokud je to nutné) a spustí kontejner. Pro spuštění kontejneru v odpojeném režimu (na pozadí) lze přidat příznak -d.

Pokročilé možnosti konfigurace

Zde jsou některé pokročilé možnosti konfigurace pro vylepšení vašeho Dockerizovaného vývojového prostředí JavaScriptu:

1. Vícefázové sestavení

Vícefázové sestavení umožňuje použít více instrukcí FROM ve vašem Dockerfile, z nichž každá představuje jinou fázi sestavení. To je užitečné pro snížení velikosti vašeho finálního obrazu oddělením vývojového prostředí od runtime prostředí.

# Fáze 1: Sestavení aplikace
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Fáze 2: Vytvoření runtime obrazu
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

V tomto příkladu první fáze (builder) sestavuje aplikaci pomocí Node.js. Druhá fáze používá Nginx k obsluze sestavených souborů aplikace. Pouze sestavené soubory z první fáze jsou kopírovány do druhé fáze, což vede k menšímu a efektivnějšímu obrazu.

2. Použití proměnných prostředí

Proměnné prostředí jsou mocným způsobem, jak konfigurovat vaši aplikaci bez úprav kódu. Můžete definovat proměnné prostředí ve vašem souboru docker-compose.yml nebo je předat při spuštění pomocí příznaku -e.

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

Ve vaší aplikaci můžete k těmto proměnným prostředí přistupovat pomocí process.env.

const apiUrl = process.env.API_URL;

3. Připojení svazků pro vývoj

Připojení svazků (jak je ukázáno v příkladu Docker Compose) je pro vývoj klíčové, protože vám umožňuje provádět změny kódu na hostitelském stroji a mít je okamžitě promítnuty uvnitř kontejneru. Tím se eliminuje potřeba znovu sestavovat obraz při každé změně.

4. Ladění pomocí VS Code

VS Code má vynikající podporu pro ladění Node.js aplikací běžících uvnitř Docker kontejnerů. Pomocí rozšíření Docker pro VS Code se můžete připojit k běžícímu kontejneru a nastavit zarážky, prohlížet proměnné a procházet svůj kód.

Nejprve si nainstalujte rozšíření Docker do VS Code. Poté vytvořte soubor launch.json ve svém adresáři .vscode s následující konfigurací:

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

Ujistěte se, že vaše Node.js aplikace je spuštěna s příznakem --inspect nebo --inspect-brk. Například můžete upravit svůj soubor docker-compose.yml tak, aby tento příznak zahrnoval:

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

Poté ve VS Code vyberte konfiguraci "Attach to Docker" a začněte ladit. Budete moci nastavovat zarážky a ladit svůj kód běžící uvnitř kontejneru.

5. Použití soukromého npm registru

Pokud pracujete na projektu se soukromými npm balíčky, budete muset nakonfigurovat svůj Docker kontejner pro autentizaci s vaším soukromým npm registrem. To lze provést nastavením proměnné prostředí NPM_TOKEN ve vašem souboru docker-compose.yml nebo vytvořením souboru .npmrc ve vašem projektovém adresáři a jeho zkopírováním do kontejneru.

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

Soubor .npmrc by měl obsahovat váš autentizační token:

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

Nezapomeňte nahradit VASE_TOKEN_NPM svým skutečným npm tokenem. Udržujte tento token v bezpečí a nekomitujte jej do svého veřejného repozitáře.

6. Optimalizace velikosti obrazu

Udržování malé velikosti vašeho Docker obrazu je důležité pro rychlejší časy sestavení a nasazení. Zde je několik tipů pro optimalizaci velikosti obrazu:

• Použijte lehký základní obraz, jako je node:alpine.
• Použijte vícefázové sestavení k oddělení vývojového prostředí od runtime prostředí.
• Odstraňte z obrazu nepotřebné soubory a adresáře.
• Použijte soubor .dockerignore k vyloučení souborů a adresářů z kontextu sestavení.
• Zkombinujte více příkazů RUN do jednoho příkazu, abyste snížili počet vrstev.

Příklad: Dockerizace React aplikace

Ilustrujme si tyto koncepty na praktickém příkladu: Dockerizace React aplikace vytvořené pomocí Create React App.

Nejprve vytvořte novou React aplikaci pomocí Create React App:

npx create-react-app my-react-app
cd my-react-app

Poté vytvořte Dockerfile v kořenovém adresáři 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;"]

Vytvořte soubor docker-compose.yml:

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

Poznámka: Mapujeme port 3000 na hostiteli na port 80 uvnitř kontejneru, protože Nginx obsluhuje aplikaci na portu 80. Možná budete muset upravit mapování portů v závislosti na konfiguraci vaší aplikace.

Nakonec spusťte docker-compose up pro sestavení a spuštění aplikace. Poté můžete k aplikaci přistupovat tak, že v prohlížeči přejdete na localhost:3000.

Běžné problémy a řešení

I přes pečlivou konfiguraci se můžete při práci s Dockerem setkat s problémy. Zde jsou některé běžné problémy a jejich řešení:

• Konflikty portů: Ujistěte se, že porty, které mapujete ve vašem docker-compose.yml nebo příkazu docker run, již nejsou používány jinými aplikacemi na vašem hostitelském stroji.
• Problémy s připojením svazků: Zkontrolujte oprávnění k souborům a adresářům, které připojujete. Docker nemusí mít potřebná oprávnění k přístupu k souborům.
• Chyby sestavení obrazu: Pečlivě zkontrolujte výstup příkazu docker build kvůli chybám. Běžné příčiny zahrnují nesprávnou syntaxi Dockerfile, chybějící závislosti nebo problémy se sítí.
• Havárie kontejneru: Použijte příkaz docker logs k zobrazení protokolů vašeho kontejneru a identifikaci příčiny havárie. Běžné příčiny zahrnují chyby aplikace, chybějící proměnné prostředí nebo omezení zdrojů.
• Pomalé časy sestavení: Optimalizujte svůj Dockerfile pomocí vícefázového sestavení, cachování závislostí a minimalizace počtu vrstev.

Závěr

Docker poskytuje silné a univerzální řešení pro vytváření konzistentních a reprodukovatelných vývojových prostředí JavaScriptu. Používáním Dockeru můžete eliminovat problémy s kompatibilitou, zjednodušit nasazení a zajistit, že každý ve vašem týmu pracuje se stejným prostředím.

Tento průvodce pokryl základy nastavení Dockerizovaného vývojového prostředí JavaScriptu a také některé pokročilé možnosti konfigurace. Dodržením těchto kroků můžete vytvořit robustní a efektivní pracovní postup pro vaše JavaScriptové projekty, bez ohledu na jejich složitost nebo velikost vašeho týmu. Přijměte Docker a odemkněte plný potenciál vašeho vývojového procesu v JavaScriptu.

Další kroky:

• Prozkoumejte Docker Hub a vyhledejte předem sestavené obrazy, které odpovídají vašim specifickým potřebám.
• Ponořte se hlouběji do Docker Compose pro správu multi-kontejnerových aplikací.
• Naučte se o Docker Swarm a Kubernetes pro orchestraci Docker kontejnerů v produkčních prostředích.

Začleněním těchto osvědčených postupů do svého pracovního postupu můžete vytvořit efektivnější, spolehlivější a škálovatelnější vývojové prostředí pro své JavaScriptové aplikace a zajistit úspěch na dnešním konkurenčním trhu.