Add dynamic api url

This commit is contained in:
dvirlabs 2025-06-14 22:20:36 +03:00
parent f1743f6348
commit b4ce25ae4c
6 changed files with 30 additions and 4 deletions

View File

@ -1,4 +1,4 @@
# frontend/Dockerfile # Stage 1: Build the frontend
FROM node:20 AS builder FROM node:20 AS builder
WORKDIR /app WORKDIR /app
@ -7,10 +7,20 @@ COPY . .
RUN npm install RUN npm install
RUN npm run build RUN npm run build
# Serve with nginx # Stage 2: Serve with nginx
FROM nginx:alpine FROM nginx:alpine
# Copy built app
COPY --from=builder /app/dist /usr/share/nginx/html COPY --from=builder /app/dist /usr/share/nginx/html
# Copy nginx config
COPY nginx.conf /etc/nginx/conf.d/default.conf COPY nginx.conf /etc/nginx/conf.d/default.conf
# Copy the runtime env template + entrypoint
COPY public/env.js.template /usr/share/nginx/html/env.js.template
COPY docker-entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
EXPOSE 80 EXPOSE 80
CMD ["nginx", "-g", "daemon off;"] ENTRYPOINT ["/entrypoint.sh"]

View File

@ -0,0 +1,9 @@
#!/bin/sh
cat <<EOF > /usr/share/nginx/html/env.js
window.ENV = {
API_BASE: "${API_BASE:-http://localhost:8000}"
};
EOF
exec nginx -g "daemon off;"

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="%PUBLIC_URL%/env.js"></script>
<title>Vite + React</title> <title>Vite + React</title>
</head> </head>
<body> <body>

View File

@ -0,0 +1,3 @@
window.ENV = {
API_BASE: "${API_BASE}"
};

View File

@ -1,4 +1,4 @@
const API_BASE = 'http://localhost:8000'; const API_BASE = window?.ENV?.API_BASE || '';
export async function fetchDiagram() { export async function fetchDiagram() {
const res = await fetch(`${API_BASE}/diagram/fetch`); const res = await fetch(`${API_BASE}/diagram/fetch`);

View File

@ -17,3 +17,6 @@ spec:
image: {{ .Values.frontend.image }}:{{ .Values.frontend.tag }} image: {{ .Values.frontend.image }}:{{ .Values.frontend.tag }}
ports: ports:
- containerPort: {{ .Values.frontend.port }} - containerPort: {{ .Values.frontend.port }}
env:
- name: API_BASE
value: "https://{{ .Values.backend.ingress.host }}"