Využijte Docker s tímto výukovým řešením MERN Stack

Hledáte při vývoji aplikace způsob, jak zajistit, aby byla vaše aplikace MERN kompatibilní se všemi počítači? Jste na správném místě! Dockerizujte svou aplikaci a tento tutoriál MERN stack je přesně to, co potřebujete.

V tomto tutoriálu se naučíte základy dockerizace zásobníku MERN, jak to funguje a jak jej implementovat v různých aplikacích.

Čtěte dále a vyřešte problémy s kompatibilitou dockerizací vaší aplikace!

Předpoklady

Tento tutoriál bude praktickou ukázkou. Pokud je chcete sledovat, ujistěte se, že máte:

• Nainstalován Docker Desktop 4.5.0+.

• Nainstalován uzel 16.0+.

• Operační systém podporovaný Dockerem – Tento výukový program používá Windows 10.

• Virtualizace povolena a linuxové jádro nainstalováno (pro Windows).

• Služba testování API (Postman).

Nastavení Dockeru

Docker je softwarová platforma, která urychluje vytváření, testování, nasazování a správu aplikací. Docker používá kontejner k uložení všech závislostí a konfigurací operačního systému nezbytných pro běh aplikací v jakémkoli prostředí.

Před dockerizací zásobníku MERN musíte nejprve vytvořit vlastní bitovou kopii uzlu pomocí souboru Docker.

1. Otevřete aplikaci Docker a zkontrolujte, zda se Docker úspěšně spustil. Níže můžete zjistit, že Docker engine běží, protože stavový řádek (vlevo dole) je zelený.

2. Dále vytvořte složku projektu s názvem MERN-Docker . Tato složka bude obsahovat všechny zdroje pro tento výukový program.

3. Vytvořte .js soubor s vaším preferovaným editorem kódu ve složce projektu (MERN-Docker ). Soubor můžete pojmenovat, jak chcete, ale soubor se jmenuje server.js v tomto tutoriálu. server.js soubor bude obsahovat všechny kódy pro aplikaci uzlu.

4. Otevřete svůj terminál a spusťte následující příkaz npm pro inicializaci aplikace (init –y) a vytvořte package.json soubor.

npm init --y

5. Nakonec spusťte níže uvedený příkaz a nainstalujte express závislost, což vám umožňuje vytvářet rozhraní API pro vaši aplikaci uzlu.

npm i express

Nastavení expresního serveru

Po inicializaci aplikace MERN a instalaci expresní závislosti nastavíte jednoduchý expresní server. Tento výukový program používá jednoduchý expresní server k demonstraci toho, jak lze ukotvit aplikace Express a Node.

1. Otevřete soubor server.js a vytvořte expresní GET směrovat do / .

Níže uvedený kód odešle uvítací zprávu, když je odeslán požadavek GET na http://localhost:5000 .

//Importing and creating an instance of express
const express = require("express");
const app = express();

//Setting PORT to 5000 if PORT is not listed in environmental variables.
const PORT = process.env.PORT || 5000;

// Creating the `GET` route
app.get("/", (req, res) => {
  res.send("<h2>Welcome Friends</h2>");
});

//Starting the express server
app.listen(PORT, () =>
  console.log(`Server running at http://localhost:${PORT}`)
);

2. Nyní spusťte příkaz node níže a spusťte expresní aplikaci.

node server.js

Pokud aplikace běží správně, uvidíte výstup níže.

3. Nakonec proveďte požadavek GET na http://localhost:5000 pomocí testovací služby API, jako je Postman, k testování expresní cesty.

Vytvoření a vytvoření vlastního obrázku v tomto výukovém programu Mern Stack

Po nastavení trasy je dalším krokem integrace expresní aplikace do kontejneru Docker pomocí základního obrazu. V tomto tutoriálu použijete k nastavení kontejneru oficiální základní obrázek uzlu.

1. Vytvořte soubor s názvem Dockerfile a naplňte následující kód, který vytvoří vlastní bitovou kopii uzlu pro vaši aplikaci. Přizpůsobený obrázek vám umožňuje přidat k obrázku váš zdrojový kód a konfigurace pro váš obrázek.

# Sets the base image of the application to the node’s official image.
FROM node:17

# Sets the Working Directory as "/server"
WORKDIR /server
# Copies the package.json file into "/server" and runs npm i
COPY package.json /server
RUN npm i
# Copies the entire source code into "/server"
COPY . /server

# Specifies the port the node app will be running on
EXPOSE 5000

# Runs "node server.js" after the above step is completed
CMD ["node", "server.js"]

2. Spusťte níže uvedený příkaz docker build a vytvořte přizpůsobený obraz s názvem (-t) node-image v pracovním adresáři (.).

docker build -t node-image .

Níže uvedený výstup ukazuje, jak Docker používá Dockerfile k vytvoření obrazu.

3. Nakonec spusťte níže uvedený příkaz docker image a vypište (ls) všechny vytvořené obrazy.

docker image ls

Níže vidíte všechny dostupné obrázky, včetně obrázku uzlu, který jste vytvořili.

Nastavení nodemonu

Úspěšně jste vytvořili vlastní obrázek uzlu, a to je skvělé. Ale budete potřebovat pomoc s vývojem vaší aplikace, když dojde ke změnám, a to je místo, kde přichází na řadu přidání nodemona.

nodemon automaticky restartuje aplikaci, když jsou zjištěny změny souboru. Nejprve jej však budete muset nainstalovat.

1. Spusťte npm příkaz níže k instalaci nodemon jako závislost pro vývojáře (--save-dev ).

npm i nodemon --save-dev

2. Dále otevřete package.json soubor ve vašem preferovaném editoru kódu a přidejte konfiguraci níže.

"scripts": {
    "start": "node server.js",
    "dev": "nodemon -L server.js"
},

3. Otevřete Dockerfile a změňte CMD příkaz k níže uvedenému.

CMD ["npm", "run", "dev"]

4. Nakonec spusťte níže uvedený docker build příkaz k opětovnému sestavení obrázku (node-image ).

docker build -t node-image .

Níže můžete vidět, že Docker načetl data uložená v mezipaměti pouze ve druhém kroku a spustil příkaz od třetího do posledního kroku. Toto chování vyplývá ze změn, které jste provedli v souboru package.json soubor (mezipaměť Docker).

Urychlení tvorby Dockeru vyloučením souborů a složek

Možná chcete urychlit vytváření Dockeru a chránit citlivý obsah. Pokud ano, vytvořte .dockerignore soubor, kde určíte soubory a složky, které se mají ignorovat před zkopírováním do vašeho kontejneru Docker.

1. Vytvořte soubor s názvem .dockerignore pomocí textového editoru a seznam souborů, jak je uvedeno níže, které chcete vyloučit z kopírování do kontejneru Docker.

node_modules
Dockerfile
.dockerignore

2. Nyní spusťte následující docker build příkaz k opětovnému sestavení obrázku (node-image ).

docker build -t node-image .

3. Po vytvoření bitové kopie spusťte níže uvedený příkaz docker run a spusťte kontejner node-app pomocí node-image na portu 5000 (-p 5000:5000). Tento příkaz také zpřístupní kontejner prostřednictvím http://localhost:5000 .

Ve výchozím nastavení má Docker bezpečnostní mechanismus, který brání ostatním počítačům v přístupu ke kontejneru Docker. Jediný způsob, jak získat přístup ke kontejneru Docker, je zadat přístupový port.

docker run --name node-app -d -p 5000:5000 node-image

Chcete-li kontejner zastavit, spusťte docker rm node-app -f.

4. Nyní spusťte níže uvedený příkaz docker ps a zobrazte všechny aktivní kontejnery (-a).

 docker ps -a

Níže můžete vidět, že váš kontejner Docker (node-app) je aktivní.

5. Spusťte níže uvedený příkaz docker exec a spusťte interaktivní (-it) shell (bash) uvnitř kontejneru node-app.

docker exec -it node-app bash

6. Nakonec spusťte níže uvedený dir příkaz ke kontrole, zda jsou soubory v .dockerignore byly přidány do kontejneru (node-app ).

dir

Ve výstupu níže můžete zjistit, že soubory, které jste uvedli v .dockerignore nejsou součástí kontejneru Note-app Docker.

Složka node_modules v kontejneru byla vygenerována příkazem npm i z Dockerfile.

Vytvoření obrazu uzlu pomocí Docker-compose

Naučili jste se základní životní cyklus kontejneru:sestavení, spuštění a zastavení kontejneru. Lze však životní cyklus ještě zlepšit? Docker-compose vám umožní zjednodušit životní cyklus nejen jednoho, ale mnoha kontejnerů.

S Docker-compose stačí spustit jeden příkaz Docker ke spuštění všech kontejnerů a jeden příkaz k vypnutí všech kontejnerů namísto spouštění řady příkazů. Tyto příkazy Dockeru se řídí pokyny uvedenými v docker-compose soubor.

Chcete-li začít s Docker-compose, potřebujete soubor YAML, který bude obsahovat všechny služby a konfigurace pro tyto služby. Některé z těchto konfigurací zahrnují.

• Konfigurace sestavení:Obsahuje umístění souboru Dockerfile, který chcete použít k sestavení služby, a další možnosti sestavení.
• Obrázky:Místo vytváření vlastního obrázku můžete použít obrázky na hub.docker.com.
• Proměnné prostředí:Ukládá konfigurace do proměnných ve vašem kódu.
• Porty:Tato možnost určuje, na jakém portu bude aplikace běžet.
• Síť:Tato možnost umožňuje jednomu kontejneru komunikovat s jiným kontejnerem.

Vytvořte soubor YAML s názvem docker-compose.yml soubor a naplňte konfiguraci níže, čímž se vytvoří vlastní obraz uzlu.

YAML je citlivý na odsazení, takže se ujistěte, že používáte správné indexování.

# Version of Docker-compose
version: '3.8'
services:
  # Service name
  node:
    # Creating a custom image
    build:
      # Location to the Dockerfile
      context: .
      # Name of the Dockerfile
      dockerfile: Dockerfile
    ports:
        # External port:Internal port
      - 5000:5000

Spuštěním příkazu níže vytvořte a spusťte službu uzlu.

docker-compose up --build

Konfigurace svazků pro perzistentní data v kontejneru Docker

Po vytvoření obrazu uzlu budete muset uložit statická data a synchronizovat zdrojový kód se zdrojovým kódem v kontejneru. Jak? Konfigurací svazků a připojení připojení pro kontejner Docker.

V tomto tutoriálu nejprve začnete konfigurovat svazky. Svazky v Dockeru jsou adresáře mimo kontejner Docker, které obsahují data pro tento kontejner. Svazky se primárně používají k ukládání trvalých dat, jako jsou zdrojové kódy, soubory protokolu atd.

1. Otevřete docker-compose soubor ve vašem editoru kódu.

2. Přidejte níže uvedené konfigurace svazku pod node služba docker-compose soubor.

Níže uvedená konfigurace vytvoří svazek s názvem nodeVolume a uloží jej do složky s názvem server. Ale klidně změňte název svazku a složky.

---
  node:
		---
		# ADD THE CONFIGURATION FROM THIS POINT to create a volume named nodeVolume
    volumes:
      # Syntax <nameOfVolume>:<directorInDocker>
      - nodeVolume:/server
# Making the node service volume accessible to other services.
volumes:
  # Declaring the node service volume.
  nodeVolume:

3. Nakonec spusťte níže uvedený příkaz a znovu vytvořte obraz (obrázek uzlu).

docker-compose up -d --build

Konfigurace připojení Bind Mount pro synchronizaci místního adresáře s kontejnerem Docker

Bind mount je mechanismus, který synchronizuje složku na vašem místním počítači se složkou v kontejneru Docker. Připojení vazby ukládá data do kontejneru, ale data se odešlou také, když je kontejner smazán.

Připojení vazeb se primárně používají ve fázi vývoje, kde jsou data dynamická (informace se často mění). S připojením vazby nemusíte znovu sestavovat aplikaci pokaždé, když je provedena změna ve zdrojovém kódu aplikace.

Konfigurace připojení vazby:

1. Otevřete docker-compose a přidejte kód níže do node službu pod volumes .

Níže uvedený kód synchronizuje pracovní adresář aplikace s adresářem /app v kontejneru. Kód zároveň brání vašemu zdrojovému kódu provádět změny v souboru node_modules v adresáři aplikace.

---
	node:
		volumes:
			---	 
			# ADD THE CONFIGURATION FROM THIS POINT to sync the working directory
			# for the application to the /app directory in the container
			- .:/server
			- /server/node_modules

2. Spusťte níže uvedený příkaz a znovu vytvořte obraz uzlu.

docker-compose up -d --build

Úprava souborů z adresáře /app aplikace v Dockeru ovlivní soubory na vašem místním počítači, protože složky jsou synchronizovány. Chcete-li Dockeru zabránit v provádění změn ve zdrojovém kódu vaší aplikace, přidejte do konfigurace připojení připojení možnost pouze pro čtení (:ro), jak je znázorněno níže.

 node:
   volumes:
     - ./:./server:ro # Adding the read-only option
     - - /server/node_modules

3. Otevřete soubor server.js v editoru kódu nahraďte h1 záhlaví na h5 , jak je ukázáno níže, a uložte změny. Tyto změny v server.js umožňuje otestovat, zda konfigurace připojení připojení funguje.

app.get("/", (req, res) => {
  res.send("<h5>Welcome Friends</h5>");
});

4. Nyní spusťte níže uvedený příkaz a zobrazte všechny spuštěné kontejnery.

docker ps

5. Nyní spusťte docker exec příkaz níže ke spuštění interaktivního shellu (-it ) vašeho spuštěného kontejneru uzlů (mern-docker_node_1 ).

docker exec -it mern-docker_node_1 bash

6. Nakonec spusťte cat příkaz níže k zobrazení změněného obsahu uvnitř server.js soubor v kontejneru uzlu.

cat server.js

Jak můžete vidět níže, záhlaví se změnilo na h5.

Připojení MongoDB k aplikaci MERN

MongoDB je bezplatný databázový program s otevřeným zdrojovým kódem pro více platforem orientovaný na dokumenty a NoSQL. V tomto tutoriálu nastavíte MongoDB a uvidíte, jak může služba uzlů z předchozí části komunikovat s MongoDB.

Otevřete docker-compose v editoru kódu a přidejte konfiguraci specifikovanou níže pod node služba.

Tato konfigurace používá oficiální obraz Mongo Docker k vytvoření služby (kontejneru) MongoDB.

version: '3.8'
services:
  node:
    ...
		# ADD THE CONFIGURATION FROM THIS POINT to build the MongoDB service
    environment:
      - PORT=5000
			# For security, specify a username and password as environmental variables
      # Username for the mongo database
      - MONGO_INITDB_ROOT_USERNAME=mern
      # Password for the mongo database
      - MONGO_INITDB_ROOT_PASSWORD=merndocker
    # Enables the mongo service to start before the node service
    depends_on:
      - mongo
  # Name of mongo service
  mongo:
    # Official mongo image from docker.hub
    image: mongo
    environment:
      # Username for the mongo database
      - MONGO_INITDB_ROOT_USERNAME=mern
      # Password for the mongo database
      - MONGO_INITDB_ROOT_PASSWORD=merndocker
    volumes:
      # <nameOfVolume>:<directorInDocker>
      - mongoDB:/data/db
volumes:
  # Making the volume accessible by other containers
  mongoDB:

Nyní spusťte docker-compose příkaz níže k --build a spusťte službu mongo.

docker-compose up -d --build 

Jak můžete vidět níže, Docker vytváří svazek pro službu mongo.

Propojení NodeJS s MongoDB

Po vybudování služby mongo můžete nyní propojit službu NodeJS s MongoDB. Propojení Nodejs s MongoDB vám umožní ukládat data do databáze MongoDB.

Použití názvu služby je jedním z běžných způsobů komunikace s různými kontejnery. A tento tutoriál používá závislost mongoose k propojení služby uzlu s MongoDB. Nejprve si ale budete muset nainstalovat mongoose.

1. Spusťte níže uvedený příkaz a nainstalujte mongoose .

npm i mongoose

2. Dále otevřete soubor server.js a přidejte níže uvedený kód, který importuje závislost mongoose a použije ji k propojení NodeJS s MongoDB.

Níže uvedený kód používá uživatelské jméno a heslo, které jste uložili jako proměnné prostředí v docker-compose soubor pro připojení služby uzlu s MongoDB.

const mongoose = require('mongoose');

// Gets the Username and Password 
const MONGO_URI = `mongodb://${process.env.MONGO_INITDB_ROOT_USERNAME}:${process.env.MONGO_INITDB_ROOT_PASSWORD}@mongo:27017`;

// Creating the connect function
const connectDB = async () => {
  await mongoose
    .connect(MONGO_URI, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    })
    .then(() => console.log("Mongo connected successfully"))// Logs out successful when MongoDB connects.
    .catch((e) => {
      console.log(e.message);// Logs out the error message if it encounters any.
    });
};

// Calling the Connect Function
connectDB();

...

3. Nyní spusťte níže uvedený příkaz docker-compose a znovu vytvořte obraz uzlu.

docker-compose up -d --build

4. Nakonec spusťte následující příkaz pro otevření protokolů pro aplikaci a zkontrolujte, zda se MongoDB úspěšně připojil.

docker-compose logs

Níže vidíte, že MongoDB je úspěšně připojen.

Přidání Redis do aplikace MERN

Právě jste přidali MongoDB jako druhou službu do aplikace MERN a nyní přidáte Redis jako třetí. Redis je databáze NoSQL běžně používaná k ukládání dat a tokenů uložených v mezipaměti.

Otevřete docker-compose a přidejte následující konfiguraci pod mongo služby pod services , jak je uvedeno níže.

Tato konfigurace nastaví oficiální image Dockeru Redis

services:
	---
  mongo:
		---
	# ADD THE CONFIGURATION FROM THIS POINT to set up the Redis service
  redis:
    image: redis

Nastavení klientské strany aplikace MERN

Od nastavení aplikace na straně serveru se ponořte do nastavení aplikace React jako klientské strany aplikace MERN. React je JavaScriptová knihovna pro vytváření uživatelských rozhraní.

1. Spusťte níže uvedený příkaz a vytvořte jednoduchou aplikaci React. Tento příkaz automaticky vytvoří adresář s názvem client v kořenovém adresáři aplikace MERN.

npx create-react-app client

Příkaz create-react-app zahájí instalaci všech požadovaných závislostí na výstupu níže.

2. Po dokončení instalace otevřete klienta adresář v kořenovém adresáři aplikace MERN a vytvořte v něm soubor Dockerfile. Dockerfile můžete pojmenovat jinak, ale Dockerfile se jmenuje react.dockerfile v tomto tutoriálu.

3. Přidejte níže uvedený kód do souboru Dockerfile (react.dockerfile) , který vytvoří vlastní obrázek React.

# Official node image
FROM node:17
# Setting the working directory to "/client"
WORKDIR /client

# Copies the package.json file into "/client" and run npm i
COPY package.json /client
RUN npm install
# Copies the entire react source code into "/client"
COPY . /client

EXPOSE 3000
# Starting the react app
CMD [ "npm", "start"]

4. Nyní otevřete docker-compose soubor a nahraďte obsah níže uvedeným kódem.

Následující kód přidá službu reakce pod služby s umístěním souboru Dockerfile a názvem souboru Docker.

Části kódu, které přidáte, přidáte do souboru docker-compose a celý kód uvidíte v poslední části těchto kroků.

# Version of Docker-compose
version: '3.8'
services:
  # Add the react service
  react:
		# Location to the dockerfile
	  context: ./client
	  # Name of the dockerfile
		dockerfile: react.dockerfile

5. Nakonfigurujte volumes , ports a depends_on možnosti, jak je ukázáno níže.

    volumes:
        # Bind-mounts configuration
      - ./client:/client
        # Ignoring any changes made in "node_modules" folder
      - /client/node_modules
    ports:
        # External port:Internal port
      - 3000:3000
    depends_on:
        # Starts up the node service before starting up the react service
      - node

6. Nakonec přidejte konfiguraci níže a přidejte proměnnou prostředí, která umožní opětovné načtení za provozu v kontejneru Docker. Hot reload obnoví stránku reakce a znovu vykreslí její součásti.

Prostředí

    environment:
      # Enabling hot reload
      - CHOKIDAR_USEPOLLING=true

Po provedení výše uvedených kroků se dostanete do níže uvedené konfigurace.

version: '3.8'
services:
  react:
    build:
      context: ./client
      dockerfile: react.dockerfile
    volumes:
      - ./client:/client
      - /client/node_modules
    ports:
      - 3000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true
    depends_on:
      - node
  node:
    ---
  mongo:
    ---
  redis:
    ---

Závěr

Cílem tohoto tutoriálu je naučit vás, jak nastavit aplikaci pomocí Dockeru a učinit ji kompatibilní s jinými zařízeními. Máte pocit, že tomu tak je? V tomto bodě jste se naučili základy bostingu vývoje vaší aplikace zásobníku MERN.

Proč se jako další krok nenaučit používat NGINX k nastavení proxy pro vaši aplikaci a její nasazení do Dockeru?