diff --git a/compose.yml b/compose.yml new file mode 100644 index 0000000..17778e2 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/frontend/Dockerfile b/frontend/Dockerfile new file mode 100644 index 0000000..54eaff8 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/frontend/nginx.conf b/frontend/nginx.conf new file mode 100644 index 0000000..86d8389 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/frontend/script.js b/frontend/script.js index 871e706..87d4a88 100644 --- a/frontend/script.js +++ b/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