feat: use nginx chainguard image instead of alpine to fix vulnerabilities

Dockerfile

@@ -1,5 +1,9 @@
 # Arguments
 ARG NODE_VERSION=lts-alpine
+ARG API_BASE_URL=http://localhost:5050
+ARG AUTH_ENABLED=FALSE
+ARG PAYER_SIM_BRAND_ICON=""
+ARG PAYEE_SIM_BRAND_ICON=""
 
 # NOTE: Ensure you set NODE_VERSION Build Argument as follows...
 #
@@ -28,25 +32,48 @@ COPY index.html vite.config.js eslint.config.js tsconfig.json /opt/app/
 
 RUN NODE_OPTIONS="--max-old-space-size=4096" npm run build
 
-FROM nginx:1.28-alpine
-WORKDIR /usr/share/nginx/html
+# Use an intermediate stage with a shell to prepare nginx configuration
+FROM alpine:3.19 as config
+WORKDIR /tmp
 
-# Replace the nginx config files
-RUN rm -f /etc/nginx/conf.d/default.conf /etc/nginx/nginx.conf
-COPY nginx/nginx.conf /etc/nginx/nginx.conf
+# Environment variables
+ARG API_BASE_URL
+ARG AUTH_ENABLED
+ARG PAYER_SIM_BRAND_ICON
+ARG PAYEE_SIM_BRAND_ICON
 
-# Create a non-root user: ml-user
-RUN adduser -D ml-user
+# Copy nginx config
+COPY nginx/nginx.conf /tmp/nginx.conf
+COPY nginx/prestart.sh /tmp/prestart.sh
 
-# Change permissions for nginx folders
-RUN chown -R ml-user:ml-user /var/log/nginx
-RUN chown -R ml-user:ml-user /var/cache/nginx
-RUN chown -R ml-user:ml-user /usr/share/nginx
+# Create necessary directories for Chainguard nginx
+RUN mkdir -p /tmp/var/lib/nginx/tmp \
+    /tmp/var/run \
+    /tmp/etc/nginx \
+    /tmp/usr/share/nginx/html
 
-USER ml-user
+# Copy build artifacts
+COPY --from=builder /opt/app/build /tmp/usr/share/nginx/html/
 
-COPY --chown=ml-user --from=builder /opt/app/build .
-COPY nginx/start.sh /usr/share/nginx/start.sh
+# Apply environment variable substitution
+RUN chmod +x /tmp/prestart.sh && \
+    cd /tmp && \
+    API_BASE_URL=${API_BASE_URL} \
+    AUTH_ENABLED=${AUTH_ENABLED} \
+    PAYER_SIM_BRAND_ICON="${PAYER_SIM_BRAND_ICON}" \
+    PAYEE_SIM_BRAND_ICON="${PAYEE_SIM_BRAND_ICON}" \
+    ./prestart.sh
 
+# Final image
+FROM cgr.dev/chainguard/nginx:latest
+
+# Copy pre-prepared nginx configuration
+COPY --from=config /tmp/nginx.conf /etc/nginx/nginx.conf
+
+# Copy the prepared html directory and required tmp/run directories
+COPY --from=config /tmp/usr/share/nginx/html /usr/share/nginx/html
+COPY --from=config /tmp/var/lib/nginx/tmp /var/lib/nginx/tmp
+COPY --from=config /tmp/var/run /var/run
+
+# Configuration done - use the default entrypoint/cmd
 EXPOSE 6060
-CMD ["sh", "/usr/share/nginx/start.sh"]

docker-compose.yml

@@ -1,16 +1,43 @@
 version: "3.7"
 
 services:
+  # Init container to prepare static files with environment variables
+  config-init:
+    image: alpine:3.19
+    volumes:
+      - app-html:/app-html
+      - ./nginx/start.sh:/start.sh
+    environment:
+      - API_BASE_URL=http://localhost:5050
+      - AUTH_ENABLED=FALSE
+      # - PAYEE_SIM_BRAND_ICON=some_image
+    command:
+      - /bin/sh
+      - -c
+      - |
+        cp -r /usr/share/nginx/html/* /app-html/ || true
+        chmod +x /start.sh
+        sh /start.sh
+
+  # Main application container
   mojaloop-testing-toolkit-ui:
     image: mojaloop-testing-toolkit-ui:local
     build:
       context: .
+      args:
+        - API_BASE_URL=http://localhost:5050
+        - AUTH_ENABLED=FALSE
+        # - PAYER_SIM_BRAND_ICON=some_image
+        # - PAYEE_SIM_BRAND_ICON=some_image
     ports:
       - "6060:6060"
-    environment:
-      - API_BASE_URL=http://localhost:5050
-      - AUTH_ENABLED=FALSE
-      # - PAYEE_SIM_BRAND_ICON=some_image
-    command:
-      - sh
-      - /usr/share/nginx/start.sh
+    volumes:
+      - app-html:/usr/share/nginx/html
+    tmpfs:
+      - /var/lib/nginx/tmp
+      - /var/run
+    depends_on:
+      - config-init
+
+volumes:
+  app-html:

nginx/nginx.conf

@@ -1,6 +1,6 @@
 # auto detects a good number of processes to run
 worker_processes auto;
-pid /usr/share/nginx/nginx.pid;
+pid /var/run/nginx.pid;
 
 #Provides the configuration file context in which the directives that affect connection processing are specified.
 events {

nginx/prestart.sh

@@ -0,0 +1,22 @@
+#!/bin/sh
+# This script is used during the Docker build to substitute environment variables
+
+# Default values if not provided
+API_BASE_URL=${API_BASE_URL:-http://localhost:5050}
+echo "Applying API_BASE_URL: ${API_BASE_URL}"
+AUTH_ENABLED=${AUTH_ENABLED:-FALSE}
+PAYER_SIM_BRAND_ICON=${PAYER_SIM_BRAND_ICON:-}
+PAYEE_SIM_BRAND_ICON=${PAYEE_SIM_BRAND_ICON:-}
+
+# Substitute environment variables in all HTML and JS files
+find /usr/share/nginx/html -type f -name "*.html" -o -name "*.js" | xargs sed -i "s|TTK_API_BASE_URL|$API_BASE_URL|g"
+find /usr/share/nginx/html -type f -name "*.html" -o -name "*.js" | xargs sed -i "s|TTK_AUTH_ENABLED|$AUTH_ENABLED|g"
+
+# Only substitute these if they're set
+if [ ! -z "$PAYER_SIM_BRAND_ICON" ]; then
+    find /usr/share/nginx/html -type f -name "*.html" -o -name "*.js" | xargs sed -i "s|TTK_PAYER_SIM_BRAND_ICON|$PAYER_SIM_BRAND_ICON|g"
+fi
+
+if [ ! -z "$PAYEE_SIM_BRAND_ICON" ]; then
+    find /usr/share/nginx/html -type f -name "*.html" -o -name "*.js" | xargs sed -i "s|TTK_PAYEE_SIM_BRAND_ICON|$PAYEE_SIM_BRAND_ICON|g"
+fi 

nginx/start.sh

@@ -1,3 +1,7 @@
+# This script is not used directly in the Chainguard nginx image since it's distroless
+# The functionality is now built into the image at build time
+# Keeping this file for reference only
+
 if [[ ! -z "${API_BASE_URL}" ]]; then
     find /usr/share/nginx/html -type f -name "*.*" -exec sed -i -e "s|TTK_API_BASE_URL|$API_BASE_URL|g" {} \;
 fi