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/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;
+    }
+}