Allow docker image to work off of environment variables instead of hardcoded on build

docker/Dockerfile

@@ -6,13 +6,10 @@
 FROM node:16 AS builder
 # Set working directory
 WORKDIR /app
-ARG VITE_BACKEND_DOMAIN
-ARG VITE_INSTANCE_DOMAIN
-ARG VITE_HTTPS
 
-ENV VITE_BACKEND_DOMAIN $VITE_BACKEND_DOMAIN
+ENV VITE_BACKEND_DOMAIN VITE_BACKEND_DOMAIN_PLACEHOLDER
-ENV VITE_INSTANCE_DOMAIN $VITE_INSTANCE_DOMAIN
+ENV VITE_INSTANCE_DOMAIN VITE_INSTANCE_DOMAIN_PLACEHOLDER
-ENV VITE_HTTPS $VITE_HTTPS
+ENV VITE_HTTPS VITE_HTTPS_PLACEHOLDER
 # Copy all files from current directory to working dir in image
 COPY . .
 # install node modules and build assets
@@ -22,11 +19,13 @@ RUN npm i && npm run build
 FROM nginx:alpine
 COPY ./nginx.conf /etc/nginx/nginx.conf
 # Set working directory to nginx asset directory
-WORKDIR /usr/share/nginx/html
+RUN mkdir /app
-# Remove default nginx static assets
-RUN rm -rf ./*
 # Copy static assets from builder stage
-COPY --from=builder /app/dist .
+COPY --from=builder /app/dist /app
 # Containers run nginx with global directives and daemon off
 EXPOSE 80
-ENTRYPOINT ["nginx", "-g", "daemon off;"]
+
+# Overriding the default NGINX container behavior
+COPY ./substitute_environment_variables.sh ./substitute_environment_variables.sh
+RUN chmod +x /substitute_environment_variables.sh
+ENTRYPOINT ["/substitute_environment_variables.sh"]

docker/docker-compose.yml

@@ -4,9 +4,10 @@ services:
     build: 
       context: "../"
       dockerfile: ./docker/Dockerfile
-      args : 
-        - VITE_BACKEND_DOMAIN=localhost:7000
-        - VITE_INSTANCE_DOMAIN=localhost:80
-        - VITE_HTTPS=false
     ports:
       - "8080:80"
+    environment: 
+      - VITE_BACKEND_DOMAIN=localhost:7000
+      - VITE_INSTANCE_DOMAIN=localhost:80
+      - VITE_HTTPS=false
+

nginx.conf

@@ -9,7 +9,7 @@ http {
 
 
             location / {
-                root /usr/share/nginx/html;
+                root /app;
                 index index.html;
                 try_files $uri $uri/ /index.html;
             }

substitute_environment_variables.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+
+ROOT_DIR=/app
+
+# Replace env vars in files served by NGINX
+for file in $ROOT_DIR/assets/*.js $ROOT_DIR/index.html;
+do
+  sed -i 's|VITE_BACKEND_DOMAIN_PLACEHOLDER|'${VITE_BACKEND_DOMAIN}'|g' $file
+  sed -i 's|VITE_INSTANCE_DOMAIN_PLACEHOLDER|'${VITE_INSTANCE_DOMAIN}'|g' $file
+  sed -i 's|VITE_HTTPS_PLACEHOLDER|'${VITE_HTTPS}'|g' $file
+  # Your other variables here...
+done
+
+# Starting NGINX
+nginx -g 'daemon off;'