frontend2docker :P

frontend/Dockerfile

@@ -0,0 +1,27 @@
+# Stage 1: Build (falls wir später einen Build-Schritt hätten, z.B. für Tailwind Purge)
+# Aktuell nicht nötig, da wir CDN/statische Dateien haben.
+
+# Stage 2: Production Environment using Nginx
+FROM nginx:1.25-alpine # Offizielles, schlankes Nginx Image
+
+# Arbeitsverzeichnis im Container (optional, aber gute Praxis)
+WORKDIR /usr/share/nginx/html
+
+# Entferne die Standard Nginx Willkommensseite
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Kopiere unsere eigene Nginx Konfiguration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Kopiere die Frontend-Dateien in das Verzeichnis, das Nginx ausliefert
+COPY index.html .
+COPY script.js .
+# Falls du später CSS-Dateien oder Bilder hast, kopiere sie auch:
+# COPY styles.css .
+# COPY images/ ./images
+
+# Nginx lauscht standardmäßig auf Port 80
+EXPOSE 80
+
+# Der Basis-Image startet Nginx bereits. Kein CMD nötig, außer wir wollen Optionen ändern.
+# CMD ["nginx", "-g", "daemon off;"] # Standard-CMD im Basis-Image

frontend/nginx.conf

@@ -0,0 +1,42 @@
+server {
+    listen 80;
+    server_name localhost; # Oder deine Domain
+
+    # Root-Verzeichnis für statische Dateien
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Logging (optional, aber nützlich)
+    access_log /var/log/nginx/access.log;
+    error_log /var/log/nginx/error.log;
+
+    # Statische Dateien direkt ausliefern
+    location / {
+        try_files $uri $uri/ /index.html; # Wichtig für Single-Page-Apps (auch wenn wir keine sind)
+    }
+
+    # API-Anfragen an den Backend-Service weiterleiten
+    location /api/ {
+        # Der Name 'backend' muss dem Service-Namen in docker-compose.yml entsprechen
+        proxy_pass http://backend:3000; # Leitet an den Backend-Container auf Port 3000 weiter
+
+        # Wichtige Proxy-Header setzen
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # Header für Server-Sent Events (Traceroute)
+        proxy_set_header Connection '';
+        proxy_http_version 1.1;
+        proxy_buffering off; # Wichtig für Streaming
+        proxy_cache off; # Wichtig für Streaming
+        proxy_read_timeout 300s; # Längerer Timeout für potenziell lange Traceroutes
+    }
+}
+
+# Upstream-Definition (optional, aber sauberer für proxy_pass)
+# upstream backend_server {
+#    server backend:3000;
+# }
+# Dann in location /api/: proxy_pass http://backend_server;

frontend/script.js

@@ -62,7 +62,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const tracerouteMessage = document.getElementById('traceroute-message');
 
     // --- Configuration ---
-    const API_BASE_URL = 'http://localhost:3000/api'; // Anpassen, falls nötig
+    const API_BASE_URL = '/api'; // Anpassen, falls nötig
 
     // --- State ---
     let map = null; // Leaflet map instance for user's IP