setup the API_BASE_URL in frontend

yejiyang · yejiyang · commit c8a6717da232 · 2025-06-15T21:37:39.000+02:00
diff --git a/README.md b/README.md
@@ -22,27 +22,33 @@ This repository contains a minimal Docker Compose setup for running
 
 ### Environment Variables
 
-When deploying pygeoapi in different environments (local, Kubernetes, etc.), the following environment variables should be set:
+When deploying in different environments (local, Kubernetes, etc.), the following environment variables should be set:
+
+#### Backend (pygeoapi):
 
 - `PYGEOAPI_SERVER_URL`: The external URL where pygeoapi will be accessible. This is used to generate correct links in the API responses.
   - For local development: `http://localhost:5000`
-  - For Kubernetes/production: Your domain, e.g., `https://your-domain.com`
+  - For Kubernetes/production: Your domain, e.g., `https://your-domain.com/api`
+
+#### Frontend:
+
+- `API_BASE_URL`: The URL where the frontend will connect to the backend API.
+  - For local development: Not needed (will default to `http://localhost:5000`)
+  - For Docker Compose: `http://backend:5000`
+  - For Kubernetes/production: `/api` (path to the backend service through the ingress)
 
 ### Kubernetes Deployment
 
 To deploy to Kubernetes:
 
-1. Edit the `k8s-pygeoapi.yaml` file to set the correct `PYGEOAPI_SERVER_URL` for your environment
-2. Apply the Kubernetes configuration:
-   ```bash
-   kubectl apply -f k8s-pygeoapi.yaml
-   ```
+1. Update domain and path settings in `k8s-deployment.yaml`
+2. Apply the configuration:
 
-The Kubernetes deployment includes:
+```bash
+kubectl apply -f k8s-deployment.yaml
+```
 
-- A Deployment for pygeoapi
-- A Service to expose pygeoapi within the cluster
-- An Ingress resource (optional) to expose pygeoapi externally
+This will deploy both the frontend and backend services with the proper configuration.
 
 The backend Docker image now generates the OpenAPI document at build
 time and exposes it via the `PYGEOAPI_OPENAPI` environment variable.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -20,6 +20,8 @@ services:
     container_name: frontend
     ports:
       - "8080:80"
+    environment:
+      - API_BASE_URL=${API_BASE_URL:-http://backend:5000}
     depends_on:
       - backend
 
@@ -47,6 +49,8 @@ services:
     container_name: frontend
     ports:
       - "8080:80"
+    environment:
+      - API_BASE_URL=http://backend-local:5000
     depends_on:
       - backend-local
     profiles:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -4,6 +4,10 @@ COPY package.json package-lock.json ./
 COPY build.js ./
 RUN npm ci
 COPY src ./src
+
+# Build with the API_BASE_URL environment variable if provided
+ARG API_BASE_URL
+ENV API_BASE_URL=${API_BASE_URL}
 RUN npm run build
 
 FROM nginx:1.28-alpine
diff --git a/frontend/build.js b/frontend/build.js
@@ -9,6 +9,15 @@ fs.mkdirSync(path.join(__dirname, "dist", "js"), { recursive: true });
 const srcHtmlPath = path.join(__dirname, "src", "index.html");
 let html = fs.readFileSync(srcHtmlPath, "utf8");
 html = html.replace("{{VERSION}}", pkg.version);
+
+// Add API base URL from environment variable if available
+const apiBaseUrl = process.env.API_BASE_URL || "";
+if (apiBaseUrl) {
+  // Add a script tag to set the API_BASE_URL global variable
+  const scriptTag = `<script>window.API_BASE_URL = "${apiBaseUrl}";</script>`;
+  html = html.replace("</head>", `${scriptTag}\n</head>`);
+}
+
 const distHtmlPath = path.join(__dirname, "dist", "index.html");
 fs.writeFileSync(distHtmlPath, html);
 
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -114,7 +114,7 @@
     const apiBaseUrl =
       window.location.hostname === "localhost"
         ? "http://localhost:5000"
-        : "/api";
+        : (window.API_BASE_URL || "/api");
 
     // Initialize map using the function from basemap-layer.js
     const map = initializeMap("map");
diff --git a/k8s-deployment.yaml b/k8s-deployment.yaml
@@ -0,0 +1,141 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: pygeoapi
+  labels:
+    app: pygeoapi
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: pygeoapi
+  template:
+    metadata:
+      labels:
+        app: pygeoapi
+    spec:
+      containers:
+        - name: pygeoapi
+          image: ghcr.io/yejiyang/pygeoapi-w-global-tsunami-data:latest
+          ports:
+            - containerPort: 5000
+          readinessProbe:
+            exec:
+              command:
+                - /bin/bash
+                - -c
+                - "[ -f /tmp/health/init_complete ] && curl -s --max-time 10 http://localhost:5000/ > /dev/null"
+            initialDelaySeconds: 30
+            periodSeconds: 15
+            timeoutSeconds: 10
+            successThreshold: 1
+            failureThreshold: 10
+          livenessProbe:
+            httpGet:
+              path: /
+              port: 5000
+            initialDelaySeconds: 180
+            periodSeconds: 60
+            timeoutSeconds: 15
+            failureThreshold: 3
+          env:
+            - name: PYGEOAPI_CONFIG
+              value: /pygeoapi/local.config.yml
+            - name: PYGEOAPI_OPENAPI
+              value: /tmp/openapi.yml
+            - name: CONTAINER_NAME
+              value: pygeoapi
+            - name: CONTAINER_HOST
+              value: 0.0.0.0
+            - name: CONTAINER_PORT
+              value: "5000"
+            - name: PYGEOAPI_SERVER_URL
+              # The URL that users will access your service through - adjust based on your Kubernetes setup
+              value: "https://your-domain.com/api" # Replace with your actual domain and include /api path
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: pygeoapi
+spec:
+  selector:
+    app: pygeoapi
+  ports:
+    - port: 80
+      targetPort: 5000
+  type: ClusterIP
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: frontend
+  labels:
+    app: frontend
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: frontend
+  template:
+    metadata:
+      labels:
+        app: frontend
+    spec:
+      containers:
+        - name: frontend
+          image: ghcr.io/yejiyang/global-tsunami-risk-map-frontend:latest
+          ports:
+            - containerPort: 80
+          env:
+            - name: API_BASE_URL
+              # The URL where the backend API is accessible from frontend clients
+              value: "/api"
+          resources:
+            limits:
+              cpu: "0.5"
+              memory: "256Mi"
+            requests:
+              cpu: "0.2"
+              memory: "128Mi"
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: frontend
+spec:
+  selector:
+    app: frontend
+  ports:
+    - port: 80
+      targetPort: 80
+  type: ClusterIP
+---
+# Ingress controller configuration
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: geospatial-ingress
+  annotations:
+    # Add appropriate annotations for your ingress controller
+    # For example, for nginx:
+    # kubernetes.io/ingress.class: nginx
+    # nginx.ingress.kubernetes.io/rewrite-target: /
+spec:
+  rules:
+    - host: your-domain.com # Replace with your actual domain
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: frontend
+                port:
+                  number: 80
+          - path: /api/
+            pathType: Prefix
+            backend:
+              service:
+                name: pygeoapi
+                port:
+                  number: 80
diff --git a/k8s-frontend.yaml b/k8s-frontend.yaml
@@ -0,0 +1,75 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: frontend
+  labels:
+    app: frontend
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: frontend
+  template:
+    metadata:
+      labels:
+        app: frontend
+    spec:
+      containers:
+        - name: frontend
+          image: ghcr.io/yejiyang/global-tsunami-risk-map-frontend:latest
+          ports:
+            - containerPort: 80
+          env:
+            - name: API_BASE_URL
+              # The URL where the backend API is accessible from frontend clients
+              # This should match your ingress/service path for the backend
+              value: "/api"
+          resources:
+            limits:
+              cpu: "0.5"
+              memory: "256Mi"
+            requests:
+              cpu: "0.2"
+              memory: "128Mi"
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: frontend
+spec:
+  selector:
+    app: frontend
+  ports:
+    - port: 80
+      targetPort: 80
+  type: ClusterIP
+---
+# Optional: If you're using an Ingress controller
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: frontend-ingress
+  annotations:
+    # Add appropriate annotations for your ingress controller
+    # For example, for nginx:
+    # kubernetes.io/ingress.class: nginx
+    # nginx.ingress.kubernetes.io/rewrite-target: /
+spec:
+  rules:
+    - host: your-domain.com # Replace with your actual domain
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: frontend
+                port:
+                  number: 80
+          - path: /api/
+            pathType: Prefix
+            backend:
+              service:
+                name: pygeoapi
+                port:
+                  number: 80
diff --git a/k8s-pygeoapi.yaml b/k8s-pygeoapi.yaml
@@ -52,7 +52,7 @@ spec:
             - name: PYGEOAPI_SERVER_URL
               # The URL that users will access your service through - adjust based on your Kubernetes setup
               # This could be your ingress URL or load balancer address
-              value: "https://your-domain.com" # Replace with your actual domain
+              value: "https://your-domain.com/api" # Replace with your actual domain and include /api path
 ---
 apiVersion: v1
 kind: Service
