# 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
<!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>
```

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