# 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
```bash
# Créer l'arborescence
mkdir meme-app
cd meme-app
mkdir backend frontend
touch docker-compose.yml
```
### Étape 2 : Backend
1. Créer backend/requirements.txt :
```
fastapi==0.68.0
uvicorn[standard]==0.15.0
python-multipart
pymongo==3.12.0
websockets==10.0
```
2. Créer backend/app.py :
```python
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:
```py
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 :
```py
client = MongoClient("mongodb://mongodb:27017/")
```
Le 2e "mongodb" correspond au nom du service de MongoDB
3. Créer backend/Dockerfile :
```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
1. Créer frontend/index.html :
```html
Meme Gallery
Meme Gallery
Add a Meme
```
2. Créer frontend/nginx.conf :
```nginx
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`
3. Créer frontend/Dockerfile :
```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 :
1. Démarrer MongoDB
2. Démarrer le backend Python en le connectant à MongoDB
3. Démarrer le frontend Nginx en le connectant au backend
4. Gérer les réseaux pour isoler MongoDB
5. 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)
1. Démarrer l'application :
```bash
docker compose up -d
```
2. 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
3. Tester la persistance :
```bash
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