Aller au contenu principal

creation-app-docker-compose

docker

  1. Comment déployer une application React.js et Node.js multi-conteneurs avec Docker Compose

[docker-compose] Docker Compose est un outil Docker puissant pour développer et exécuter des applications Dockerized multi-container.

[Docker] Docker est une plateforme open source pour le développement et l'exécution d'applications dans un environnement isolé connu sous le nom de conteneur.

[Pratique]

Dans ce tutoriel, nous allons créer un serveur backend Express en utilisant Node.js. Nous allons ensuite créer une application frontale en utilisant React.js et la connecter au serveur backend.

Nous utiliserons ensuite Docker Compose pour déployer les deux applications. Nous y accéderons également sur le navigateur web. Commencons à travailler sur nos applications.

Conditions préalables​

  • Reactjs + vitejs
  • Nodejs
  • Docker
  • Serveur Debian ou Ubuntu

Pour mettre en œuvre ce tutoriel, vous aurez besoin des éléments suivants déjà installés sur votre ordinateur:

  • VSCODE
  • Nodejs
  • Docker installer
  • Docker Hub

Création du serveur backend Express en utilisant Node.js​

Pour créer le serveur Express à l'aide de Node.js, suivez les étapes illustrées ci-dessous:

  1. On va créer un répertoire projet.
sudo mkdir myapp
  1. Créer des sous répertoires frontend et backend
cd myapp
sudo mkdir frontend backend
  1. Configuration backend

Initialiser l'application en utilisant. On va commencer par ce déplacer vers le répertoire backend La commande va initialiser l'application et générera le package.jsonFichier.

cd backend 
npm init --y

Installons les dépendances

Après avoir exécuté la commande dans votre terminal, il va installer expresset nodemon. Nous utiliserons le installé expresspaquet pour créer le serveur.

Nous utiliserons nodemon pour regarder et surveiller les fichiers locaux. Nodemon détectera les changements dans les fichiers dorsaux et redémarre automatiquement le serveur.

[1-Config-backend]

npm i -g nodemon
npm i express

[ouvrir-package-json] Ouvrez le package.jsonet le dossier et les npmscript pour nodemonpour commencer à travailler:

"dev": "nodemon -L app.js"

[création-server.js]

Dans le noderépertoire, créer un nouveau fichier nommé server.js. Ce fichier aura la logique pour créer notre serveur backend.

coller le extrait de code suivant dans le server.js

const express = require('express')
const cors = require('cors')

const app = express()

app.use(cors())

app.get('/', (req, res) => {
 res.json([
   {
     "id":"1",
     "title":"Album Review: When we all Fall asleep where do we go?"
   },
   {
     "id":"2",
     "title":"Book Review: How can we escape this labyrinth of suffering?"
   },
   {
     "id":"3",
     "title":"Documentary Review: How can we escape the rat race?"
   }
 ])
})

app.listen(4000, () => {
 console.log('connected on port 4000')
})

Le code snippet ci-dessus créera un getroute. L'application frontale obtiendra les titres de la révision de cette voie.

[Run-server-backend]

Nous allons lancer le serveur Express Backend

npm run dev

Le npm va démarrer et exécuter notre serveur sur http://localhost:4000/comme dans votre navigateur local.

Création de l'application frontend React.js + vitejs​

Pour créer l'application React.js frontal, suivez les étapes illustrées ci-dessous:

Etape 1:

Dans le dossier myapp/frontend, taper cette commande dans le terminal. vitejs-react-install

cd myapp/frontend
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install && npm run dev

Etape 2 Dans le srcrépertoire, ouvrir le App.jset ajouter le snippet de code suivant:

import { useEffect, useState } from 'react'
import './App.css';

function App() {
  const [reviews, setReviews] = useState([])
  useEffect(() => {
    fetch('http://localhost:4000/')
      .then(res => res.json())
      .then(data => setReviews(data))
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <h1>all Reviews</h1>
        {reviews && reviews.map(blog => (
          <div key={blog.id}>{blog.title}</div>
        ))}
      </header>
    </div>
  );
}
export default App;

L'extrait de code ajouté créera une application de réaction frontale. Elle le fera. fetchles titres de la révision de ce backend getroute. Notre application de backend s'exécute http://localhost:4000/.

L'étape suivante consiste à exécuter l'application frontale React.js comme suit:

npm start

le npm control va démarrer et exécuter l'application frontend React.js.

Créer le Dockerfile pour le Backend Express Server​

Le Dockerfile contiendra toutes les commandes pour construire l'image Docker pour l'application du serveur backend. Dans le noderépertoire/dossier, créer un nouveau fichier nommé Dockerfile. Dans la création Dockerfile ajouter les commandes suivantes pour créer une image Docker.

# It uses node:18-alpine as the base image for the Node.js application
FROM node:18-alpine
# It installs the nodemon package globally for monitoring and watching the backend Express server
RUN npm install -g nodemon
# Creating the working directory named `app`
WORKDIR /app
# Copying all the tools and dependencies in the package.json file to the working directory `app`
COPY package.json .
#Installing all the tools and dependencies in the container
RUN npm install
#Copying all the application source code and files to the working directory `app`
COPY . .
#Exposing the container to run on this port 4000
EXPOSE 4000
#Command to start the Docker container for the backed server application
CMD ["npm", "run", "dev"]

Créer le Dockerfile pour l'application frontale React.js​

Dans le frontend/my-react-app, créer un nouveau fichier nommé Dockerfile. Dans la création Dockerfile ajouter les commandes suivantes pour créer une image Docker.

sudo touch Dockerfile
# It uses node:18-alpine as the base image for the frontend React.js application
FROM node:18-alpine
# Creating the working directory named `app`
WORKDIR /app
# Copying all the tools and dependencies in the package.json file to the working directory `app`
COPY package.json .
#Installing all the tools and dependencies in the container
RUN npm install
#Copying all the application source code and files to the working directory `app`
COPY . .
#Exposing the container to run on this port 3000
EXPOSE 3000
#Command to start the Docker container for the frontend React.js application
CMD ["npm", "start"]

Créer un docker-compose.yml​

Maintenant que nous avons les deux Dockerfiles, la prochaine étape est de créer un docker-compose.ymlqui contient toutes les configurations des conteneurs.

Ce fichier nous permettra d'exécuter et de déployer les deux conteneurs en utilisant Docker Compose. Nous ajouterons les conteneurs comme un service.

Ce fichier doit être créer à la racine du projet.

sudo touch docker-compose.yml

Le docker-compose.ymlle dossier disposera de deux services. En utilisant le fichier créé, nous allons faire tourner les deux conteneurs. Il les exécutera en tant qu'application unique.

Pour créer les deux services Docker Compose, suivez les étapes ci-dessous:

Étape 1 : Dans le myapp répertoire de travail, créer un nouveau fichier docker-compose.yml

Étape 2 : Ensuite, ajouter le premier service nommé nodeà l'aide du snippet de code suivant:

# Version of Docker-compose
version: '3.9'
services:
  # Add the node-js service
  node:
  # Location to the node.js dockerfile
    build: 
      context: ./backend
        # Name of the dockerfile
      dockerfile: Dockerfile
    container_name: node-container
    ports:
       # Host port:Container port
      - '4000:4000'
    volumes:
      # Bind-mounts configuration
      - ./node:/app
      # Ignoring any changes made in "node_modules" folder
      - ./app/node_modules
  react:
  # Location to the react.js dockerfile
    build: 
      context: ./frontend
        # Name of the dockerfile
      dockerfile: Dockerfile
    container_name: react-container
    ports:
     # Host port:Container port
      - '3000:3000'
    stdin_open: true

Maintenant que nous avons ajouté tous nos services au fichier, l'étape suivante consiste à construire et à faire fonctionner les deux conteneurs.

Exécuter les deux conteneurs à l'aide de Docker Compose​

Pour construire et exécuter les deux conteneurs à l'aide de Docker Compose, exécutez la commande suivante dans votre terminal:

docker-compose up --build

La commande exécutera les deux conteneurs et affichera la sortie suivante dans votre terminal:

Le produit indique à la fois la node-containeret react-containersont en cours d'exécution. Nous pouvons accéder à la node-containersur http://localhost:4000/ et react-container sur http://localhost:3000/.

Conclusion​

Dans ce tutoriel, vous avez appris comment déployer une application React.js et Node.js multi-conteneurs en utilisant Docker Compose. Nous avons créé un serveur Express backend en utilisant Node.js. Nous avons ensuite créé une application frontale en utilisant React.js. Après avoir terminé ces étapes, nous avons créé Dockerfiles pour ces deux applications. Nous avons également créé un docker-compose.yml

Nous avons utilisé le docker-compose.ymlconstruire et faire fonctionner les deux conteneurs d'application. Nous avons déployé avec succès les conteneurs Docker en utilisant Docker Compose.