236 lines
5.8 KiB
Markdown
236 lines
5.8 KiB
Markdown
|
# 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
|