Nutzen Sie Docker mit dieser MERN-Stack-Tutorial-Lösung

Suchen Sie nach einer Möglichkeit, Ihre MERN-Anwendung während der Entwicklung der Anwendung mit allen Computern kompatibel zu machen? Sie sind an der richtigen Stelle! Dockerisieren Sie Ihre Anwendung, und dieses MERN-Stack-Tutorial ist genau das, was Sie brauchen.

In diesem Tutorial lernen Sie die Grundlagen der Dockerisierung eines MERN-Stacks kennen, wie es funktioniert und wie Sie es in verschiedenen Anwendungen implementieren.

Lesen Sie weiter und lösen Sie Kompatibilitätsprobleme, indem Sie Ihre Anwendung docken!

Voraussetzungen

Dieses Tutorial wird eine praktische Demonstration sein. Wenn Sie mitmachen möchten, stellen Sie sicher, dass Sie Folgendes haben:

• Docker Desktop 4.5.0+ installiert.

• Node 16.0+ installiert.

• Ein von Docker unterstütztes Betriebssystem – Dieses Tutorial verwendet Windows 10.

• Virtualisierung aktiviert und Linux-Kernel installiert (für Windows).

• API-Testdienst (Postman).

Docker einrichten

Docker ist eine Softwareplattform, die das Erstellen, Testen, Bereitstellen und Verwalten von Anwendungen beschleunigt. Docker verwendet einen Container, um alle Abhängigkeiten und Betriebssystemkonfigurationen zu speichern, die erforderlich sind, damit Anwendungen in jeder Umgebung ausgeführt werden können.

Vor dem Dockerisieren eines MERN-Stacks müssen Sie zunächst ein benutzerdefiniertes Knoten-Image mithilfe einer Docker-Datei erstellen.

1. Öffnen Sie die Docker-Anwendung, um zu prüfen, ob Docker erfolgreich gestartet wurde. Unten können Sie erkennen, dass die Docker-Engine läuft, da die Statusleiste (unten links) grün ist.

2. Erstellen Sie als Nächstes einen Projektordner mit dem Namen MERN-Docker . Dieser Ordner enthält alle Ressourcen für dieses Tutorial.

3. Erstellen Sie eine .js Datei mit Ihrem bevorzugten Code-Editor in Ihrem Projektordner (MERN-Docker ). Sie können die Datei nach Belieben benennen, aber die Datei heißt server.js in diesem Tutorial. Die server.js Datei enthält alle Codes für die Knotenanwendung.

4. Öffnen Sie Ihr Terminal und führen Sie den folgenden npm-Befehl aus, um die Anwendung zu initialisieren (init –y) und eine package.json zu erstellen Datei.

npm init --y

5. Führen Sie abschließend den folgenden Befehl aus, um express zu installieren Abhängigkeit, sodass Sie APIs für Ihre Knotenanwendung erstellen können.

npm i express

Einrichten eines Express-Servers

Nachdem Sie die MERN-Anwendung initialisiert und die Express-Abhängigkeit installiert haben, richten Sie einen einfachen Express-Server ein. Dieses Tutorial verwendet einen einfachen Express-Server, um zu demonstrieren, wie Express- und Node-Anwendungen angedockt werden können.

1. Öffnen Sie die server.js Datei und erstellen Sie ein Express-GET Route zu / .

Der folgende Code sendet eine Willkommensnachricht, wenn eine GET-Anfrage an http://localhost:5000 gesendet wird .

//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. Führen Sie nun den folgenden Knotenbefehl aus, um die Express-Anwendung zu starten.

node server.js

Wenn die Anwendung korrekt ausgeführt wird, sehen Sie die folgende Ausgabe.

3. Stellen Sie abschließend eine GET-Anforderung an http://localhost:5000 Verwendung eines API-Testdienstes wie Postman, um die Expressroute zu testen.

Erstellen und Erstellen eines benutzerdefinierten Images in diesem Mern Stack-Tutorial

Nach dem Einrichten der Route besteht der nächste Schritt darin, die Express-Anwendung mithilfe eines Basis-Images in einen Docker-Container zu integrieren. In diesem Tutorial verwenden Sie das offizielle Basis-Image des Knotens, um den Container einzurichten.

1. Erstellen Sie eine Datei namens Dockerfile und füllen Sie den folgenden Code aus, der ein benutzerdefiniertes Knoten-Image für Ihre Anwendung erstellt. Ein benutzerdefiniertes Image ermöglicht es Ihnen, Ihren Quellcode zum Image und die Konfigurationen für Ihr Image hinzuzufügen.

# 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. Führen Sie den Docker-Build-Befehl unten aus, um ein benutzerdefiniertes Image namens (-t) node-image im Arbeitsverzeichnis (.).

zu erstellen

docker build -t node-image .

Die folgende Ausgabe zeigt, wie Docker die Dockerfile verwendet um das Bild zu erstellen.

3. Führen Sie zuletzt den unten stehenden Docker-Image-Befehl aus, um alle erstellten Images aufzulisten (ls).

docker image ls

Unten sehen Sie alle verfügbaren Images, einschließlich des von Ihnen erstellten Knotenimages.

Knotenmon einrichten

Sie haben erfolgreich ein benutzerdefiniertes Knoten-Image erstellt, und das ist großartig. Aber Sie brauchen Hilfe, um Ihre Anwendung zu entwickeln, wenn es Änderungen gibt, und hier kommt das Hinzufügen von nodemon ins Spiel.

nodemon startet die Anwendung automatisch neu, wenn Dateiänderungen erkannt werden. Aber zuerst müssen Sie es installieren.

1. Führen Sie npm aus Befehl unten, um nodemon zu installieren als Dev-Abhängigkeit (--save-dev ).

npm i nodemon --save-dev

2. Als nächstes öffnen Sie die package.json Datei in Ihrem bevorzugten Code-Editor, um die folgende Konfiguration hinzuzufügen.

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

3. Öffnen Sie das Dockerfile und ändern Sie die CMD Befehl an den unteren.

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

4. Führen Sie zuletzt den folgenden docker build aus Befehl zum Neuaufbau des Images (node-image ).

docker build -t node-image .

Unten sehen Sie, dass Docker erst im zweiten Schritt die zwischengespeicherten Daten geladen und den Befehl vom dritten bis zum letzten Schritt ausgeführt hat. Dieses Verhalten ergibt sich aus den Änderungen, die Sie an package.json vorgenommen haben Datei (Docker-Caching).

Beschleunigung der Docker-Erstellung durch Ausschließen von Dateien und Ordnern

Vielleicht möchten Sie die Docker-Erstellung beschleunigen und sensible Inhalte schützen. Erstellen Sie in diesem Fall ein .dockerignore Datei, in der Sie die Dateien und Ordner angeben, deren Kopieren in Ihren Docker-Container ignoriert werden soll.

1. Erstellen Sie eine Datei namens .dockerignore mit Ihrem Texteditor und listen Sie die Dateien wie unten gezeigt auf, die vom Kopieren in Ihren Docker-Container ausgeschlossen werden sollen.

node_modules
Dockerfile
.dockerignore

2. Führen Sie nun den folgenden docker build aus Befehl zum Neuaufbau des Images (node-image ).

docker build -t node-image .

3. Führen Sie nach dem Erstellen des Images den folgenden docker run-Befehl aus, um einen Node-App-Container mit dem Node-Image auf Port 5000 (-p 5000:5000) zu starten. Dieser Befehl macht den Container auch über http://localhost:5000 zugänglich .

Standardmäßig verfügt Docker über einen Sicherheitsmechanismus, der verhindert, dass andere Computer auf den Docker-Container zugreifen. Die einzige Möglichkeit, auf den Docker-Container zuzugreifen, ist die Angabe eines Zugriffsports.

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

Um den Container zu stoppen, führen Sie docker rm node-app -f. aus

4. Führen Sie nun den Docker-Befehl ps unten aus, um alle aktiven Container anzuzeigen (-a).

 docker ps -a

Unten sehen Sie, dass Ihr Docker-Container (Knoten-App) aktiv ist.

5. Führen Sie den nachstehenden docker exec-Befehl aus, um eine interaktive (-it) Shell (bash) innerhalb des Node-App-Containers zu starten.

docker exec -it node-app bash

6. Führen Sie abschließend das folgende dir aus Befehl, um zu prüfen, ob die Dateien in der .dockerignore Datei wurden dem Container hinzugefügt (node-app ).

dir

Sie können in der Ausgabe unten erkennen, dass die Dateien, die Sie in der Datei .dockerignore aufgelistet haben, ignoriert werden Datei sind nicht im Note-App-Docker-Container enthalten.

Der Ordner node_modules im Container wurde durch den Befehl npm i aus der Dockerfile generiert.

Knoten-Image mit Docker-compose erstellen

Sie haben den grundlegenden Lebenszyklus eines Containers kennengelernt:Erstellen, Starten und Stoppen eines Containers. Aber kann der Lebenszyklus noch verbessert werden? Mit Docker-compose können Sie den Lebenszyklus nicht nur eines, sondern zahlreicher Container vereinfachen.

Mit Docker-compose müssen Sie nur einen Docker-Befehl ausführen, um alle Container zu starten, und einen Befehl, um alle Container herunterzufahren, anstatt eine Reihe von Befehlen auszuführen. Diese Docker-Befehle folgen den Anweisungen in docker-compose Datei.

Um mit Docker-compose zu beginnen, benötigen Sie eine YAML-Datei, die alle Dienste und die Konfigurationen für diese Dienste enthält. Einige dieser Konfigurationen beinhalten.

• Build-Konfiguration:Dies enthält den Speicherort der Docker-Datei, die Sie verwenden möchten, um den Dienst und andere Build-Optionen zu erstellen.
• Images:Sie können Images in hub.docker.com verwenden, anstatt Ihr benutzerdefiniertes Image zu erstellen.
• Umgebungsvariablen:Es speichert Konfigurationen in Variablen in Ihrem Code.
• Ports:Diese Option gibt an, auf welchem ​​Port die Anwendung ausgeführt wird.
• Netzwerk:Diese Option ermöglicht es einem Container, mit einem anderen Container zu kommunizieren.

Erstellen Sie eine YAML-Datei namens docker-compose.yml Datei und füllen Sie die Konfiguration unten aus, wodurch ein benutzerdefiniertes Knoten-Image erstellt wird.

YAML ist einrückungsempfindlich, stellen Sie also sicher, dass Sie die richtige Indizierung verwenden.

# 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

Führen Sie den folgenden Befehl aus, um den Knotendienst aufzubauen und zu starten.

docker-compose up --build

Konfigurieren von Volumes für persistente Daten im Docker-Container

Nachdem Sie das Knoten-Image erstellt haben, müssen Sie statische Daten speichern und Ihren Quellcode mit dem Quellcode im Container synchronisieren. Wie? Durch Konfigurieren von Volumes und Bind-Mounts für Docker-Container.

In diesem Lernprogramm beginnen Sie zuerst mit der Konfiguration von Volumes. Volumes in Docker sind Verzeichnisse außerhalb des Docker-Containers, die die Daten für diesen Container enthalten. Volumes werden hauptsächlich zum Speichern persistenter Daten wie Quellcodes, Protokolldateien usw. verwendet.

1. Öffnen Sie Ihr docker-compose Datei in Ihrem Code-Editor.

2. Fügen Sie die Volume-Konfigurationen unten unter dem node hinzu Dienst des docker-compose Datei.

Die folgende Konfiguration erstellt ein Volume namens nodeVolume und speichert das Volume in einem Ordner namens server. Sie können jedoch den Namen des Volumes und des Ordners ändern.

---
  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. Führen Sie zuletzt den folgenden Befehl aus, um das Image (Node-Image) neu zu erstellen.

docker-compose up -d --build

Konfigurieren von Bind Mount zum Synchronisieren des lokalen Verzeichnisses mit dem Docker-Container

Bind Mount ist ein Mechanismus, der einen Ordner auf Ihrem lokalen Computer mit einem Ordner im Docker-Container synchronisiert. Ein Bind-Mount speichert Daten im Container, aber die Daten gehen auch, wenn der Container gelöscht wird.

Bindungshalterungen werden hauptsächlich in der Entwicklungsphase verwendet, in der Daten dynamisch sind (Informationen ändern sich häufig). Mit einem Bind-Mount müssen Sie die Anwendung nicht jedes Mal neu erstellen, wenn eine Änderung am Quellcode der Anwendung vorgenommen wird.

So konfigurieren Sie ein Bind-Mount:

1. Öffnen Sie Ihr docker-compose Datei und fügen Sie den folgenden Code in den node ein Service unter volumes .

Der folgende Code synchronisiert das Arbeitsverzeichnis für die Anwendung mit dem /app-Verzeichnis im Container. Gleichzeitig verhindert der Code, dass Ihr Quellcode Änderungen an der node_modules-Datei im App-Verzeichnis vornimmt.

---
	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. Führen Sie den folgenden Befehl aus, um das Knoten-Image neu zu erstellen.

docker-compose up -d --build

Das Ändern von Dateien aus dem /app-Verzeichnis der Anwendung in Docker wirkt sich auf die Dateien auf Ihrem lokalen Computer aus, da die Ordner synchronisiert werden. Um Docker daran zu hindern, Änderungen am Quellcode Ihrer Anwendung vorzunehmen, fügen Sie die schreibgeschützte Option (:ro) zu Ihrer Bind-Mount-Konfiguration hinzu, wie unten gezeigt.

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

3. Öffnen Sie die server.js Datei in Ihrem Code-Editor, ersetzen Sie h1 Header zu h5 , wie unten gezeigt, und speichern Sie die Änderungen. Diese Änderungen in der server.js -Datei können Sie testen, ob die Bind-Mount-Konfiguration funktioniert.

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

4. Führen Sie nun den folgenden Befehl aus, um alle laufenden Container anzuzeigen.

docker ps

5. Führen Sie nun docker exec aus Befehl unten, um eine interaktive Shell auszuführen (-it ) Ihres laufenden Node-Containers (mern-docker_node_1 ).

docker exec -it mern-docker_node_1 bash

6. Führen Sie schließlich cat aus Befehl unten, um den geänderten Inhalt in server.js anzuzeigen Datei in Ihrem Knotencontainer.

cat server.js

Wie Sie unten sehen können, hat sich der Header zu h5 geändert.

MongoDB mit der MERN-Anwendung verbinden

MongoDB ist ein kostenloses, plattformübergreifendes, dokumentenorientiertes Open-Source-NoSQL-Datenbankprogramm. In diesem Tutorial richten Sie MongoDB ein und sehen, wie der Knotendienst aus dem vorherigen Abschnitt mit MongoDB kommunizieren kann.

Öffnen Sie docker-compose Datei in Ihrem Code-Editor, und fügen Sie die unten angegebene Konfiguration unter dem node hinzu Dienst.

Diese Konfiguration verwendet das offizielle Docker-Image von Mongo, um den MongoDB-Dienst (Container) zu erstellen.

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:

Führen Sie nun docker-compose aus Befehl unten zu --build und starten Sie den Mongo-Dienst.

docker-compose up -d --build 

Wie Sie unten sehen können, erstellt Docker ein Volume für den Mongo-Dienst.

NodeJS mit MongoDB verknüpfen

Nachdem Sie den Mongo-Dienst erstellt haben, können Sie jetzt den NodeJS-Dienst mit MongoDB verknüpfen. Durch die Verknüpfung von Nodejs mit MongoDB können Sie Daten in der MongoDB-Datenbank speichern.

Die Verwendung des Namens eines Dienstes ist eine der üblichen Methoden, um mit verschiedenen Containern zu kommunizieren. Und dieses Tutorial verwendet die Mungo-Abhängigkeit, um den Knotendienst mit MongoDB zu verknüpfen. Aber zuerst müssen Sie Mongoose installieren.

1. Führen Sie den folgenden Befehl aus, um mongoose zu installieren .

npm i mongoose

2. Als nächstes öffnen Sie die server.js Datei und fügen Sie den folgenden Code hinzu, der die Mungo-Abhängigkeit importiert und verwendet, um NodeJS mit MongoDB zu verknüpfen.

Der folgende Code verwendet den Benutzernamen und das Passwort, die Sie als Umgebungsvariablen in docker-compose gespeichert haben Datei, um den Knotendienst mit MongoDB zu verbinden.

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. Führen Sie nun den folgenden Befehl docker-compose aus, um das Knoten-Image neu zu erstellen.

docker-compose up -d --build

4. Führen Sie abschließend den folgenden Befehl aus, um die Protokolle für die Anwendung zu öffnen und zu überprüfen, ob MongoDB erfolgreich verbunden wurde.

docker-compose logs

Unten sehen Sie, dass MongoDB erfolgreich verbunden wurde.

Hinzufügen von Redis zur MERN-Anwendung

Sie haben gerade MongoDB als zweiten Dienst zur MERN-Anwendung hinzugefügt, und jetzt fügen Sie Redis als dritten hinzu. Redis ist eine NoSQL-Datenbank, die häufig zum Speichern von zwischengespeicherten Daten und Token verwendet wird.

Öffnen Sie docker-compose -Datei und fügen Sie die folgende Konfiguration unter mongo hinzu service unter services , wie unten gezeigt.

Diese Konfiguration richtet das offizielle Docker-Image von Redis ein

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

Einrichten der Client-Seite der MERN-Anwendung

Vertiefen Sie sich von der Einrichtung Ihrer Anwendung auf der Serverseite in die Einrichtung einer React-App als Client-Seite der MERN-Anwendung. React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen.

1. Führen Sie den folgenden Befehl aus, um eine einfache React-Anwendung zu erstellen. Dieser Befehl erstellt automatisch ein Verzeichnis namens client im Stammverzeichnis der MERN-Anwendung.

npx create-react-app client

Der Befehl create-react-app beginnt mit der Installation aller erforderlichen Abhängigkeiten von der Ausgabe unten.

2. Öffnen Sie nach Abschluss der Installation den Client Verzeichnis im Stammverzeichnis der MERN-Anwendung und erstellen Sie darin ein Dockerfile. Sie können das Dockerfile anders benennen, aber das Dockerfile heißt react.dockerfile in diesem Tutorial.

3. Fügen Sie den unten stehenden Code in die Docker-Datei (react.dockerfile) ein , wodurch ein benutzerdefiniertes React-Image erstellt wird.

# 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. Öffnen Sie nun Ihr docker-compose Datei und ersetzen Sie den Inhalt durch den folgenden Code.

Der folgende Code fügt einen Reaktionsdienst unter services mit dem Speicherort und dem Namen der Dockerfile hinzu.

Sie fügen Teile des Codes hinzu, den Sie in der Docker-Compose-Datei hinzufügen werden, und Sie sehen den gesamten Code im letzten Teil dieser Schritte.

# 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. Konfigurieren Sie die volumes , ports , und depends_on ab Optionen, wie unten gezeigt.

    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. Fügen Sie schließlich die folgende Konfiguration hinzu, um eine Umgebungsvariable hinzuzufügen, um das Hot Reload im Docker-Container zu aktivieren. Hot Reload aktualisiert eine Reaktionsseite und rendert ihre Komponenten neu.

    environment:
      # Enabling hot reload
      - CHOKIDAR_USEPOLLING=true

Wenn Sie die obigen Schritte befolgen, gelangen Sie zur folgenden Konfiguration.

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:
    ---

Schlussfolgerung

Dieses Tutorial soll Ihnen beibringen, wie Sie Ihre Anwendung mit Docker einrichten und mit anderen Geräten kompatibel machen. Glauben Sie, dass dies der Fall ist? An diesem Punkt haben Sie die Grundlagen für die Entwicklung Ihrer MERN-Stack-Anwendung gelernt.

Warum lernen Sie als nächsten Schritt nicht, NGINX zu verwenden, um einen Proxy für Ihre Anwendung einzurichten und in Docker bereitzustellen?