[30388f42] feat: Full stack integration and documentation overhaul

heatmap-tool/README.md

@@ -14,42 +14,32 @@ Eine Webanwendung zur Visualisierung von Excel-Daten (XLSX) auf einer Deutschlan
 
 ## Installation & Start
 
-Das Projekt ist vollständig dockerisiert.
+Das Projekt ist vollständig in den **GTM-Engine Stack** integriert.
 
-1.  In das Verzeichnis wechseln:
+1.  Container starten (im Root-Verzeichnis):
     ```bash
-    cd heatmap-tool
+    docker-compose up -d --build heatmap-frontend heatmap-backend
     ```
 
-2.  Container starten (im Hintergrund):
-    ```bash
-    docker-compose up --build -d
-    ```
-
-3.  Anwendung öffnen:
-    *   Browser: `http://<DEINE-IP>:5173` (Frontend)
-    *   Die API läuft intern auf Port 8000, ist aber von außen auf Port `8002` gemappt (wird aber durch den Vite-Proxy auf 5173 getunnelt).
-
-4.  Stoppen:
-    ```bash
-    docker-compose down
-    ```
+2.  Anwendung öffnen:
+    *   **URL:** `https://<DEINE-IP>:8090/heatmap/` (via Nginx Gateway)
+    *   **Login:** Basic Auth (`admin` / `gemini`)
 
 ## Architektur
 
 *   **Frontend:** React 19, Vite, Leaflet (`react-leaflet`, `react-leaflet-cluster`, `react-leaflet-heatmap-layer-v3`).
+    *   **Interner Port:** 80 (Nginx)
+    *   **Routing:** `/heatmap/` (via Gateway)
 *   **Backend:** Python FastAPI, Pandas (für Excel-Processing).
-*   **Kommunikation:** Das Frontend nutzt einen Proxy (`vite.config.ts`), um Anfragen an `/api` an das Backend weiterzuleiten.
+    *   **Interner Port:** 8000
+*   **Kommunikation:** Nginx (Frontend) leitet `/api/` Anfragen an das Backend weiter.
 
 ## Lessons Learned & Known Issues (WICHTIG!)
 
-### 1. Docker Networking & Vite Proxy
-*   **Problem:** Frontend-Container konnte Backend nicht unter `localhost` oder `127.0.0.1` erreichen.
-*   **Lösung:**
-    1.  Beide Services müssen im selben Docker-Netzwerk sein (`networks: - heatmap-net` in `docker-compose.yml`).
-    2.  Das Frontend darf **nicht** versuchen, die URL hartcodiert aufzurufen.
-    3.  Stattdessen muss in `vite.config.ts` ein `server.proxy` eingerichtet werden, der `/api` auf `http://backend:8000` (Service-Name!) weiterleitet.
-    4.  Im Frontend-Code (`App.tsx`, `axios`) werden dann nur relative Pfade genutzt (z.B. `/api/upload`).
+### 1. Docker Networking & Nginx Proxy
+*   **Integration:** Das Tool läuft nun hinter einem zentralen Nginx-Gateway.
+*   **Pfad-Anpassung:** `vite.config.ts` nutzt `base: '/heatmap/'`, damit Assets korrekt geladen werden.
+*   **API-Routing:** Das Frontend-Nginx (`nginx.conf`) proxied `/api/` an `http://heatmap-backend:8000`. Dies verhindert `405 Method Not Allowed` Fehler bei POST-Requests, die sonst vom statischen Server abgefangen würden.
 
 ### 2. React 19 vs. Leaflet Libraries
 *   **Problem:** Viele Leaflet-Plugins (wie `react-leaflet-heatmap-layer-v3`) haben veraltete Peer-Dependencies (z.B. React 17), was bei `npm install` zu Fehlern führt.

heatmap-tool/frontend/nginx.conf

@@ -8,6 +8,14 @@ server {
         try_files $uri $uri/ /index.html;
     }
 
+    location /api/ {
+        proxy_pass http://heatmap-backend:8000;
+        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;
+    }
+
     error_page 500 502 503 504 /50x.html;
     location = /50x.html {
         root /usr/share/nginx/html;