Docker: Runtime-Config via window.__RMM_CONFIG__ (kein Rebuild bei Backend-Wechsel)

- Dockerfile: multistage build (node -> nginx)
- docker-entrypoint.sh: injiziert BACKEND_HOST/PORT zur Laufzeit
- nginx.conf: SPA-Routing, config.js no-cache
- index.html: laedt /config.js vor dem React-Bundle

Usage: docker run -e BACKEND_HOST=rmm.example.com -e BACKEND_PORT=8443 -p 80:80 rmm-frontend

frontend/Dockerfile

@@ -0,0 +1,23 @@
+# Stage 1: Build
+FROM node:22-alpine AS builder
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+# Stage 2: Serve
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh
+
+# Runtime-Konfiguration via Umgebungsvariablen
+# BACKEND_HOST, BACKEND_PORT werden in window.__RMM_CONFIG__ injiziert
+ENV BACKEND_HOST=localhost
+ENV BACKEND_PORT=8443
+
+EXPOSE 80
+ENTRYPOINT ["/docker-entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]

frontend/docker-entrypoint.sh

@@ -0,0 +1,16 @@
+#!/bin/sh
+# Injiziert BACKEND_HOST/PORT zur Laufzeit in window.__RMM_CONFIG__
+# So muss das Image nicht neu gebaut werden wenn sich der Backend-Host ändert
+
+CONFIG_JS="/usr/share/nginx/html/config.js"
+
+cat > "$CONFIG_JS" << EOF
+// Injiziert durch Docker-Entrypoint
+window.__RMM_CONFIG__ = {
+  backendHost: "${BACKEND_HOST}",
+  backendPort: "${BACKEND_PORT}"
+};
+EOF
+
+echo "RMM Frontend: Backend = https://${BACKEND_HOST}:${BACKEND_PORT}"
+exec "$@"

frontend/index.html

@@ -4,7 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
+    <title>RMM</title>
+    <!-- Runtime-Konfiguration (wird durch Docker-Entrypoint gesetzt) -->
+    <script src="/config.js"></script>
   </head>
   <body>
     <div id="root"></div>

frontend/nginx.conf

@@ -0,0 +1,21 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # config.js immer frisch laden (kein Cache — enthält Runtime-Config)
+    location = /config.js {
+        add_header Cache-Control "no-store";
+    }
+
+    # SPA: alle Routen auf index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # API-Requests an Backend weiterleiten (optional, falls kein reverse proxy davor)
+    # location /api/ {
+    #     proxy_pass https://BACKEND_HOST:BACKEND_PORT;
+    #     proxy_ssl_verify off;
+    # }
+}