JavaScript razvojno okruženje: Konfiguracija Docker spremnika

U današnjem brzom svijetu razvoja softvera, održavanje dosljednog i ponovljivog razvojnog okruženja je ključno. Različiti operativni sustavi, različite verzije softvera i neusklađene ovisnosti mogu dovesti do strašnog sindroma "radi na mojem računalu". Docker, vodeća platforma za kontejnerizaciju, pruža moćno rješenje za ovaj problem, omogućujući programerima da zapakiraju svoju aplikaciju i njezine ovisnosti u jednu, izoliranu jedinicu.

Ovaj vodič će vas provesti kroz proces postavljanja robusnog i dosljednog JavaScript razvojnog okruženja pomoću Docker spremnika. Pokrit ćemo sve, od osnovne postave do naprednih konfiguracija, osiguravajući gladak i učinkovit tijek rada za vaše JavaScript projekte, bez obzira na različite operativne sustave vašeg tima.

Zašto koristiti Docker za JavaScript razvoj?

Prije nego što se upustimo u detalje, istražimo prednosti korištenja Dockera za vaše JavaScript razvojno okruženje:

• Dosljednost: Docker osigurava da svi u vašem timu rade s potpuno istim okruženjem, eliminirajući probleme s kompatibilnošću i smanjujući vjerojatnost grešaka uzrokovanih razlikama u okruženju. To je posebno važno za geografski raspoređene timove.
• Izolacija: Spremnici pružaju izolaciju od glavnog sustava, sprječavajući sukobe s drugim projektima i osiguravajući da se vaše ovisnosti ne miješaju jedna s drugom.
• Ponovljivost: Docker slike se mogu lako dijeliti i implementirati, što olakšava reproduciranje vašeg razvojnog okruženja na različitim računalima ili u produkciji. To je posebno korisno prilikom uvođenja novih članova tima ili implementacije na različite pružatelje usluga u oblaku.
• Prenosivost: Docker spremnici mogu se izvoditi na bilo kojoj platformi koja podržava Docker, uključujući Windows, macOS i Linux, omogućujući programerima da koriste svoj preferirani operativni sustav bez utjecaja na projekt.
• Pojednostavljena implementacija: Ista Docker slika koja se koristi za razvoj može se koristiti za testiranje i produkciju, pojednostavljujući proces implementacije i smanjujući rizik od pogrešaka.

Preduvjeti

Prije nego što započnete, provjerite imate li instalirano sljedeće:

• Docker: Preuzmite i instalirajte Docker Desktop za vaš operativni sustav sa službene Docker web stranice (docker.com). Docker Desktop uključuje Docker Engine, Docker CLI, Docker Compose i druge bitne alate.
• Node.js i npm (opcionalno): Iako nisu strogo potrebni na vašem glavnom računalu jer će biti unutar spremnika, instalirani Node.js i npm mogu biti korisni za zadatke izvan spremnika ili prilikom postavljanja početne strukture projekta. Možete ih preuzeti s nodejs.org.
• Uređivač koda: Odaberite svoj preferirani uređivač koda (npr. VS Code, Sublime Text, Atom). VS Code ima izvrsne Docker ekstenzije koje mogu pojednostaviti vaš tijek rada.

Osnovna konfiguracija Dockerfile datoteke

Temelj svakog okruženja temeljenog na Dockeru je Dockerfile. Ova datoteka sadrži upute za izgradnju vaše Docker slike. Kreirajmo osnovni Dockerfile za Node.js aplikaciju:

# Koristite službeni Node.js runtime kao roditeljsku sliku
FROM node:18-alpine

# Postavite radni direktorij u spremniku
WORKDIR /app

# Kopirajte package.json i package-lock.json u radni direktorij
COPY package*.json ./

# Instalirajte ovisnosti aplikacije
RUN npm install

# Kopirajte izvorni kod aplikacije u radni direktorij
COPY . .

# Izložite port 3000 vanjskom svijetu (prilagodite ako vaša aplikacija koristi drugi port)
EXPOSE 3000

# Definirajte naredbu koja će se pokrenuti kada se spremnik pokrene
CMD ["npm", "start"]

Analizirajmo svaki redak:

• FROM node:18-alpine: Određuje osnovnu sliku za spremnik. U ovom slučaju koristimo službenu Node.js 18 Alpine sliku, koja je lagana Linux distribucija. Alpine je poznat po svojoj maloj veličini, što pomaže održati vašu Docker sliku vitkom. Razmotrite druge verzije Node.js-a prema potrebama vašeg projekta.
• WORKDIR /app: Postavlja radni direktorij unutar spremnika na /app. Ovdje će se nalaziti kod vaše aplikacije.
• COPY package*.json ./: Kopira datoteke package.json i package-lock.json (ili yarn.lock ako koristite Yarn) u radni direktorij. Kopiranje ovih datoteka prvo omogućuje Dockeru da kešira korak npm install, značajno ubrzavajući vrijeme izgradnje kada mijenjate samo kod aplikacije.
• RUN npm install: Instalira ovisnosti aplikacije definirane u package.json.
• COPY . .: Kopira sve preostale datoteke i direktorije iz vašeg lokalnog projektnog direktorija u radni direktorij unutar spremnika.
• EXPOSE 3000: Izlaže port 3000, čineći ga dostupnim s glavnog računala. To je važno ako vaša aplikacija sluša na ovom portu. Prilagodite broj porta ako vaša aplikacija koristi drugi port.
• CMD ["npm", "start"]: Određuje naredbu koja će se pokrenuti kada se spremnik pokrene. U ovom slučaju koristimo npm start, što je uobičajena naredba za pokretanje Node.js aplikacija. Provjerite odgovara li ova naredba naredbi definiranoj u odjeljku scripts vaše package.json datoteke.

Izgradnja Docker slike

Nakon što ste stvorili svoj Dockerfile, možete izgraditi Docker sliku pomoću sljedeće naredbe:

docker build -t my-node-app .

Gdje:

• docker build: Docker naredba za izgradnju slika.
• -t my-node-app: Određuje oznaku (naziv) za sliku. Odaberite deskriptivno ime za svoju aplikaciju.
• .: Određuje kontekst izgradnje, što je trenutni direktorij. Docker će koristiti Dockerfile u ovom direktoriju za izgradnju slike.

Docker će zatim izvršiti upute u vašem Dockerfileu, gradeći sliku sloj po sloj. Prvi put kada gradite sliku, može potrajati neko vrijeme za preuzimanje osnovne slike i instaliranje ovisnosti. Međutim, sljedeće izgradnje bit će puno brže jer Docker kešira međuslojeve.

Pokretanje Docker spremnika

Nakon što je slika izgrađena, možete pokrenuti spremnik iz nje pomoću sljedeće naredbe:

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

Gdje:

• docker run: Docker naredba za pokretanje spremnika.
• -p 3000:3000: Mapira port 3000 na glavnom računalu na port 3000 unutar spremnika. To vam omogućuje pristup vašoj aplikaciji iz preglednika koristeći localhost:3000. Prvi broj je port glavnog računala, a drugi broj je port spremnika.
• my-node-app: Naziv slike koju želite pokrenuti.

Vaša aplikacija bi sada trebala raditi unutar Docker spremnika. Možete joj pristupiti otvaranjem preglednika i navigacijom na localhost:3000 (ili port koji ste naveli). Trebali biste vidjeti početni zaslon ili početno sučelje vaše aplikacije.

Korištenje Docker Compose-a

Za složenije aplikacije s više servisa, Docker Compose je neprocjenjiv alat. Omogućuje vam definiranje i upravljanje aplikacijama s više spremnika pomoću YAML datoteke. Kreirajmo docker-compose.yml datoteku za našu Node.js aplikaciju:

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

Pogledajmo svaki odjeljak:

• version: "3.9": Određuje verziju formata Docker Compose datoteke.
• services: Definira servise koji čine vašu aplikaciju. U ovom slučaju imamo jedan servis nazvan app.
• build: .: Određuje da se slika treba graditi iz Dockerfile datoteke u trenutnom direktoriju.
• ports: - "3000:3000": Mapira port 3000 na glavnom računalu na port 3000 unutar spremnika, slično naredbi docker run.
• volumes: - .:/app: Stvara volumen koji montira trenutni direktorij na vašem glavnom računalu na /app direktorij unutar spremnika. To vam omogućuje da unosite promjene u svoj kod na glavnom računalu i da se one automatski odraze unutar spremnika, omogućujući vruće ponovno učitavanje (hot reloading).
• environment: NODE_ENV: development: Postavlja varijablu okruženja NODE_ENV unutar spremnika na development. To je korisno za konfiguriranje vaše aplikacije da radi u razvojnom načinu.
• command: npm run dev: Nadjačava zadanu naredbu definiranu u Dockerfileu. U ovom slučaju koristimo npm run dev, koja se često koristi za pokretanje razvojnog poslužitelja s vrućim ponovnim učitavanjem.

Za pokretanje aplikacije pomoću Docker Compose-a, navigirajte do direktorija koji sadrži docker-compose.yml datoteku i pokrenite sljedeću naredbu:

docker-compose up

Docker Compose će izgraditi sliku (ako je potrebno) i pokrenuti spremnik. Zastavica -d se može dodati za pokretanje spremnika u odvojenom načinu (u pozadini).

Napredne opcije konfiguracije

Ovdje su neke napredne opcije konfiguracije za poboljšanje vašeg Dockeriziranog JavaScript razvojnog okruženja:

1. Višefazne izgradnje (Multi-Stage Builds)

Višefazne izgradnje omogućuju vam korištenje više FROM uputa u vašem Dockerfile, od kojih svaka predstavlja različitu fazu izgradnje. To je korisno za smanjenje veličine vaše konačne slike odvajanjem okruženja za izgradnju od okruženja za izvođenje.

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

# Faza 2: Stvaranje runtime slike
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

U ovom primjeru, prva faza (builder) gradi aplikaciju koristeći Node.js. Druga faza koristi Nginx za posluživanje izgrađenih datoteka aplikacije. Samo izgrađene datoteke iz prve faze kopiraju se u drugu fazu, što rezultira manjom i učinkovitijom slikom.

2. Korištenje varijabli okruženja

Varijable okruženja su moćan način za konfiguriranje vaše aplikacije bez mijenjanja koda. Možete definirati varijable okruženja u vašoj docker-compose.yml datoteci ili ih proslijediti prilikom pokretanja pomoću zastavice -e.

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

Unutar vaše aplikacije, možete pristupiti ovim varijablama okruženja koristeći process.env.

const apiUrl = process.env.API_URL;

3. Montiranje volumena za razvoj

Montiranje volumena (kao što je prikazano u primjeru s Docker Compose) ključno je za razvoj jer vam omogućuje da unosite promjene u svoj kod na glavnom računalu i da se one odmah odraze unutar spremnika. To eliminira potrebu za ponovnom izgradnjom slike svaki put kada napravite promjenu.

4. Ispravljanje pogrešaka (Debugging) s VS Code-om

VS Code ima izvrsnu podršku za ispravljanje pogrešaka Node.js aplikacija koje se izvode unutar Docker spremnika. Možete koristiti VS Code Docker ekstenziju da se priključite na pokrenuti spremnik i postavite prijelomne točke, pregledavate varijable i prolazite kroz svoj kod korak po korak.

Prvo, instalirajte Docker ekstenziju u VS Code. Zatim, stvorite launch.json datoteku u vašem .vscode direktoriju sa sljedećom konfiguracijom:

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

Provjerite je li vaša Node.js aplikacija pokrenuta sa zastavicom --inspect ili --inspect-brk. Na primjer, možete izmijeniti svoju docker-compose.yml datoteku da uključuje ovu zastavicu:

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

Zatim, u VS Codeu, odaberite "Attach to Docker" konfiguraciju i započnite ispravljanje pogrešaka. Moći ćete postavljati prijelomne točke i ispravljati pogreške u svom kodu koji se izvodi unutar spremnika.

5. Korištenje privatnog npm registra

Ako radite na projektu s privatnim npm paketima, morat ćete konfigurirati svoj Docker spremnik za autentifikaciju s vašim privatnim npm registrom. To se može učiniti postavljanjem varijable okruženja NPM_TOKEN u vašoj docker-compose.yml datoteci ili stvaranjem .npmrc datoteke u vašem projektnom direktoriju i kopiranjem u spremnik.

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

.npmrc datoteka treba sadržavati vaš autentifikacijski token:

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

Ne zaboravite zamijeniti YOUR_NPM_TOKEN sa svojim stvarnim npm tokenom. Čuvajte ovaj token sigurnim i nemojte ga dodavati u svoj javni repozitorij.

6. Optimiziranje veličine slike

Održavanje male veličine Docker slike važno je za brže vrijeme izgradnje i implementacije. Evo nekoliko savjeta za optimizaciju veličine slike:

• Koristite laganu osnovnu sliku, kao što je node:alpine.
• Koristite višefazne izgradnje za odvajanje okruženja za izgradnju od okruženja za izvođenje.
• Uklonite nepotrebne datoteke i direktorije iz slike.
• Koristite .dockerignore datoteku za izuzimanje datoteka i direktorija iz konteksta izgradnje.
• Kombinirajte više RUN naredbi u jednu naredbu kako biste smanjili broj slojeva.

Primjer: Dockerizacija React aplikacije

Ilustrirajmo ove koncepte praktičnim primjerom: Dockerizacija React aplikacije stvorene s Create React App.

Prvo, stvorite novu React aplikaciju pomoću Create React App:

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

Zatim, stvorite Dockerfile u korijenskom direktoriju projekta:

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;"]

Stvorite docker-compose.yml datoteku:

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

Napomena: Mapiramo port 3000 na glavnom računalu na port 80 unutar spremnika jer Nginx poslužuje aplikaciju na portu 80. Možda ćete morati prilagoditi mapiranje portova ovisno o konfiguraciji vaše aplikacije.

Konačno, pokrenite docker-compose up da biste izgradili i pokrenuli aplikaciju. Zatim možete pristupiti aplikaciji navigacijom na localhost:3000 u svom pregledniku.

Uobičajeni problemi i rješavanje problema

Čak i uz pažljivu konfiguraciju, možete naići na probleme pri radu s Dockerom. Evo nekih uobičajenih problema i njihovih rješenja:

• Sukobi portova: Provjerite da portovi koje mapirate u vašoj docker-compose.yml ili docker run naredbi nisu već u upotrebi od strane drugih aplikacija na vašem glavnom računalu.
• Problemi s montiranjem volumena: Provjerite dozvole na datotekama i direktorijima koje montirate. Docker možda nema potrebne dozvole za pristup datotekama.
• Neuspješne izgradnje slika: Pažljivo pregledajte izlaz naredbe docker build za pogreške. Uobičajeni uzroci uključuju netočnu sintaksu Dockerfile datoteke, nedostajuće ovisnosti ili mrežne probleme.
• Rušenje spremnika: Koristite naredbu docker logs da biste pregledali zapisnike vašeg spremnika i identificirali uzrok rušenja. Uobičajeni uzroci uključuju pogreške u aplikaciji, nedostajuće varijable okruženja ili ograničenja resursa.
• Sporo vrijeme izgradnje: Optimizirajte svoj Dockerfile korištenjem višefaznih izgradnji, keširanjem ovisnosti i minimiziranjem broja slojeva.

Zaključak

Docker pruža moćno i svestrano rješenje za stvaranje dosljednih i ponovljivih JavaScript razvojnih okruženja. Korištenjem Dockera možete eliminirati probleme s kompatibilnošću, pojednostaviti implementaciju i osigurati da svi u vašem timu rade s istim okruženjem.

Ovaj vodič je pokrio osnove postavljanja Dockeriziranog JavaScript razvojnog okruženja, kao i neke napredne opcije konfiguracije. Slijedeći ove korake, možete stvoriti robusno i učinkovito radno okruženje za svoje JavaScript projekte, bez obzira na njihovu složenost ili veličinu vašeg tima. Prihvatite Docker i otključajte puni potencijal svog procesa razvoja JavaScripta.

Sljedeći koraci:

• Istražite Docker Hub za gotove slike koje odgovaraju vašim specifičnim potrebama.
• Zaronite dublje u Docker Compose za upravljanje aplikacijama s više spremnika.
• Naučite o Docker Swarmu i Kubernetesu za orkestraciju Docker spremnika u produkcijskim okruženjima.

Uključivanjem ovih najboljih praksi u svoj tijek rada, možete stvoriti učinkovitije, pouzdanije i skalabilnije razvojno okruženje za svoje JavaScript aplikacije, osiguravajući uspjeh na današnjem konkurentnom tržištu.