Lab 3 - Docker Compose : Node + MongoDB + React

compose-lab/
│
├── backend/
│   ├── Dockerfile
│   ├── package.json
│   ├── index.js
│   └── seed.js   # script d’injection de données
│
├── frontend/
│   └── (fichiers React créés par create-react-app)
│
└── docker-compose.yml

mkdir -p compose-lab/backend
cd compose-lab/backend

{
  "name": "backend",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "seed": "node seed.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "mongodb": "^6.0.0"
  }
}

const express = require("express");
const { MongoClient } = require("mongodb");

const app = express();
const url = "mongodb://database:27017";
const client = new MongoClient(url);

async function main() {
  await client.connect();
  const db = client.db("cours");
  const collection = db.collection("etudiants");

  // Route simple
  app.get("/", (req, res) => {
    res.json({ message: "API Node.js fonctionne !" });
  });

  // Route qui retourne les données insérées par seed.js
  app.get("/etudiants", async (req, res) => {
    const data = await collection.find().toArray();
    res.json(data);
  });

  app.listen(5000, () => console.log("Backend démarré sur le port 5000"));
}

main();

const { MongoClient } = require("mongodb");

// Connexion au service "database" défini dans docker-compose
const client = new MongoClient("mongodb://database:27017");

async function run() {
  await client.connect();

  const db = client.db("cours");
  const collection = db.collection("etudiants");

  // Données de test
  await collection.insertMany([
    { nom: "Alice", programme: "Informatique" },
    { nom: "Bob", programme: "Réseaux" },
    { nom: "Charlie", programme: "Développement" }
  ]);

  console.log("Données insérées !");
  await client.close();
}

run();

# Image Node officielle
FROM node:18

# Dossier de travail dans le conteneur
WORKDIR /app

# Copier package.json et installer les dépendances
COPY package.json .
RUN npm install

# Copier le reste du code
COPY . .

# Exposer le port de l'API
EXPOSE 5000

# Commande de démarrage
CMD ["npm", "start"]

cd ..
mkdir frontend
cd frontend

npx create-react-app .

function App() {
  return (
    <div>
      <h1>Frontend React fonctionne !</h1>
    </div>
  );
}

export default App;

version: "3.8"

services:
  # -------------------------
  # Base de données MongoDB
  # -------------------------
  database:
    # Ajouter la ou les lignes : l'image est mongo version 6
    container_name: mongo-db
    # Ajouter la ou les lignes : Expose MongoDB au host. Le port d'entrée et de sortie est 27017
    volumes:
      - mongo-data:/data/db  # Persistance des données

  # -------------------------
  # Backend Node.js (API)
  # Utilise un Dockerfile
  # -------------------------
  backend:
    build: ./backend        # IMPORTANT : on utilise un Dockerfile créer plus haut
    # Ajouter la ou les lignes : Le nom de ce conteneur doit être api-backend
    # Ajouter la ou les lignes : Ajouter le # de port d'entrée et de sortie qui est le même. (L'information sur le # du port est dans le lab ;-P )
    # Ajouter la ou les lignes : Ce conteneur dépend du conteneur database

  # -------------------------
  # Frontend React
  # Utilise l'image Node
  # -------------------------
  frontend:
    image: node:18
    container_name: react-frontend
    # Ajouter la ou les lignes : le nome du répertoire de travail est "/app"
    volumes:
      - ./frontend:/app     # Monte le code React
    ports:
      - "3000:3000"
    command: ["npm", "start"]  # Lance le serveur de dev React

# -------------------------
# Volume persistant MongoDB
# -------------------------
volumes:
  mongo-data:

docker compose up -d --build

docker compose exec backend npm run seed

docker compose exec database mongosh
> use cours
> db.etudiants.find()

docker compose ps

curl http://localhost:5000/
curl http://localhost:5000/etudiants