frontend2docker :P

compose.yml

@@ -0,0 +1,45 @@
+services:
+  # Backend Service (Node.js App)
+  backend:
+    build: ./backend # Pfad zum Verzeichnis mit dem Backend-Dockerfile
+    container_name: utools_backend # Eindeutiger Name für den Container
+    restart: unless-stopped
+    environment:
+      # Setze Umgebungsvariablen für das Backend
+      NODE_ENV: production # Wichtig für Performance und Logging
+      PORT: 3000 # Port innerhalb des Containers
+      LOG_LEVEL: info # Oder 'warn' für weniger Logs in Produktion
+      PING_COUNT: 4
+      # Die DB-Pfade werden aus dem Backend-Dockerfile ENV genommen,
+      # könnten hier aber überschrieben werden, falls nötig.
+      # GEOIP_CITY_DB: ./data/GeoLite2-City.mmdb
+      # GEOIP_ASN_DB: ./data/GeoLite2-ASN.mmdb
+    ports:
+      # Mappe Port 3000 vom Host auf Port 3000 im Container
+      # Zugriff von außen (Browser) erfolgt über localhost:3000
+      - "3000:3000"
+    volumes:
+      # Optional: Mount für die MaxMind Daten, um sie zu aktualisieren ohne Image-Neubau
+      # - ./backend/data:/app/data:ro # :ro = read-only im Container
+      # Kein Code-Mount für Produktion, da der Code im Image sein sollte.
+    networks:
+      - ip_tool_network # Verbinde mit unserem benutzerdefinierten Netzwerk
+
+  # Frontend Service (Nginx)
+  frontend:
+    build: ./frontend # Pfad zum Verzeichnis mit dem Frontend-Dockerfile
+    container_name: utools_frontend
+    restart: unless-stopped
+    ports:
+      # Mappe Port 8080 vom Host auf Port 80 im Container (wo Nginx lauscht)
+      # Zugriff von außen (Browser) erfolgt über localhost:8080
+      - "8080:80"
+    depends_on:
+      - backend # Stellt sicher, dass Backend gestartet wird (aber nicht unbedingt bereit ist)
+    networks:
+      - ip_tool_network # Verbinde mit unserem benutzerdefinierten Netzwerk
+
+# Definiere ein benutzerdefiniertes Netzwerk (gute Praxis)
+networks:
+  ip_tool_network:
+    driver: bridge # Standard-Netzwerktreiber

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