A React App dokkolása – CloudSavvy IT

Avatar admin | 2021.02.09. 9 Views 0 Likes 0 Ratings

9 Views 0 Ratings Rate it

A Docker és a React logók grafikája

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.


Source link


9 Views 0 Ratings Rate it

  • Minden jog fenntartva 2019-2020. Hogyankészítsek.Hu Impresszum Adatkezelési szabályok