Stai cercando un modo per rendere la tua applicazione MERN compatibile con tutti i computer durante lo sviluppo dell'applicazione? Sei nel posto giusto! Dockerizza la tua applicazione e questo tutorial sullo stack MERN è proprio ciò di cui hai bisogno.
In questo tutorial imparerai le basi della Dockerizzazione di uno stack MERN, come funziona e come implementarlo in varie applicazioni.
Continua a leggere e risolvi i problemi di compatibilità Dockerizzando la tua applicazione!
Prerequisiti
Questo tutorial sarà una dimostrazione pratica. Se vuoi seguire, assicurati di avere:
- Docker Desktop 4.5.0+ installato.
- Nodo 16.0+ installato.
- Un sistema operativo supportato da Docker:questo tutorial utilizza Windows 10.
- Virtualizzazione abilitata e kernel Linux installato (per Windows).
- Servizio di test API (Postman).
Configurazione Docker
Docker è una piattaforma software che velocizza la creazione, il test, la distribuzione e la gestione delle applicazioni. Docker utilizza un contenitore per archiviare tutte le dipendenze e le configurazioni del sistema operativo necessarie per l'esecuzione delle applicazioni in qualsiasi ambiente.
Prima di Dockerizzare uno stack MERN, devi prima creare un'immagine del nodo personalizzata utilizzando un file Docker.
1. Aprire l'applicazione Docker per verificare se Docker è stato avviato correttamente. Di seguito, puoi dire che il motore Docker è in esecuzione poiché la barra di stato (in basso a sinistra) è verde.
2. Quindi, crea una cartella di progetto denominata MERN-Docker . Questa cartella conterrà tutte le risorse per questo tutorial.
3. Crea un .js file con il tuo editor di codice preferito nella cartella del tuo progetto (MERN-Docker ). Puoi nominare il file come preferisci, ma il file si chiama server.js in questo tutorial. Il server.js conterrà tutti i codici per l'applicazione del nodo.
4. Apri il tuo terminale ed esegui il seguente comando npm per inizializzare l'applicazione (init –y) e creare un package.json file.
npm init --y
5. Infine, esegui il comando seguente per installare express dipendenza, che ti consente di creare API per la tua applicazione del nodo.
npm i express
Configurazione di un Express Server
Dopo aver inizializzato l'applicazione MERN e aver installato la dipendenza express, configurerai un semplice server express. Questo tutorial utilizza un semplice server express per dimostrare come è possibile dockerizzare le applicazioni Express e Node.
1. Apri server.js file e crea un rapido GET percorso verso / .
Il codice seguente invia un messaggio di benvenuto quando una richiesta GET viene inviata a 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. Ora, esegui il comando node di seguito per avviare l'applicazione Express.
node server.jsSe l'applicazione funziona correttamente, vedrai l'output di seguito.
3. Infine, fai una richiesta GET a http://localhost:5000 utilizzando un servizio di test API, come Postman, per testare il percorso espresso.
Creazione e creazione di un'immagine personalizzata in questo tutorial sullo stack Mern
Dopo aver impostato il percorso, il passaggio successivo consiste nell'integrare l'applicazione Express in un contenitore Docker utilizzando un'immagine di base. In questo tutorial utilizzerai l'immagine di base ufficiale del nodo per configurare il container.
1. Crea un file chiamato Dockerfile e popolare il codice seguente, che crea un'immagine del nodo personalizzata per la tua applicazione. Un'immagine personalizzata ti consente di aggiungere il tuo codice sorgente all'immagine e le configurazioni per la tua immagine.
# 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. Esegui il comando docker build di seguito per creare un'immagine personalizzata chiamata (-t) node-image nella directory di lavoro (.).
docker build -t node-image .L'output seguente mostra come Docker utilizza il Dockerfile per costruire l'immagine.
3. Infine, esegui il comando immagine mobile di seguito per elencare (ls) tutte le immagini costruite.
docker image lsDi seguito puoi vedere tutte le immagini disponibili, inclusa l'immagine del nodo che hai creato.
Configurazione di nodemon
Hai creato con successo un'immagine del nodo personalizzata ed è fantastico. Ma avrai bisogno di aiuto per sviluppare la tua applicazione in caso di modifiche, ed è qui che entra in gioco l'aggiunta di nodemon.
nodemon riavvia automaticamente l'applicazione quando vengono rilevate modifiche ai file. Ma prima dovrai installarlo.
1. Esegui npm comando seguente per installare nodemon come dipendenza dev (--save-dev ).
npm i nodemon --save-dev
2. Quindi, apri package.json nel tuo editor di codice preferito per aggiungere la configurazione di seguito.
"scripts": {
"start": "node server.js",
"dev": "nodemon -L server.js"
},
3. Apri il File Docker e cambia il CMD comando a quello sottostante.
CMD ["npm", "run", "dev"]
4. Infine, esegui il seguente docker build comando per ricostruire l'immagine (node-image ).
docker build -t node-image .Di seguito puoi vedere che Docker ha caricato i dati memorizzati nella cache solo nel secondo passaggio ed ha eseguito il comando dal terzo all'ultimo passaggio. Questo comportamento risulta dalle modifiche apportate a package.json file (cache Docker).
Velocità delle creazioni Docker escludendo file e cartelle
Forse vuoi velocizzare la creazione di Docker e proteggere i contenuti sensibili. In tal caso, crea un .dockerignore file in cui specificherai i file e le cartelle da ignorare dalla copia nel tuo contenitore Docker.
1. Crea un file denominato .dockerignore con il tuo editor di testo ed elenca i file, come mostrato di seguito, da escludere dalla copia nel tuo contenitore Docker.
node_modules
Dockerfile
.dockerignore
2. Ora, esegui la seguente docker build comando per ricostruire l'immagine (node-image ).
docker build -t node-image .3. Dopo aver creato l'immagine, eseguire il comando docker run riportato di seguito per avviare un container dell'app del nodo utilizzando l'immagine del nodo sulla porta 5000 (-p 5000:5000). Questo comando rende il contenitore accessibile anche tramite http://localhost:5000 .
Per impostazione predefinita, Docker ha un meccanismo di sicurezza che impedisce ad altre macchine di accedere al container Docker. L'unico modo per accedere al container Docker è specificare una porta di accesso.
docker run --name node-app -d -p 5000:5000 node-image
Per arrestare il contenitore, esegui docker rm node-app -f.
4. Ora esegui il comando docker ps di seguito per visualizzare tutti i contenitori attivi (-a).
docker ps -aDi seguito, puoi vedere che il tuo container Docker (node-app) è attivo.
5. Esegui il comando docker exec di seguito per avviare una shell interattiva (-it) (bash) all'interno del contenitore dell'app del nodo.
docker exec -it node-app bash
6. Infine, esegui la dir di seguito comando per verificare se i file sono in .dockerignore sono stati aggiunti al contenitore (node-app ).
dirPuoi dire nell'output di seguito che i file che hai elencato in .dockerignore file non sono inclusi nel contenitore Docker dell'app note.
La cartella node_modules nel contenitore è stata generata dal comando npm i dal Dockerfile.
Creazione dell'immagine del nodo con Docker-compose
Hai imparato il ciclo di vita di base di un container:costruzione, avvio e arresto di un container. Ma è ancora possibile migliorare il ciclo di vita? Docker-compose ti consente di semplificare il ciclo di vita non di uno ma di numerosi container.
Con Docker-compose, devi solo eseguire un comando Docker per avviare tutti i contenitori e un comando per chiudere tutti i contenitori invece di eseguire una serie di comandi. Questi comandi Docker seguono le istruzioni elencate in docker-compose file.
Per iniziare con Docker-compose, è necessario un file YAML che conterrà tutti i servizi e le configurazioni per questi servizi. Alcune di queste configurazioni includono.
- Configurazione build:contiene la posizione del Dockerfile che desideri utilizzare per creare il servizio e altre opzioni di build.
- Immagini:puoi utilizzare le immagini in hub.docker.com invece di creare la tua immagine personalizzata.
- Variabili d'ambiente:memorizza le configurazioni nelle variabili nel tuo codice.
- Porte:questa opzione specifica su quale porta verrà eseguita l'applicazione.
- Rete:questa opzione consente a un container di comunicare con un altro container.
Crea un file YAML denominato docker-compose.yml file e popolare la configurazione di seguito, che crea un'immagine del nodo personalizzata.
YAML è sensibile al rientro, quindi assicurati di utilizzare l'indicizzazione appropriata.
# 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
Esegui il comando seguente per creare e avviare il servizio del nodo.
docker-compose up --build
Configurazione dei volumi per i dati persistenti nel contenitore Docker
Dopo aver creato l'immagine del nodo, dovrai archiviare i dati statici e sincronizzare il codice sorgente con il codice sorgente nel contenitore. Come? Configurando i volumi e associare i montaggi per il contenitore Docker.
In questo tutorial, inizierai prima a configurare i volumi. I volumi in Docker sono directory esterne al contenitore Docker che contengono i dati per quel contenitore. I volumi vengono utilizzati principalmente per archiviare dati persistenti, come codici sorgente, file di registro, ecc.
1. Apri la tua docker-compose file nel tuo editor di codice.
2. Aggiungi le configurazioni del volume di seguito sotto il node servizio di docker-compose file.
La configurazione seguente crea un volume denominato nodeVolume e archivia il volume in una cartella denominata server. Ma sentiti libero di cambiare il nome del volume e della cartella.
---
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. Infine, esegui il comando seguente per ricostruire l'immagine (node-image).
docker-compose up -d --build
Configurazione di Bind Mount per sincronizzare la directory locale con il contenitore Docker
Bind mount è un meccanismo che sincronizza una cartella nel tuo computer locale con una cartella nel contenitore Docker. Un montaggio vincolato archivia i dati nel contenitore, ma anche i dati vengono trasferiti quando il contenitore viene eliminato.
I binding mount vengono utilizzati principalmente nella fase di sviluppo in cui i dati sono dinamici (le informazioni cambiano frequentemente). Con un montaggio vincolato, non è necessario ricostruire l'applicazione ogni volta che viene apportata una modifica al codice sorgente dell'applicazione.
Per configurare un montaggio vincolante:
1. Apri la tua docker-compose file e aggiungi il codice qui sotto nel node servizio in volumes .
Il codice seguente sincronizza la directory di lavoro per l'applicazione con la directory /app nel contenitore. Allo stesso tempo, il codice impedisce al codice sorgente di apportare modifiche al file node_modules nella directory dell'app.
---
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_modules2. Eseguire il comando seguente per ricostruire l'immagine del nodo.
docker-compose up -d --build
La modifica dei file dalla directory /app dell'applicazione in Docker influirà sui file nel computer locale poiché le cartelle sono sincronizzate. Per impedire a Docker di apportare modifiche al codice sorgente della tua applicazione, aggiungi l'opzione di sola lettura (:ro) alla tua configurazione di montaggio bind, come mostrato di seguito.
node:
volumes:
- ./:./server:ro # Adding the read-only option
- - /server/node_modules
3. Apri server.js nel tuo editor di codice, sostituisci h1 intestazione a h5 , come illustrato di seguito, e salvare le modifiche. Queste modifiche in server.js file ti consente di verificare se la configurazione di montaggio bind funziona.
app.get("/", (req, res) => {
res.send("<h5>Welcome Friends</h5>");
});4. Ora esegui il comando seguente per visualizzare tutti i contenitori in esecuzione.
docker ps
5. Ora esegui docker exec comando seguente per eseguire una shell interattiva (-it ) del contenitore del nodo in esecuzione (mern-docker_node_1 ).
docker exec -it mern-docker_node_1 bash
6. Infine, esegui cat comando seguente per visualizzare il contenuto modificato all'interno di server.js file nel tuo contenitore del nodo.
cat server.jsCome puoi vedere di seguito, l'intestazione è cambiata in h5.
Collegamento di MongoDB all'applicazione MERN
MongoDB è un programma di database orientato ai documenti NoSQL, gratuito, open source e multipiattaforma. In questo tutorial imposterai MongoDB e vedrai come il servizio del nodo della sezione precedente può comunicare con MongoDB.
Apri la docker-componi nel tuo editor di codice e aggiungi la configurazione specificata di seguito sotto il node servizio.
Questa configurazione utilizza l'immagine Docker ufficiale di Mongo per creare il servizio MongoDB (contenitore).
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:
Ora, esegui docker-compose comando qui sotto per --build e avvia il servizio mongo.
docker-compose up -d --build
Come puoi vedere di seguito, Docker sta creando un volume per il servizio mongo.
Collegamento di NodeJS a MongoDB
Dopo aver creato il servizio mongo, ora puoi collegare il servizio NodeJS a MongoDB. Il collegamento di Nodejs a MongoDB consente di archiviare i dati nel database di MongoDB.
L'utilizzo del nome di un servizio è uno dei modi più comuni per comunicare con contenitori diversi. E questo tutorial usa la dipendenza mongoose per collegare il servizio del nodo a MongoDB. Ma prima dovrai installare mangusta.
1. Esegui il comando seguente per installare mongoose .
npm i mongoose2. Quindi, apri server.js file e aggiungi il codice seguente, che importa la dipendenza mongoose e la usa per collegare NodeJS con MongoDB.
Il codice seguente utilizza il nome utente e la password che hai archiviato come variabili di ambiente in docker-compose file per connettere il servizio del nodo con 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. Ora, esegui il comando docker-compose di seguito per ricostruire l'immagine del nodo.
docker-compose up -d --build
4. Infine, eseguire il comando seguente per aprire i registri dell'applicazione e verificare se MongoDB si è connesso correttamente.
docker-compose logsDi seguito, puoi vedere MongoDB connesso correttamente.
Aggiunta di Redis all'applicazione MERN
Hai appena aggiunto MongoDB come secondo servizio all'applicazione MERN e ora aggiungerai Redis come terzo. Redis è un database NoSQL comunemente utilizzato per archiviare dati e token memorizzati nella cache.
Apri la docker-componi e aggiungi la seguente configurazione sotto mongo servizio in services , come mostrato di seguito.
Questa configurazione configura l'immagine Docker ufficiale di Redis
services:
---
mongo:
---
# ADD THE CONFIGURATION FROM THIS POINT to set up the Redis service
redis:
image: redis
Configurazione lato client dell'applicazione MERN
Dalla configurazione dell'applicazione sul lato server, approfondisci la configurazione di un'app React come lato client dell'applicazione MERN. React è una libreria JavaScript per la creazione di interfacce utente.
1. Esegui il comando seguente per creare una semplice applicazione React. Questo comando crea automaticamente una directory denominata client nella directory principale dell'applicazione MERN.
npx create-react-app clientIl comando create-react-app avvia l'installazione di tutte le dipendenze richieste sull'output seguente.
2. Una volta completata l'installazione, apri il client directory nella directory principale dell'applicazione MERN e creare un Dockerfile al suo interno. Puoi nominare il Dockerfile in modo diverso, ma il Dockerfile è denominato react.dockerfile in questo tutorial.
3. Aggiungi il codice seguente nel Dockerfile (react.dockerfile) , che crea un'immagine React personalizzata.
# 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. Ora apri il tuo docker-compose file e sostituisci il contenuto con il codice seguente.
Il codice seguente aggiunge un servizio di reazione ai servizi con la posizione di Dockerfile e il nome di Dockerfile.
Aggiungerai parti del codice che aggiungerai nel file di composizione mobile e vedrai l'intero codice nell'ultima parte di questi passaggi.
# 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. Configura i volumes , ports e depends_on opzioni, come illustrato di seguito.
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
- node6. Infine, aggiungi la configurazione seguente per aggiungere una variabile di ambiente per abilitare il ricaricamento a caldo nel contenitore Docker. La ricarica a caldo aggiorna una pagina di reazione e riesegue il rendering dei suoi componenti.
Ambiente environment:
# Enabling hot reload
- CHOKIDAR_USEPOLLING=trueSeguendo i passaggi precedenti si accede alla configurazione di seguito.
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:
---
Conclusione
Questo tutorial mirava a insegnarti come configurare la tua applicazione utilizzando Docker e renderla compatibile con altri dispositivi. Pensi che sia così? A questo punto, hai imparato le basi per potenziare lo sviluppo della tua applicazione stack MERN.
Come passaggio successivo, perché non imparare a utilizzare NGINX per configurare un proxy per la tua applicazione e distribuirlo su Docker?