A projektjeinek a Dockerrel történő tárolása leegyszerűsíti a fejlesztési élményt és megkönnyíti az egyszerű telepítést a felhő környezetekbe. Nézzük meg, hogyan csomagolhatunk egy React webhelyet Docker konténerként.
Ez a cikk azokra a projektekre összpontosít, amelyeket rendszerindítással indítottak create-react-app (CRA). Ha kilökte a CRA konfigurációját, vagy egyéni összeállítási folyamatot használ, akkor módosítania kell a npm run build parancsot ennek megfelelően.
A Docker képek a Dockerfile. Ez meghatározza a használandó alapképet, például az Apache webszervert. Ezután felsorol egy sor parancsot, amelyek csomagokat adnak hozzá, alkalmazzák a konfigurációs módosításokat, és az alkalmazáshoz szükséges fájlokba másolják őket.
Követelményeink meghatározása
A CRA tartalmaz egy beépített élő beépítési és újratöltési rendszert, amelyen keresztül hozzáférhet npm run start. Ez lehetővé teszi, hogy a fejlesztés során gyorsan iteráljon a webhelyén.
A gyártáshoz való áttéréskor a statikus erőforrásokat kell felhasználnia npm run build. Ez minimalizált HTML-, CSS- és JavaScript-csomagokat hoz létre a build Könyvtár. Ezeket a fájlokat tölti fel a webszerverre.
A Dockerising alapvető megközelítése az lehet npm run build helyileg. Ezután átmásolja a build könyvtárat a Docker képbe – egy webkiszolgáló alapkép segítségével – és hívja naponta.
Ez a megközelítés nem skálázható jól, különösen akkor, ha a Docker képet CI környezetben készíti el. Az alkalmazás építési folyamata nincs teljesen beillesztve a tároló összeállításába, mivel a külsőtől függ npm run build parancs. Most egy teljesebb példát folytatunk, ahol a teljes rutin a Docker-en belül fut.
Dockerfájl a CRA számára
FROM node:latest AS build WORKDIR /build COPY package.json package.json COPY package-lock.json package-lock.json RUN npm ci COPY public/ public COPY src/ src RUN npm run build FROM httpd:alpine WORKDIR /var/www/html COPY --from=build /build/build/ .
Ez Dockerfile mindent tartalmaz, ami szükséges a projekt teljes konténerezéséhez. Docker-t használja többlépcsős építések először futtassa a React buildet, majd másolja a kimenetet egy alpine Apache szervertároló. Ez biztosítja, hogy a végső kép a lehető legkisebb legyen.
A fájl első szakasza meghatározza a készítés szakaszát. A hivatalos Node.js alapképet használja. Az package.json és package-lock.json fájlokat másolja be. npm ci ezután a projekt npm csomagjainak telepítésére szolgál. ci helyett install mert pontos egyezést kényszerít a package-lock.json.
A függőségek telepítése után a public és src a könyvtárakat a tárolóba másolja. A mappák a npm ci parancsot, mert valószínűleg sokkal gyakrabban változnak, mint a függőségek. Ez biztosítja, hogy a felépítés teljes mértékben kihasználhatja a Docker réteg-gyorsítótárának előnyeit – ami potenciálisan drága npm ci parancs csak a package.json vagy package-lock.json fájlok változnak.
Az utolsó lépés ebben az összeállítási szakaszban a npm run build. A CRA összeállítja a React alkalmazást, és a kimenetét a build Könyvtár.
A. Második szakasza Dockerfile sokkal egyszerűbb. Az httpd:alpine alapkép van kiválasztva. Körülbelül 5 MB-os súlyú képként tartalmazza az Apache webkiszolgálót. A lefordított HTML, CSS és JavaScript másolásra kerül a build szakasz tárolójából és a végső képbe.
A Docker Image használata
Használja a docker build parancs a kép elkészítéséhez:
docker build -t my-react-app:latest .
Ez felépíti a képet és címkézi my-react-app:latest. Használja a Dockerfile megtalálható a munkakönyvtárban (megadva .).
A felépítés néhány percet igénybe vehet. A későbbi összeállítások gyorsabbak lesznek, mivel az olyan rétegek, mint a npm ci a parancs futtatás közben tárolódik.
Miután elkészült a kép, készen áll a használatára:
docker run -d -p 8080:80 my-react-app:latest
A Docker új tárolót hoz létre a my-react-app:latest kép. A gazdagép (a gép) 8080-as portja a tároló 80-as portjához van kötve. Ez azt jelenti, hogy meglátogathatja http://localhost:8080 a böngészőben, hogy lássa a React projektet! Az -d zászló van, így a konténer a háttérben fut.
Átváltás az NGINX-re
A fenti példa Apache-t használ, de könnyedén átválthat az NGINX-re.
FROM nginx:alpine COPY --from=build /build/build/ /usr/share/nginx/html
Hasonló módon átvehet alternatív webszervereket is; mivel a CRA teljesen statikus kimenetet produkál, nagy rugalmassággal választhatja ki, hogyan tárolja webhelyét. Másolja a /build/build könyvtár a build lépés a kiválasztott kiszolgálószoftver alapértelmezett HTML könyvtárába.
A megközelítés előnyei
A Docker segítségével nemcsak a végső összeállítást foglalja magába, hanem magát az összeállítást is létrehozza, így a projekt teljes körűen hordozhatóvá válik környezetekben. A fejlesztőknek csak a Docker telepítésére van szükség a React webhely felépítéséhez és futtatásához.
Reálisabban: ez a kép készen áll a CI-kiszolgálóval történő használatra a képek automatizált elkészítéséhez. Amíg rendelkezésre áll egy Docker-környezet, kézi beavatkozás nélkül konvertálhatja a forráskódot telepíthető képpé.
Többlépcsős összeállítások használatával a végső kép korszerű marad, és csak néhány megabájt méretű lehet. Sokkal nagyobb node kép csak az összeállítás szakaszában használatos, ahol a Node és az npm szükségesek.
