ajout dev docker
This commit is contained in:
EmmanuelTiamzon
Binary file not shown.
@@ -0,0 +1,59 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
const HealthCheck = () => {
|
||||
const [status, setStatus] = useState<'loading' | 'online' | 'offline'>('loading');
|
||||
|
||||
useEffect(() => {
|
||||
const checkHealth = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/health');
|
||||
const data = await response.json();
|
||||
setStatus(data.status === 'ok' ? 'online' : 'offline');
|
||||
} catch (error) {
|
||||
setStatus('offline');
|
||||
}
|
||||
};
|
||||
|
||||
checkHealth();
|
||||
|
||||
const interval = setInterval(checkHealth, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const getStatusStyles = () => {
|
||||
switch (status) {
|
||||
case 'online':
|
||||
return { backgroundColor: '#deffde', padding: '1rem', borderRadius: '4px' };
|
||||
case 'offline':
|
||||
return { backgroundColor: '#ffeded', padding: '1rem', borderRadius: '4px' };
|
||||
default:
|
||||
return { backgroundColor: '#f3f3f3', padding: '1rem', borderRadius: '4px' };
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusMessage = () => {
|
||||
switch (status) {
|
||||
case 'online':
|
||||
return '✅ Le backend est accessible et fonctionne correctement';
|
||||
case 'offline':
|
||||
return '❌ Le backend n\'est pas accessible';
|
||||
default:
|
||||
return '⏳ Vérification de la connexion avec le backend...';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: '1rem' }}>
|
||||
<div style={getStatusStyles()}>
|
||||
{status === 'loading' && (
|
||||
<span style={{ display: 'inline-block', animation: 'spin 1s linear infinite' }}>🔄</span>
|
||||
)}
|
||||
<span style={{ marginLeft: status === 'loading' ? '8px' : '0' }}>
|
||||
{getStatusMessage()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HealthCheck;
|
||||
@@ -0,0 +1,6 @@
|
||||
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"]
|
||||
@@ -0,0 +1,19 @@
|
||||
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"}
|
||||
@@ -0,0 +1,5 @@
|
||||
fastapi==0.68.0
|
||||
uvicorn[standard]==0.15.0
|
||||
python-multipart
|
||||
pymongo==3.12.0
|
||||
websockets==10.0
|
||||
@@ -0,0 +1,34 @@
|
||||
version: '3.8'
|
||||
services:
|
||||
mongodb:
|
||||
image: mongodb/mongodb-atlas-local
|
||||
volumes:
|
||||
- mongodb_data:/data/db
|
||||
networks:
|
||||
- backend-network
|
||||
restart: always
|
||||
|
||||
backend:
|
||||
build: ./backend
|
||||
depends_on:
|
||||
- mongodb
|
||||
networks:
|
||||
- backend-network
|
||||
- frontend-network
|
||||
|
||||
frontend:
|
||||
build: ./frontend
|
||||
ports:
|
||||
- "80:80"
|
||||
networks:
|
||||
- frontend-network
|
||||
depends_on:
|
||||
- backend
|
||||
|
||||
volumes:
|
||||
mongodb_data:
|
||||
|
||||
networks:
|
||||
backend-network:
|
||||
internal: true
|
||||
frontend-network:
|
||||
@@ -0,0 +1,3 @@
|
||||
FROM nginx:alpine
|
||||
COPY index.html /usr/share/nginx/html/index.html
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
@@ -0,0 +1,49 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,18 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
# Docker Compose - Aide-mémoire
|
||||
|
||||
## Commandes Essentielles
|
||||
|
||||
### Démarrage et Arrêt
|
||||
```bash
|
||||
# Démarrer les services
|
||||
docker compose up -d # Mode détaché (arrière-plan)
|
||||
docker compose up # Mode interactif (voir les logs)
|
||||
|
||||
# Arrêter les services
|
||||
docker compose down # Arrête et supprime les conteneurs
|
||||
docker compose stop # Arrête sans supprimer
|
||||
```
|
||||
|
||||
### Logs et Surveillance
|
||||
```bash
|
||||
# Voir les logs
|
||||
docker compose logs # Tous les logs
|
||||
docker compose logs -f # Suivre les logs en direct
|
||||
docker compose logs [service] # Logs d'un service spécifique
|
||||
|
||||
# État des conteneurs
|
||||
docker compose ps # Liste et état des conteneurs
|
||||
```
|
||||
|
||||
### Construction et Reconstruction
|
||||
```bash
|
||||
# Construire les images
|
||||
docker compose build # Tous les services
|
||||
docker compose build [service] # Un service spécifique
|
||||
|
||||
# Reconstruction et démarrage
|
||||
docker compose up -d --build # Reconstruire puis démarrer
|
||||
```
|
||||
|
||||
## Structure docker-compose.yml
|
||||
|
||||
### Services
|
||||
```yaml
|
||||
services:
|
||||
monservice:
|
||||
image: ... # Utiliser une image existante
|
||||
build: ... # Construire depuis un Dockerfile
|
||||
ports: # Exposer des ports
|
||||
volumes: # Monter des volumes
|
||||
depends_on: # Définir des dépendances
|
||||
networks: # Connecter aux réseaux
|
||||
```
|
||||
|
||||
### Réseaux
|
||||
```yaml
|
||||
networks:
|
||||
monreseau: # Réseau simple
|
||||
monreseau_interne:
|
||||
internal: true # Réseau isolé
|
||||
```
|
||||
|
||||
### Volumes
|
||||
```yaml
|
||||
volumes:
|
||||
monvolume: # Volume pour persistance
|
||||
```
|
||||
|
||||
## Commandes Utiles
|
||||
|
||||
### Inspection
|
||||
```bash
|
||||
# Vérifier la configuration
|
||||
docker compose config # Valider le fichier compose
|
||||
|
||||
# Voir les réseaux
|
||||
docker network ls # Lister les réseaux
|
||||
docker network inspect [réseau] # Détails d'un réseau
|
||||
|
||||
# Voir les volumes
|
||||
docker volume ls # Lister les volumes
|
||||
```
|
||||
|
||||
### Debug
|
||||
```bash
|
||||
# Accéder à un conteneur
|
||||
docker compose exec [service] sh # Ouvrir un shell
|
||||
|
||||
# Voir les processus
|
||||
docker compose top # Processus en cours
|
||||
```
|
||||
|
||||
### Gestion des Services
|
||||
```bash
|
||||
# Redémarrer des services
|
||||
docker compose restart # Tous les services
|
||||
docker compose restart [service] # Un service spécifique
|
||||
|
||||
# Recréer des conteneurs
|
||||
docker compose up -d --force-recreate
|
||||
```
|
||||
|
||||
## Conseils
|
||||
|
||||
- Utilisez toujours `-d` en production, jamais en développement
|
||||
- Pensez à vérifier les logs en cas de problème
|
||||
- `docker compose config` est votre ami pour valider la syntaxe
|
||||
- Les réseaux se créent automatiquement
|
||||
- Les volumes persistent après un `down` (sauf si `-v`)
|
||||
@@ -0,0 +1,205 @@
|
||||
# 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 (5 min)
|
||||
```bash
|
||||
# Créer l'arborescence
|
||||
mkdir meme-app
|
||||
cd meme-app
|
||||
mkdir backend frontend
|
||||
touch docker-compose.yml
|
||||
```
|
||||
|
||||
### Étape 2 : Backend (20 min)
|
||||
|
||||
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"}
|
||||
```
|
||||
|
||||
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 (20 min)
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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 (45 min)
|
||||
|
||||
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 mèmes 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
|
||||
Reference in New Issue
Block a user