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.