Angepass an Produtionumgebung

frontend/Dockerfile.prod

@@ -0,0 +1,23 @@
+# --- Build-Stage: Statische Dateien mit Vite bauen ---
+FROM node:20-alpine AS build
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+# --- Serve-Stage: Auslieferung über nginx ---
+FROM nginx:alpine
+
+# Eigene nginx-Konfiguration (statische Auslieferung + /api-Proxy)
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Gebaute Dateien aus der Build-Stage übernehmen
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

frontend/eslint.config.js

@@ -26,4 +26,11 @@ export default defineConfig([
       'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
     },
   },
+  {
+    // Konfigurationsdateien laufen in Node, nicht im Browser
+    files: ['*.config.js'],
+    languageOptions: {
+      globals: globals.node,
+    },
+  },
 ])

frontend/nginx.conf

@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # API-Anfragen an das Backend weiterleiten.
+    # "backend" ist der Service-Name aus docker-compose.
+    location /api/ {
+        proxy_pass http://backend:3001;
+        proxy_http_version 1.1;
+        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;
+    }
+
+    # SPA-Routing: alle übrigen Pfade auf index.html (React Router etc.)
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

frontend/src/App.jsx

@@ -5,8 +5,12 @@ import ConfirmationModal from './components/ConfirmationModal';
 import './AppStyles.css';
 
 // Die Basis-URL der Express-API
-// Always use localhost because the browser runs on the host machine
-const API_URL = 'http://localhost:3001/api/appointments';
+// Standardmäßig relativ ("/api/appointments"), damit der Browser denselben
+// Host wie das Frontend anspricht. In Produktion leitet nginx /api an das
+// Backend weiter, im Dev-Modus übernimmt das der Vite-Proxy (vite.config.js).
+// Über VITE_API_URL kann optional ein absoluter Backend-Host gesetzt werden.
+const API_BASE = import.meta.env.VITE_API_URL ?? '';
+const API_URL = `${API_BASE}/api/appointments`;
 
 // Funktion zur Umwandlung von MongoDBs _id in die interne id des Frontends
 const normalizeAppointment = (appointment) => ({

frontend/vite.config.js

@@ -1,6 +1,13 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
+// Im Dev-Modus laufen Frontend (5173) und Backend (3001) getrennt.
+// Damit das Frontend trotzdem relative URLs ("/api/...") verwenden kann,
+// proxyt Vite alle /api-Anfragen an das Backend. Das Ziel ist konfigurierbar:
+// - lokal ohne Docker: http://localhost:3001 (Standard)
+// - Docker-Dev: VITE_PROXY_TARGET=http://backend:3001
+const proxyTarget = process.env.VITE_PROXY_TARGET || 'http://localhost:3001'
+
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
@@ -9,6 +16,12 @@ export default defineConfig({
     port: 5173,
     watch: {
       usePolling: true
+    },
+    proxy: {
+      '/api': {
+        target: proxyTarget,
+        changeOrigin: true
+      }
     }
   }
 })