VITE_API_URL at runtime & optional traefik

.env

@@ -1,6 +1,10 @@
 # Domain
 # This would be set to the production domain with an env var on deployment
 DOMAIN=localhost
+# what base url the frontend should call:
+FRONTEND_API_TARGET=http://localhost
+# use traefik or not:
+TRAEFIK=true
 
 # Environment: local, staging, production
 ENVIRONMENT=local

docker-compose.override.yml

@@ -68,7 +68,6 @@ services:
     build:
       context: ./frontend
       args:
-        - VITE_API_URL=http://${DOMAIN?Variable not set}
         - NODE_ENV=development
 
 networks:

docker-compose.yml

@@ -102,8 +102,9 @@ services:
     build:
       context: ./frontend
       args:
-        - VITE_API_URL=https://${DOMAIN?Variable not set}
         - NODE_ENV=production
+    env_file:
+      - .env
     labels:
       - traefik.enable=true
       - traefik.docker.network=traefik-public

frontend/Dockerfile

@@ -9,15 +9,22 @@ RUN npm install
 
 COPY ./ /app/
 
-ARG VITE_API_URL=${VITE_API_URL}
+ARG VITE_API_URL=http://localhost
+# keep it like that!  The final URL will be replaced dynamically by docker-entry.sh (see below)
 
 RUN npm run build
 
-
 # Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
 FROM nginx:1
 
 COPY --from=build-stage /app/dist/ /usr/share/nginx/html
 
-COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+COPY ./nginx-traefik.conf /etc/nginx/conf.d/nginx-traefik.conf
+COPY ./nginx-standalone.conf /etc/nginx/conf.d/nginx-standalone.conf
+# .. docker-entry.sh will copy either of those two files into into default.conf
 COPY ./nginx-backend-not-found.conf /etc/nginx/extra-conf.d/backend-not-found.conf
+
+COPY ./docker-entry.sh /docker-entry.sh
+
+ENTRYPOINT ["/docker-entry.sh"]
+# CMD ["nginx", "-g", "daemon off;"]

frontend/docker-entry.sh

@@ -0,0 +1,19 @@
+#!/bin/sh
+if [ -z "$FRONTEND_API_TARGET" ]; then
+  echo "Error: FRONTEND_API_TARGET variable is not set."
+  exit 1
+fi
+# let's choose the correct nginx.conf file
+if [ -z "$TRAEFIK" ]; then
+    echo "NOT USING TRAEFIK BUT PLAIN NGINX INSTEAD"
+    cp /etc/nginx/conf.d/nginx-standalone.conf /etc/nginx/conf.d/default.conf
+else
+    echo "USING TRAEFIK"
+    cp /etc/nginx/conf.d/nginx-traefik.conf /etc/nginx/conf.d/default.conf    
+fi
+# replacing Vite's static env vars with injected one
+echo "SUBSTITUTING FRONTEND TARGET DOMAIN WITH ${FRONTEND_API_TARGET}"
+find "/usr/share/nginx/html" -type f -name "*.js" | while read file; do
+    perl -pi -e 's|\Qhttp://localhost\E|$ENV{FRONTEND_API_TARGET}|g' $file
+done
+nginx -g "daemon off;"

frontend/nginx-standalone.conf

@@ -0,0 +1,32 @@
+server {
+    listen 80;  # nginx listening to port 80
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri /index.html = 404;
+    }
+    # something that comes to port 80 with /api_v1/ is redirected
+    # since we're inside the container environment, we can use docker DNS,
+    # i.e. "frontend", "backend" and other container names
+    location /api/ {
+        proxy_pass_request_headers      on;
+        # proxy_set_header Origin         http://frontend;
+        proxy_pass                      http://backend:80/api/;
+    }
+    location /docs {
+        proxy_pass_request_headers      on;
+        # proxy_set_header Origin         http://frontend;
+        proxy_pass                      http://backend:80/docs;
+    }
+    #location /ws {
+    #    proxy_pass http://ws_service:ws_port;
+    #    proxy_http_version 1.1;
+    #    proxy_set_header Upgrade $http_upgrade;
+    #    proxy_set_header Connection "upgrade";
+    #}
+
+    #error_page   500 502 503 504  /50x.html;
+    #location = /50x.html {
+    #    root   /usr/share/nginx/html;
+    #}
+}