Ajout du TP n°4

2025-04-09 11:55:41 +02:00
parent f05c9725a7
commit 2b4bb321e2
10 changed files with 526 additions and 0 deletions
--- a/TP4/meme-app/backend/Dockerfile
+++ b/TP4/meme-app/backend/Dockerfile
@@ -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"]
--- a/TP4/meme-app/backend/app.py
+++ b/TP4/meme-app/backend/app.py
@@ -0,0 +1,37 @@
+from fastapi import FastAPI
+from pymongo import MongoClient
+from fastapi.middleware.cors import CORSMiddleware
+
+app = FastAPI()
+
+# Juste après la déclaration FastAPI()
+# Ajouter le middleware CORS
+origins = [
+    "http://localhost",
+    "http://localhost:80",
+    "http://frontend",
+    "http://frontend:80"
+]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,  # Liste des origines autorisées
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# 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"}
--- a/TP4/meme-app/backend/requirements.txt
+++ b/TP4/meme-app/backend/requirements.txt
@@ -0,0 +1,5 @@
+fastapi==0.68.0
+uvicorn[standard]==0.15.0
+python-multipart
+pymongo==3.12.0
+websockets==10.0
--- a/TP4/meme-app/docker-compose.yml
+++ b/TP4/meme-app/docker-compose.yml
@@ -0,0 +1,38 @@
+version: '3'
+services:
+  mongodb:
+    image: mongo:latest
+    volumes:
+      - mongo-data:/data/db
+    networks:
+      - backend-network
+      
+  backend:
+    build: ./backend
+    depends_on:
+      - mongodb
+    environment:
+      - MONGO_URI=mongodb://mongodb:27017/
+    networks:
+      - backend-network
+      - frontend-network
+    ports:
+      - "8000:8000"
+      
+  frontend:
+    build: ./frontend
+    depends_on:
+      - backend
+    networks:
+      - frontend-network
+    ports:
+      - "80:80"
+      
+volumes:
+  mongo-data:
+    driver: local
+
+# Pour la sécurité, c'est mieux d'avoir deux réseaux (vu en CM) -> même si dans notre cas ce n'est pas utile
+networks:
+  backend-network:
+  frontend-network:
--- a/TP4/meme-app/frontend/Dockerfile
+++ b/TP4/meme-app/frontend/Dockerfile
@@ -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
--- a/TP4/meme-app/frontend/index.html
+++ b/TP4/meme-app/frontend/index.html
@@ -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>
--- a/TP4/meme-app/frontend/nginx.conf
+++ b/TP4/meme-app/frontend/nginx.conf
@@ -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;
+    }
+}