JavaScript razvojno okolje: Konfiguracija Docker vsebnika

V današnjem hitrem okolju razvoja programske opreme je vzdrževanje doslednega in ponovljivega razvojnega okolja ključnega pomena. Različni operacijski sistemi, različne različice programske opreme in konfliktne odvisnosti lahko privedejo do strašnega sindroma "deluje na mojem računalniku". Docker, vodilna platforma za kontejnerizacijo, ponuja zmogljivo rešitev za to težavo, ki razvijalcem omogoča, da zapakirajo svojo aplikacijo in njene odvisnosti v eno samo, izolirano enoto.

Ta vodnik vas bo vodil skozi postopek nastavitve robustnega in doslednega JavaScript razvojnega okolja z uporabo Docker vsebnikov. Pokrili bomo vse od osnovne nastavitve do naprednih konfiguracij, kar bo zagotovilo nemoten in učinkovit potek dela za vaše JavaScript projekte, ne glede na raznolikost operacijskih sistemov vaše ekipe.

Zakaj uporabljati Docker za JavaScript razvoj?

Preden se potopimo v podrobnosti, si oglejmo prednosti uporabe Dockerja za vaše JavaScript razvojno okolje:

• Doslednost: Docker zagotavlja, da vsi v vaši ekipi delajo z natančno enakim okoljem, kar odpravlja težave z združljivostjo in zmanjšuje verjetnost napak, ki jih povzročajo razlike v okolju. To je še posebej pomembno za geografsko razpršene ekipe.
• Izolacija: Vsebnik zagotavlja izolacijo od gostiteljskega sistema, preprečuje konflikte z drugimi projekti in zagotavlja, da se vaše odvisnosti ne motijo med seboj.
• Ponovljivost: Docker slike je mogoče enostavno deliti in uvajati, kar olajša ponovitev vašega razvojnega okolja na različnih računalnikih ali v proizvodnji. To je še posebej koristno pri uvajanju novih članov ekipe ali uvajanju v različne ponudnike oblakov.
• Prenosljivost: Docker vsebnik lahko deluje na kateri koli platformi, ki podpira Docker, vključno z Windows, macOS in Linux, kar razvijalcem omogoča uporabo želenega operacijskega sistema, ne da bi to vplivalo na projekt.
• Poenostavljena uvedba: Ista Docker slika, ki se uporablja za razvoj, se lahko uporablja za testiranje in proizvodnjo, kar poenostavlja postopek uvajanja in zmanjšuje tveganje napak.

Predpogoji

Preden začnete, se prepričajte, da imate nameščeno naslednje:

• Docker: Prenesite in namestite Docker Desktop za svoj operacijski sistem s spletne strani Docker (docker.com). Docker Desktop vključuje Docker Engine, Docker CLI, Docker Compose in druga bistvena orodja.
• Node.js in npm (neobvezno): Čeprav znotraj vašega gostiteljskega računalnika nista strogo potrebna, ker bosta vsebovana v vsebniku, je lahko lokalno nameščen Node.js in npm koristen za opravila zunaj vsebnikov ali pri nastavitvi začetne strukture projekta. Lahko ju prenesete s strani nodejs.org.
• Urejevalnik kode: Izberite želeni urejevalnik kode (npr. VS Code, Sublime Text, Atom). VS Code ima odlične razširitve za Docker, ki lahko poenostavijo vaš potek dela.

Osnovna konfiguracija Dockerfile

Temelj vsakega okolja, ki temelji na Dockerju, je Dockerfile. Ta datoteka vsebuje navodila za izgradnjo vaše Docker slike. Ustvarimo osnovno Dockerfile za aplikacijo Node.js:

# Uporabi uradno izvajalno okolje Node.js kot nadrejeno sliko
FROM node:18-alpine

# Nastavi delovni imenik v vsebniku
WORKDIR /app

# Kopiraj package.json in package-lock.json v delovni imenik
COPY package*.json ./

# Namesti odvisnosti aplikacije
RUN npm install

# Kopiraj izvorno kodo aplikacije v delovni imenik
COPY . .	

# Razkrij vrata 3000 zunanjemu svetu (prilagodite, če vaša aplikacija uporablja drugačna vrata)
EXPOSE 3000

# Določi ukaz, ki se izvede ob zagonu vsebnikov
CMD ["npm", "start"]

Razčlenimo vsako vrstico:

• FROM node:18-alpine: Določa osnovno sliko za vsebnik. V tem primeru uporabljamo uradno sliko Node.js 18 Alpine, ki je lahka distribucija Linuxa. Alpine je znan po svoji majhnosti, kar pomaga ohranjati vašo Docker sliko vitko. Razmislite o drugih različicah Node.js, ki so primerne za vaš projekt.
• WORKDIR /app: Nastavi delovni imenik v vsebniku na /app. Tukaj bo prebivala vaša koda aplikacije.
• COPY package*.json ./: Kopira datoteke package.json in package-lock.json (ali yarn.lock, če uporabljate Yarn) v delovni imenik. Kopiranje teh datotek najprej omogoča Dockerju, da predpomni korak npm install, kar bistveno pospeši čas izgradnje, ko spremenite samo kodo aplikacije.
• RUN npm install: Namesti odvisnosti aplikacije, definirane v package.json.
• COPY . .: Kopira vse preostale datoteke in imenike iz vašega lokalnega projektnega imenika v delovni imenik v vsebniku.
• EXPOSE 3000: Razkrije vrata 3000, zaradi česar so dostopna iz gostiteljskega računalnika. To je pomembno, če vaša aplikacija posluša na teh vratih. Prilagodite številko vrat, če vaša aplikacija uporablja drugačna vrata.
• CMD ["npm", "start"]: Določa ukaz, ki se izvede ob zagonu vsebnikov. V tem primeru uporabljamo npm start, ki je pogost ukaz za zagon aplikacij Node.js. Prepričajte se, da se ta ukaz ujema z ukazom, ki je definiran v razdelku scripts vaše datoteke package.json.

Izgradnja Docker slike

Ko ustvarite svojo Dockerfile, lahko izgradite Docker sliko z naslednjim ukazom:

docker build -t my-node-app .

Kjer:

• docker build: Ukaz Docker za izgradnjo slik.
• -t my-node-app: Določa oznako (ime) za sliko. Izberite opisno ime za svojo aplikacijo.
• .: Določa kontekst izgradnje, ki je trenutni imenik. Docker bo uporabil Dockerfile v tem imeniku za izgradnjo slike.

Docker bo nato izvedel navodila v vaši Dockerfile, pri čemer bo sliko gradil plast za plastjo. Prvič, ko zgradite sliko, bo morda trajalo nekaj časa, da prenesete osnovno sliko in namestite odvisnosti. Vendar bodo naslednje gradnje veliko hitrejše, ker Docker predpomni vmesne plasti.

Zagon Docker vsebnika

Ko je slika zgrajena, lahko iz nje zaženete vsebnik z naslednjim ukazom:

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

Kjer:

• docker run: Ukaz Docker za zagon vsebnikov.
• -p 3000:3000: Preslika vrata 3000 na gostiteljskem računalniku na vrata 3000 v vsebniku. To vam omogoča dostop do vaše aplikacije iz vašega brskalnika z uporabo localhost:3000. Prva številka so vrata gostitelja, druga številka pa vrata vsebnikov.
• my-node-app: Ime slike, ki jo želite zagnati.

Vaša aplikacija bi morala zdaj delovati v Docker vsebniku. Do nje lahko dostopate tako, da odprete svoj brskalnik in se pomaknete na localhost:3000 (ali vrata, ki ste jih določili). Morali bi videti uvodni zaslon ali začetni uporabniški vmesnik vaše aplikacije.

Uporaba Docker Compose

Za bolj zapletene aplikacije z več storitvami je Docker Compose neprecenljivo orodje. Omogoča vam definiranje in upravljanje aplikacij z več vsebnikov z uporabo datoteke YAML. Ustvarimo datoteko docker-compose.yml za našo aplikacijo Node.js:

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

Oglejmo si vsak odsek:

• version: "3.9": Določa različico formata datoteke Docker Compose.
• services: Določa storitve, ki sestavljajo vašo aplikacijo. V tem primeru imamo eno samo storitev, imenovano app.
• build: .: Določa, da je treba sliko zgraditi iz Dockerfile v trenutnem imeniku.
• ports: - "3000:3000": Preslika vrata 3000 na gostiteljskem računalniku na vrata 3000 v vsebniku, podobno kot ukaz docker run.
• volumes: - .:/app: Ustvari nosilec, ki priključi trenutni imenik na vašem gostiteljskem računalniku v imenik /app v vsebniku. To vam omogoča, da spreminjate kodo na gostiteljskem računalniku in se te spremembe samodejno odražajo v vsebniku, kar omogoča vroče ponovno nalaganje.
• environment: NODE_ENV: development: Nastavi spremenljivko okolja NODE_ENV v vsebniku na development. To je uporabno za konfiguriranje vaše aplikacije za zagon v razvojnem načinu.
• command: npm run dev: Prepiše privzeti ukaz, definiran v Dockerfile. V tem primeru uporabljamo npm run dev, ki se pogosto uporablja za zagon razvojnega strežnika z vročim ponovnim nalaganjem.

Če želite zagnati aplikacijo z uporabo Docker Compose, se pomaknite v imenik, ki vsebuje datoteko docker-compose.yml, in zaženite naslednji ukaz:

docker-compose up

Docker Compose bo zgradil sliko (če je potrebno) in zagnal vsebnik. Zastavico -d lahko dodate za zagon vsebnikov v ločenem načinu (v ozadju).

Napredne možnosti konfiguracije

Tukaj je nekaj naprednih možnosti konfiguracije za izboljšanje vašega Dockeriziranega JavaScript razvojnega okolja:

1. Večstopenjske gradnje

Večstopenjske gradnje vam omogočajo uporabo več navodil FROM v vaši Dockerfile, pri čemer vsako predstavlja drugačno stopnjo gradnje. To je uporabno za zmanjšanje velikosti vaše končne slike, tako da ločite gradbeno okolje od izvajalnega okolja.

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

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

V tem primeru prva faza (builder) zgradi aplikacijo z uporabo Node.js. Druga faza uporablja Nginx za strežbo zgrajenih datotek aplikacije. Samo zgrajene datoteke iz prve faze se kopirajo v drugo fazo, kar ima za posledico manjšo in učinkovitejšo sliko.

2. Uporaba spremenljivk okolja

Spremenljivke okolja so zmogljiv način za konfiguriranje vaše aplikacije brez spreminjanja kode. Spremenljivke okolja lahko definirate v svoji datoteki docker-compose.yml ali jih posredujete ob času izvajanja z uporabo zastavice -e.

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

Znotraj vaše aplikacije lahko do teh spremenljivk okolja dostopate z uporabo process.env.

const apiUrl = process.env.API_URL;

3. Montaža nosilcev za razvoj

Montaža nosilcev (kot je prikazano v primeru Docker Compose) je ključnega pomena za razvoj, ker vam omogoča, da spreminjate kodo na gostiteljskem računalniku in se te spremembe takoj odražajo v vsebniku. To odpravlja potrebo po ponovni izgradnji slike vsakič, ko naredite spremembo.

4. Razhroščevanje z VS Code

VS Code ima odlično podporo za razhroščevanje aplikacij Node.js, ki delujejo v Docker vsebnikih. Uporabite lahko razširitev VS Code Docker, da se povežete z delujočim vsebnikom in nastavite prelomne točke, pregledate spremenljivke in se premikate po kodi.

Najprej namestite razširitev Docker v VS Code. Nato ustvarite datoteko launch.json v svojem imeniku .vscode z naslednjo konfiguracijo:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Poveži se z Dockerjem",
      "port": 9229,
      "address": "localhost",
      "remoteRoot": "/app",
      "localRoot": "${workspaceFolder}"
    }
  ]
}

Prepričajte se, da se vaša aplikacija Node.js zažene z zastavico --inspect ali --inspect-brk. Na primer, lahko spremenite svojo datoteko docker-compose.yml, da vključite to zastavico:

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

Nato v VS Code izberite konfiguracijo "Poveži se z Dockerjem" in začnite razhroščevati. Lahko boste nastavili prelomne točke in razhroščevali svojo kodo, ki deluje v vsebniku.

5. Uporaba zasebnega registra npm

Če delate na projektu z zasebnimi paketi npm, morate konfigurirati svoj Docker vsebnik za preverjanje pristnosti z vašim zasebnim registrom npm. To lahko storite tako, da nastavite spremenljivko okolja NPM_TOKEN v svoji datoteki docker-compose.yml ali ustvarite datoteko .npmrc v svojem projektnem imeniku in jo kopirate v vsebnik.

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

Datoteka `.npmrc` mora vsebovati vaš žeton za preverjanje pristnosti:

//registry.npmjs.org/:_authToken=VAŠ_ŽETON_NPM

Ne pozabite zamenjati VAŠ_ŽETON_NPM s svojim dejanskim žetonom npm. Naj bo ta žeton varen in ga ne shranjujte v svoje javno repozitorij.

6. Optimizacija velikosti slike

Ohranjanje majhne velikosti vaše Docker slike je pomembno za hitrejše čase gradnje in uvajanja. Tukaj je nekaj nasvetov za optimizacijo velikosti slike:

• Uporabite lahko osnovno sliko, kot je node:alpine.
• Uporabite večstopenjske gradnje za ločevanje gradbenega okolja od izvajalnega okolja.
• Odstranite nepotrebne datoteke in imenike iz slike.
• Uporabite datoteko .dockerignore za izključitev datotek in imenikov iz konteksta gradnje.
• Združite več ukazov RUN v en sam ukaz, da zmanjšate število plasti.

Primer: Dockerizacija aplikacije React

Ponazorimo te koncepte s praktičnim primerom: Dockerizacija aplikacije React, ustvarjene s Create React App.

Najprej ustvarite novo aplikacijo React z uporabo Create React App:

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

Nato ustvarite Dockerfile v korenskem imeniku 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;"]

Ustvarite datoteko docker-compose.yml:

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

Opomba: Preslikujemo vrata 3000 na gostitelju na vrata 80 v vsebniku, ker Nginx streže aplikacijo na vratih 80. Morda boste morali prilagoditi preslikavo vrat glede na konfiguracijo vaše aplikacije.

Nazadnje zaženite docker-compose up za izgradnjo in zagon aplikacije. Do aplikacije lahko nato dostopate tako, da se v brskalniku pomaknete na localhost:3000.

Pogoste težave in odpravljanje napak

Tudi z natančno konfiguracijo lahko naletite na težave pri delu z Dockerjem. Tukaj je nekaj pogostih težav in njihovih rešitev:

• Konflikti vrat: Prepričajte se, da vrata, ki jih preslikujete v svojem ukazu docker-compose.yml ali docker run, že ne uporablja katera druga aplikacija na vašem gostiteljskem računalniku.
• Težave z montažo nosilcev: Preverite dovoljenja za datoteke in imenike, ki jih montirate. Docker morda nima potrebnih dovoljenj za dostop do datotek.
• Neuspešna gradnja slike: Pozorno preglejte izhod ukaza docker build za napake. Pogosti vzroki vključujejo napačno sintakso Dockerfile, manjkajoče odvisnosti ali težave z omrežjem.
• Sesutje vsebnikov: Uporabite ukaz docker logs za ogled dnevnikov vašega vsebnikov in ugotovite vzrok sesutja. Pogosti vzroki vključujejo napake aplikacije, manjkajoče spremenljivke okolja ali omejitve virov.
• Počasni časi gradnje: Optimizirajte svojo Dockerfile z uporabo večstopenjskih gradenj, predpomnjenjem odvisnosti in zmanjšanjem števila plasti.

Zaključek

Docker ponuja zmogljivo in vsestransko rešitev za ustvarjanje doslednih in ponovljivih JavaScript razvojnih okolij. Z uporabo Dockerja lahko odpravite težave z združljivostjo, poenostavite uvedbo in zagotovite, da vsi v vaši ekipi delajo z enakim okoljem.

Ta vodnik je zajemal osnove nastavitve Dockeriziranega JavaScript razvojnega okolja, pa tudi nekaj naprednih možnosti konfiguracije. Z upoštevanjem teh korakov lahko ustvarite robusten in učinkovit potek dela za svoje JavaScript projekte, ne glede na njihovo zapletenost ali velikost vaše ekipe. Sprejmite Docker in sprostite polni potencial svojega procesa razvoja JavaScript.

Naslednji koraki:

• Raziščite Docker Hub za vnaprej izdelane slike, ki ustrezajo vašim posebnim potrebam.
• Poglobite se v Docker Compose za upravljanje aplikacij z več vsebnikov.
• Naučite se o Docker Swarm in Kubernetes za orkestracijo Docker vsebnikov v proizvodnih okoljih.

Z vključitvijo teh najboljših praks v svoj potek dela lahko ustvarite učinkovitejše, zanesljivejše in razširljivejše razvojno okolje za svoje aplikacije JavaScript, kar zagotavlja uspeh na današnjem konkurenčnem trgu.