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:
parent
54ddc0b902
commit
582eb5c8c1
23
frontend/Dockerfile
Normal file
23
frontend/Dockerfile
Normal 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;"]
|
||||
16
frontend/docker-entrypoint.sh
Normal file
16
frontend/docker-entrypoint.sh
Normal 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 "$@"
|
||||
@ -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
21
frontend/nginx.conf
Normal 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;
|
||||
# }
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user