From b4ce25ae4c3accf92d98f2412d51480660364b85 Mon Sep 17 00:00:00 2001 From: dvirlabs Date: Sat, 14 Jun 2025 22:20:36 +0300 Subject: [PATCH] Add dynamic api url --- frontend/Dockerfile | 16 +++++++++++++--- frontend/docker-entrypoint.sh | 9 +++++++++ frontend/index.html | 1 + frontend/public/env.js.template | 3 +++ frontend/src/services/api.js | 2 +- labmap-chart/templates/frontend-deployment.yaml | 3 +++ 6 files changed, 30 insertions(+), 4 deletions(-) create mode 100644 frontend/docker-entrypoint.sh create mode 100644 frontend/public/env.js.template diff --git a/frontend/Dockerfile b/frontend/Dockerfile index c0b8577..c1d9c23 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -1,4 +1,4 @@ -# frontend/Dockerfile +# Stage 1: Build the frontend FROM node:20 AS builder WORKDIR /app @@ -7,10 +7,20 @@ COPY . . RUN npm install RUN npm run build -# Serve with nginx +# Stage 2: Serve with nginx FROM nginx:alpine + +# Copy built app COPY --from=builder /app/dist /usr/share/nginx/html + +# Copy nginx config 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 -CMD ["nginx", "-g", "daemon off;"] +ENTRYPOINT ["/entrypoint.sh"] diff --git a/frontend/docker-entrypoint.sh b/frontend/docker-entrypoint.sh new file mode 100644 index 0000000..d9753f5 --- /dev/null +++ b/frontend/docker-entrypoint.sh @@ -0,0 +1,9 @@ +#!/bin/sh + +cat < /usr/share/nginx/html/env.js +window.ENV = { + API_BASE: "${API_BASE:-http://localhost:8000}" +}; +EOF + +exec nginx -g "daemon off;" diff --git a/frontend/index.html b/frontend/index.html index 0c589ec..4e92dbc 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,6 +4,7 @@ + Vite + React diff --git a/frontend/public/env.js.template b/frontend/public/env.js.template new file mode 100644 index 0000000..7fa1ae5 --- /dev/null +++ b/frontend/public/env.js.template @@ -0,0 +1,3 @@ +window.ENV = { + API_BASE: "${API_BASE}" +}; diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js index 55f84e7..bd6f582 100644 --- a/frontend/src/services/api.js +++ b/frontend/src/services/api.js @@ -1,4 +1,4 @@ -const API_BASE = 'http://localhost:8000'; +const API_BASE = window?.ENV?.API_BASE || ''; export async function fetchDiagram() { const res = await fetch(`${API_BASE}/diagram/fetch`); diff --git a/labmap-chart/templates/frontend-deployment.yaml b/labmap-chart/templates/frontend-deployment.yaml index eaa85e1..85a30a7 100644 --- a/labmap-chart/templates/frontend-deployment.yaml +++ b/labmap-chart/templates/frontend-deployment.yaml @@ -17,3 +17,6 @@ spec: image: {{ .Values.frontend.image }}:{{ .Values.frontend.tag }} ports: - containerPort: {{ .Values.frontend.port }} + env: + - name: API_BASE + value: "https://{{ .Values.backend.ingress.host }}"