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
This commit is contained in:
cynfo3000 2026-03-10 17:43:53 +01:00
parent 54ddc0b902
commit 582eb5c8c1
4 changed files with 63 additions and 1 deletions

23
frontend/Dockerfile Normal file
View File

@ -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;"]

View File

@ -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 "$@"

View File

@ -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>

21
frontend/nginx.conf Normal file
View File

@ -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;
# }
}