stiti/TP_Docker

Fork 0

Files

stiti 2b4bb321e2 Ajout du TP n°4

2025-04-09 11:55:41 +02:00

5.8 KiB

Raw Permalink Blame History

TP4 Docker Compose - Application de Mèmes

Objectif

Créer une application web de partage de mèmes en utilisant Docker Compose pour orchestrer 3 conteneurs :

Un frontend (nginx)
Un backend (Python/FastAPI)
Une base de données (MongoDB)

Prérequis

Docker et Docker Compose installés
Un éditeur de code (VS Code recommandé)

Structure du projet

meme-app/
├── backend/
│   ├── Dockerfile
│   ├── requirements.txt
│   └── app.py
├── frontend/
│   ├── Dockerfile
│   ├── nginx.conf
│   └── index.html
└── docker-compose.yml

Étape 1 : Mise en place de la structure

# Créer l'arborescence
mkdir meme-app
cd meme-app
mkdir backend frontend
touch docker-compose.yml

Étape 2 : Backend

Créer backend/requirements.txt :

fastapi==0.68.0
uvicorn[standard]==0.15.0
python-multipart
pymongo==3.12.0
websockets==10.0

Créer backend/app.py :

from fastapi import FastAPI
from pymongo import MongoClient

app = FastAPI()

# MongoDB connection
client = MongoClient("mongodb://mongodb:27017/")
db = client.memes_db

@app.get("/memes")
def get_memes():
    memes = list(db.memes.find({}, {"_id": 0}))
    return {"memes": memes}

@app.post("/memes")
def create_meme(title: str, url: str):
    meme = {"title": title, "url": url}
    db.memes.insert_one(meme)
    return {"message": "Meme added successfully"}

Ajout support CORS sur le backend : Dans les imports:

from fastapi.middleware.cors import CORSMiddleware

# Juste après la déclaration FastAPI()
# Ajouter le middleware CORS
origins = [
    "http://localhost",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,  # Liste des origines autorisées
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Attention nom du service à remplacer dans le back :

client = MongoClient("mongodb://mongodb:27017/")

Le 2e "mongodb" correspond au nom du service de MongoDB

Créer backend/Dockerfile :

FROM python:3.9-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8000"]

Étape 3 : Frontend

Créer frontend/index.html :

<!DOCTYPE html>
<html>
<head>
    <title>Meme Gallery</title>
    <style>
        .meme { margin: 10px; padding: 10px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <h1>Meme Gallery</h1>
    
    <div>
        <h2>Add a Meme</h2>
        <input type="text" id="title" placeholder="Title">
        <input type="text" id="url" placeholder="Image URL">
        <button onclick="addMeme()">Add Meme</button>
    </div>

    <div id="memes"></div>

    <script>
        async function loadMemes() {
            const response = await fetch('/backend/memes');
            const data = await response.json();
            const memesDiv = document.getElementById('memes');
            memesDiv.innerHTML = data.memes.map(meme => `
                <div class="meme">
                    <h3>${meme.title}</h3>
                    <img src="${meme.url}" width="200">
                </div>
            `).join('');
        }

        async function addMeme() {
            const title = document.getElementById('title').value;
            const url = document.getElementById('url').value;
            
            await fetch('/backend/memes?' + new URLSearchParams({
                title: title,
                url: url
            }), {method: 'POST'});
            
            loadMemes();
        }

        loadMemes();
    </script>
</body>
</html>

Créer frontend/nginx.conf :

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
    }

    location /backend/ {
        proxy_pass http://backend:8000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

exposer sur un port le backend

Modification du front des URL http://localhost:PORT_BACK/memes

Créer frontend/Dockerfile :

FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
COPY nginx.conf /etc/nginx/conf.d/default.conf

Étape 4 : Docker Compose

Votre mission : Créer le fichier docker-compose.yml pour :

Démarrer MongoDB
Démarrer le backend Python en le connectant à MongoDB
Démarrer le frontend Nginx en le connectant au backend
Gérer les réseaux pour isoler MongoDB
Configurer un volume pour les données MongoDB

Points à considérer :

Quels services doivent communiquer entre eux ?
Quels ports doivent être exposés ?
Comment assurer la persistance des données ?
Dans quel ordre les services doivent-ils démarrer ?

Étape 5 : Tests (30 min)

Démarrer l'application :

docker compose up -d

Vérifier que tout fonctionne :

Ouvrir http://localhost dans le navigateur
Ajouter un mème (utilisez une URL d'image depuis le web)
Vérifier qu'il s'affiche dans la galerie

Tester la persistance :

docker compose down
docker compose up -d

Les memes doivent toujours être là !

Rendu attendu

Le fichier docker-compose.yml complet et fonctionnel
Une explication de vos choix de configuration
Un exemple de mème ajouté via l'interface

Pour aller plus loin

Ajoutez des variables d'environnement pour la configuration
Implémentez un healthcheck pour MongoDB
Configurez un backup automatique de la base de données

5.8 KiB Raw Permalink Blame History