Vývojové prostredie JavaScript: Konfigurácia Docker kontajnera

V dnešnom rýchlom svete vývoja softvéru je udržiavanie konzistentného a reprodukovateľného vývojového prostredia kľúčové. Rôzne operačné systémy, odlišné verzie softvéru a konfliktné závislosti môžu viesť k obávanému syndrómu „funguje to na mojom stroji“. Docker, popredná platforma na kontajnerizáciu, ponúka silné riešenie tohto problému, ktoré vývojárom umožňuje zabaliť ich aplikáciu a jej závislosti do jednej izolovanej jednotky.

Tento sprievodca vás prevedie procesom nastavenia robustného a konzistentného vývojového prostredia JavaScript pomocou Docker kontajnerov. Pokryjeme všetko od základného nastavenia po pokročilé konfigurácie, čím zaistíme plynulý a efektívny pracovný tok pre vaše JavaScript projekty, bez ohľadu na rôznorodosť operačných systémov vášho tímu.

Prečo používať Docker pre vývoj v JavaScripte?

Predtým, ako sa ponoríme do špecifík, pozrime sa na výhody používania Dockeru pre vaše vývojové prostredie JavaScriptu:

• Konzistencia: Docker zaisťuje, že každý vo vašom tíme pracuje s úplne rovnakým prostredím, čím eliminuje problémy s kompatibilitou a znižuje pravdepodobnosť chýb spôsobených rozdielmi v prostredí. To je obzvlášť dôležité pre geograficky distribuované tímy.
• Izolácia: Kontajnery poskytujú izoláciu od hostiteľského systému, zabraňujú konfliktom s inými projektmi a zaisťujú, že vaše závislosti si navzájom neprekážajú.
• Reprodukovateľnosť: Docker obrazy možno ľahko zdieľať a nasadzovať, čo zjednodušuje reprodukciu vášho vývojového prostredia na rôznych strojoch alebo v produkcii. To je obzvlášť užitočné pri zaškoľovaní nových členov tímu alebo nasadzovaní do rôznych poskytovateľov cloudu.
• Prenosnosť: Docker kontajnery môžu bežať na akejkoľvek platforme, ktorá podporuje Docker, vrátane Windows, macOS a Linux, čo umožňuje vývojárom používať ich preferovaný operačný systém bez ovplyvnenia projektu.
• Zjednodušené nasadenie: Rovnaký Docker obraz použitý na vývoj je možné použiť aj na testovanie a produkciu, čím sa zefektívni proces nasadenia a zníži riziko chýb.

Predpoklady

Predtým, ako začnete, uistite sa, že máte nainštalované nasledujúce:

• Docker: Stiahnite a nainštalujte Docker Desktop pre váš operačný systém z oficiálnej webovej stránky Docker (docker.com). Docker Desktop zahŕňa Docker Engine, Docker CLI, Docker Compose a ďalšie základné nástroje.
• Node.js a npm (voliteľné): Hoci nie sú striktne vyžadované vo vašom hostiteľskom počítači, pretože budú v kontajneri, lokálna inštalácia Node.js a npm môže byť užitočná pre úlohy mimo kontajnera alebo pri nastavovaní počiatočnej štruktúry projektu. Môžete si ich stiahnuť z nodejs.org.
• Editor kódu: Vyberte si preferovaný editor kódu (napr. VS Code, Sublime Text, Atom). VS Code má vynikajúce rozšírenia Docker, ktoré môžu zjednodušiť váš pracovný tok.

Základná konfigurácia Dockerfile

Základom každého prostredia založeného na Docker je súbor Dockerfile. Tento súbor obsahuje inštrukcie na zostavenie vášho Docker obrazu. Poďme vytvoriť základný súbor Dockerfile pre aplikáciu Node.js:

# Používajte oficiálne Node.js runtime ako rodičovský obraz
FROM node:18-alpine

# Nastavte pracovný adresár v kontajneri
WORKDIR /app

# Skopírujte package.json a package-lock.json do pracovného adresára
COPY package*.json ./

# Nainštalujte závislosti aplikácie
RUN npm install

# Skopírujte zdrojový kód aplikácie do pracovného adresára
COPY .\t.

# Sprístupnite port 3000 vonkajšiemu svetu (upravte, ak vaša aplikácia používa iný port)
EXPOSE 3000

# Definujte príkaz, ktorý sa má spustiť, keď sa kontajner spustí
CMD ["npm", "start"]

Rozoberme si každý riadok:

• FROM node:18-alpine: Špecifikuje základný obraz pre kontajner. V tomto prípade používame oficiálny Node.js 18 Alpine obraz, čo je odľahčená distribúcia Linuxu. Alpine je známy svojou malou veľkosťou, ktorá pomáha udržiavať váš Docker obraz štíhly. Zvážte iné verzie Node.js, ak je to vhodné pre váš projekt.
• WORKDIR /app: Nastaví pracovný adresár vo vnútri kontajnera na /app. Tu bude umiestnený kód vašej aplikácie.
• COPY package*.json ./: Skopíruje súbory package.json a package-lock.json (alebo yarn.lock, ak používate Yarn) do pracovného adresára. Skopírovanie týchto súborov ako prvých umožňuje Dockeru cachovať krok npm install, čím sa výrazne urýchli čas zostavenia, keď zmeníte iba kód aplikácie.
• RUN npm install: Nainštaluje závislosti aplikácie definované v package.json.
• COPY . .: Skopíruje všetky zostávajúce súbory a adresáre z vášho lokálneho projektového adresára do pracovného adresára vo vnútri kontajnera.
• EXPOSE 3000: Sprístupní port 3000, čím ho sprístupní z hostiteľského počítača. To je dôležité, ak vaša aplikácia počúva na tomto porte. Upravte číslo portu, ak vaša aplikácia používa iný port.
• CMD ["npm", "start"]: Špecifikuje príkaz, ktorý sa má spustiť, keď sa kontajner spustí. V tomto prípade používame npm start, čo je bežný príkaz na spúšťanie aplikácií Node.js. Uistite sa, že tento príkaz zodpovedá príkazu definovanému v sekcii scripts vášho package.json.

Zostavenie Docker obrazu

Keď ste vytvorili svoj Dockerfile, môžete zostaviť Docker obraz pomocou nasledujúceho príkazu:

docker build -t my-node-app .

Kde:

• docker build: Docker príkaz na zostavovanie obrazov.
• -t my-node-app: Určuje tag (názov) pre obraz. Vyberte výstižný názov pre vašu aplikáciu.
• .: Určuje kontext zostavenia, čo je aktuálny adresár. Docker použije Dockerfile v tomto adresári na zostavenie obrazu.

Docker potom vykoná inštrukcie vo vašom Dockerfile a zostaví obraz vrstvu po vrstve. Pri prvom zostavení obrazu môže trvať nejaký čas stiahnutie základného obrazu a inštalácia závislostí. Následné zostavenia však budú oveľa rýchlejšie, pretože Docker cachuje medzivrstvy.

Spustenie Docker kontajnera

Po zostavení obrazu môžete z neho spustiť kontajner pomocou nasledujúceho príkazu:

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

Kde:

• docker run: Docker príkaz na spúšťanie kontajnerov.
• -p 3000:3000: Mapuje port 3000 na hostiteľskom počítači na port 3000 vo vnútri kontajnera. To vám umožní pristupovať k vašej aplikácii z vášho prehliadača pomocou localhost:3000. Prvé číslo je port hostiteľa a druhé číslo je port kontajnera.
• my-node-app: Názov obrazu, ktorý chcete spustiť.

Vaša aplikácia by mala teraz bežať vo vnútri Docker kontajnera. Môžete k nej pristupovať otvorením prehliadača a prechodom na localhost:3000 (alebo na port, ktorý ste zadali). Mali by ste vidieť uvítaciu obrazovku alebo počiatočné používateľské rozhranie vašej aplikácie.

Používanie Docker Compose

Pre komplexnejšie aplikácie s viacerými službami je Docker Compose neoceniteľným nástrojom. Umožňuje vám definovať a spravovať multi-kontajnerové aplikácie pomocou súboru YAML. Vytvorme súbor docker-compose.yml pre našu aplikáciu Node.js:

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

Preskúmajme každú sekciu:

• version: "3.9": Špecifikuje verziu formátu súboru Docker Compose.
• services: Definuje služby, ktoré tvoria vašu aplikáciu. V tomto prípade máme jednu službu s názvom app.
• build: .: Určuje, že obraz by sa mal zostaviť z Dockerfile v aktuálnom adresári.
• ports: - "3000:3000": Mapuje port 3000 na hostiteľskom počítači na port 3000 vo vnútri kontajnera, podobne ako príkaz docker run.
• volumes: - .:/app: Vytvorí volume, ktorý pripojí aktuálny adresár na vašom hostiteľskom počítači k adresáru /app vo vnútri kontajnera. To vám umožňuje vykonávať zmeny v kóde na hostiteľskom počítači a mať ich automaticky premietnuté vo vnútri kontajnera, čo umožňuje hot reloading.
• environment: NODE_ENV: development: Nastaví premennú prostredia NODE_ENV vo vnútri kontajnera na development. To je užitočné pre konfiguráciu vašej aplikácie na spustenie v režime vývoja.
• command: npm run dev: Prepíše predvolený príkaz definovaný v Dockerfile. V tomto prípade používame npm run dev, ktorý sa často používa na spustenie vývojového servera s hot reloadingom.

Na spustenie aplikácie pomocou Docker Compose prejdite do adresára obsahujúceho súbor docker-compose.yml a spustite nasledujúci príkaz:

docker-compose up

Docker Compose zostaví obraz (ak je to potrebné) a spustí kontajner. Príznak -d je možné pridať na spustenie kontajnera v oddelenom režime (na pozadí).

Pokročilé možnosti konfigurácie

Tu sú niektoré pokročilé možnosti konfigurácie na vylepšenie vášho Dockerizovaného vývojového prostredia JavaScriptu:

1. Viacetapové zostavenia (Multi-Stage Builds)

Viacetapové zostavenia (multi-stage builds) vám umožňujú používať viacero inštrukcií FROM vo vašom Dockerfile, pričom každá reprezentuje inú fázu zostavenia. To je užitočné na zníženie veľkosti vášho finálneho obrazu oddelením prostredia zostavenia od prostredia behu.

# Fáza 1: Zostavenie aplikácie
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY .\t.
RUN npm run build

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

V tomto príklade prvá fáza (builder) zostaví aplikáciu pomocou Node.js. Druhá fáza používa Nginx na servírovanie zostavených súborov aplikácie. Iba zostavené súbory z prvej fázy sa skopírujú do druhej fázy, čo vedie k menšiemu a efektívnejšiemu obrazu.

2. Používanie premenných prostredia

Premenné prostredia sú výkonný spôsob, ako konfigurovať vašu aplikáciu bez úpravy kódu. Premenné prostredia môžete definovať vo vašom súbore docker-compose.yml alebo ich odovzdať počas behu pomocou príznaku -e.

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

Vo vnútri vašej aplikácie môžete k týmto premenným prostredia pristupovať pomocou process.env.

const apiUrl = process.env.API_URL;

3. Pripojenie zväzkov (Volume Mounting) pre vývoj

Pripojenie zväzkov (ako je ukázané v príklade Docker Compose) je kľúčové pre vývoj, pretože vám umožňuje vykonávať zmeny v kóde na hostiteľskom počítači a mať ich okamžite premietnuté vo vnútri kontajnera. Tým sa eliminuje potreba znova zostavovať obraz pri každej zmene.

4. Ladenie s VS Code

VS Code má vynikajúcu podporu pre ladenie aplikácií Node.js bežiacich vo vnútri Docker kontajnerov. Môžete použiť rozšírenie VS Code Docker na pripojenie k bežiacemu kontajneru a nastaviť zarážky, kontrolovať premenné a krokovo prechádzať vaším kódom.

Najprv nainštalujte rozšírenie Docker do VS Code. Potom vytvorte súbor launch.json vo vašom adresári .vscode s nasledujúcou konfiguráciou:

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

Uistite sa, že vaša aplikácia Node.js je spustená s príznakom --inspect alebo --inspect-brk. Napríklad môžete upraviť váš súbor docker-compose.yml tak, aby zahŕňal tento príznak:

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

Potom vo VS Code vyberte konfiguráciu "Attach to Docker" a začnite ladiť. Budete môcť nastaviť zarážky a ladiť váš kód bežiaci vo vnútri kontajnera.

5. Používanie súkromného npm registra

Ak pracujete na projekte so súkromnými npm balíkmi, budete musieť nakonfigurovať váš Docker kontajner tak, aby sa autentifikoval s vaším súkromným npm registrom. To sa dá urobiť nastavením premennej prostredia NPM_TOKEN vo vašom súbore docker-compose.yml alebo vytvorením súboru .npmrc vo vašom projektovom adresári a jeho skopírovaním do kontajnera.

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

Súbor .npmrc by mal obsahovať váš autentifikačný token:

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

Nezabudnite nahradiť YOUR_NPM_TOKEN vaším skutočným npm tokenom. Udržujte tento token v bezpečí a necommitujte ho do vášho verejného repozitára.

6. Optimalizácia veľkosti obrazu

Udržiavanie malej veľkosti Docker obrazu je dôležité pre rýchlejšie časy zostavenia a nasadenia. Tu sú niektoré tipy na optimalizáciu veľkosti obrazu:

• Použite odľahčený základný obraz, ako napríklad node:alpine.
• Používajte viacetapové zostavenia na oddelenie prostredia zostavenia od prostredia behu.
• Odstráňte nepotrebné súbory a adresáre z obrazu.
• Použite súbor .dockerignore na vylúčenie súborov a adresárov z kontextu zostavenia.
• Skombinujte viacero príkazov RUN do jedného príkazu, aby ste znížili počet vrstiev.

Príklad: Dockerizácia aplikácie React

Ilustrujme si tieto koncepty praktickým príkladom: Dockerizácia aplikácie React vytvorenej pomocou Create React App.

Najprv vytvorte novú aplikáciu React pomocou Create React App:

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

Potom vytvorte Dockerfile v koreňovom adresári projektu:

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

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

Vytvorte súbor docker-compose.yml:

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

Poznámka: Mapujeme port 3000 na hostiteľovi na port 80 vo vnútri kontajnera, pretože Nginx servíruje aplikáciu na porte 80. Možno budete musieť upraviť mapovanie portov v závislosti od konfigurácie vašej aplikácie.

Nakoniec spustite docker-compose up na zostavenie a spustenie aplikácie. Potom môžete k aplikácii pristupovať navigáciou na localhost:3000 vo vašom prehliadači.

Časté problémy a riešenie

Aj pri starostlivej konfigurácii sa môžete stretnúť s problémami pri práci s Dockerom. Tu sú niektoré bežné problémy a ich riešenia:

• Konflikty portov: Uistite sa, že porty, ktoré mapujete vo vašom docker-compose.yml alebo príkaze docker run, už nie sú používané inými aplikáciami na vašom hostiteľskom počítači.
• Problémy s pripojením zväzkov: Skontrolujte oprávnenia súborov a adresárov, ktoré pripájate. Docker nemusí mať potrebné oprávnenia na prístup k súborom.
• Zlyhania zostavenia obrazu: Pozorne preskúmajte výstup príkazu docker build na chyby. Bežné príčiny zahŕňajú nesprávnu syntax Dockerfile, chýbajúce závislosti alebo problémy so sieťou.
• Zlyhania kontajnera: Použite príkaz docker logs na zobrazenie logov vášho kontajnera a identifikáciu príčiny zlyhania. Bežné príčiny zahŕňajú chyby aplikácie, chýbajúce premenné prostredia alebo obmedzenia zdrojov.
• Pomalé časy zostavenia: Optimalizujte svoj Dockerfile pomocou viacetapových zostavení, cachovania závislostí a minimalizácie počtu vrstiev.

Záver

Docker poskytuje výkonné a všestranné riešenie pre vytváranie konzistentných a reprodukovateľných vývojových prostredí JavaScriptu. Používaním Dockeru môžete eliminovať problémy s kompatibilitou, zjednodušiť nasadenie a zaistiť, že každý vo vašom tíme pracuje s rovnakým prostredím.

Tento sprievodca pokryl základy nastavenia Dockerizovaného vývojového prostredia JavaScriptu, ako aj niektoré pokročilé možnosti konfigurácie. Dodržiavaním týchto krokov môžete vytvoriť robustný a efektívny pracovný tok pre vaše JavaScript projekty, bez ohľadu na ich zložitosť alebo veľkosť vášho tímu. Prijmite Docker a odomknite plný potenciál vášho procesu vývoja JavaScriptu.

Ďalšie kroky:

• Preskúmajte Docker Hub pre vopred pripravené obrazy, ktoré vyhovujú vašim špecifickým potrebám.
• Ponorte sa hlbšie do Docker Compose pre správu viac-kontajnerových aplikácií.
• Dozviete sa o Docker Swarm a Kubernetes pre orchestráciu Docker kontajnerov v produkčných prostrediach.

Zabudovaním týchto osvedčených postupov do vášho pracovného toku môžete vytvoriť efektívnejšie, spoľahlivejšie a škálovateľnejšie vývojové prostredie pre vaše JavaScript aplikácie, čím zaistíte úspech na dnešnom konkurenčnom trhu.