Node.js a npm v Dockeru – Kompilace Webpack, Gulp a Grunt
Docker se stává nedílnou součásti dev stacku každého vývojáře a vývoj frontendu není výjimkou. Díky Dockeru jsme schopni nakonfigurovat (nejen) vývojový server na míru danému projektu. Docker pracuje s tzv. containery, které si můžeme dle libosti nakonfigurovat. Můžeme nastavit, na jaké verzi PHP projekt poběží, jaké rozšíření budou k dispozici, verze jednotlivých balíčků apod. Hlavní výhodou potom je, že když k projektu přijde jiný vývojář a spustí si tyto Docker containery, bude mít vše nakonfigurováno úplně stejně, jako všichni ostatní a předejdeme tak spoustě problémům.
Proč použít Docker pro vývoj frontendu
S nárůstem technologií a možností, které můžeme pro vývoj webových aplikací použit, se v praxi stává, že každý projekt už v podstatě vyžaduje úplně jinou konfiguraci, jiné balíčky a jiný dev-stack – celkově se vše tříští. V rámci týmů kodéru se pak setkáváme se situacemi, kdy například některé npm balíčky vyžadují starší verzi Node.js, než má kodér nainstalovanou, jiný projekt zase vyžaduje verzi novější. Jeden projekt se kompiluje v Gruntu, jiný v Gulpu a třetí běží díky Webpacku. Je samozřejmě nereálné, aby při přepínání mezi projekty musel vývojář verze všech těchto balíčků přeinstalovávat podle daného projektu.
Tím, že začneme i pro vývoj frontendu používat Docker prostředí, nemůže se stát, že by vývojář neměl něco potřebného nainstalováno nebo měl jinou verzi nějakého balíčku a projekt mu pak nešel spustit.
Nastavení Dockerfile s node image
- Pro konfiguraci vlastního prostředí budeme vycházet z veřejně dostupného Node.js image, v našem případě to je nyní verze 14.
- Nastavíme si jako pracovní prostor v rámci containeru složku /home/node/app (stejnou cestu bude pak potřeba nastavit v rámci docker-compose.yml).
- Nainstalujeme npm ve verzi 7.
- Pro ukázku zde nainstalujeme Gulp, Grunt and Webpack cli. Samozřejmě nemusíte instalovat vše, vyberte si to, co na projektu reálně použijete. Případně vyspecifikujte verzi, kterou budete potřebovat nebo použijte lokální instalaci podle package.json.
Konfigurace docker-compose.yml
Pokud na projektu používáme více Docker containerů, určitě budeme potřebovat připravit soubor docker-compose.yml, kde můžeme jednotlivé containery konfigurovat.
- Tou konfigurací pojmenujeme náš container jako frontend.
- Nastavíme port, na kterém bude poté projekt dostupný – zde používáme port 3000
- Po provedení buildu containeru (dle našeho Dockerfile) proběhne spuštění příkazů „npm i“ a „npm start„
- Tím se nainstalují všechny npm balíčky dle package.json a vytvoří se složka node_modules
- Na příkaz npm start můžeme navázat (v rámci sekce scripts v souboru package.json) například spuštění dev-serveru, watcher, automatickou kompilaci souborů atd.
Finální adresářová struktura
Ve výsledku může náš projekt mít například takovouto adresářovou strukturu:
Spuštění vývojového prostředí v rámci Dockeru
Jakmile máme vše nakonfigurováno, stačí nám z rootu projektu nahodit Docker pomocí příkazu $ docker-compose up. Při prvním spuštění dojde automaticky k buildu containeru dle konfigurace v Dockerfile a instalaci node_modules. Další spuštění je už rychlejší bez buildu a instalace balíčků.