Dynamic Subpath Support for Deployment (#197)

BryonLewis · Bryon Lewis · web-flow · commit 2162c299c0f3 · 2025-06-30T09:30:51.000-04:00
* support dynamic subpath configs

* minio django access for prod deployment

* linting

---------

Co-authored-by: Bryon Lewis &lt;bryon@batai.kitware.com&gt;
diff --git a/bats_ai/settings.py b/bats_ai/settings.py
@@ -70,6 +70,7 @@ def DATABASES(self):  # noqa
 
 class DevelopmentConfiguration(BatsAiMixin, DevelopmentBaseConfiguration):
     SECRET_KEY = 'secretkey'  # Dummy value for local development configuration
+
     baseHost = 'localhost'
     if 'SERVERHOSTNAME' in os.environ:
         baseHost = os.environ['SERVERHOSTNAME']
@@ -96,6 +97,12 @@ class TestingConfiguration(BatsAiMixin, TestingBaseConfiguration):
 
 
 class KitwareConfiguration(BatsAiMixin, _BaseConfiguration):
+    subpath = os.environ.get('SUBPATH', '').strip('/')
+
+    # If SUBPATH is non-empty, prefix URLs accordingly, else use defaults
+    STATIC_URL = f'/{subpath}/static/' if subpath else '/static/'
+    LOGIN_URL = f'/{subpath}/accounts/login/' if subpath else '/accounts/login/'
+    USE_X_FORWARDED_HOST = True  # If behind a proxy
     SECRET_KEY = values.SecretValue()
     baseHost = 'batdetectai.kitware.com'
     if 'SERVERHOSTNAME' in os.environ:
@@ -115,7 +122,7 @@ class KitwareConfiguration(BatsAiMixin, _BaseConfiguration):
     MINIO_STORAGE_AUTO_CREATE_MEDIA_BUCKET = True
     MINIO_STORAGE_AUTO_CREATE_MEDIA_POLICY = 'READ_WRITE'
     MINIO_STORAGE_MEDIA_USE_PRESIGNED = True
-    MINIO_STORAGE_MEDIA_URL = f'http://{baseHost}:9000/django-storage'
+    MINIO_STORAGE_MEDIA_URL = f'https://{baseHost}/django-storage'
     ALLOWED_HOSTS = [baseHost]
     CSRF_TRUSTED_ORIGINS = [f'https://{baseHost}', f'https://{baseHost}']
     CORS_ORIGIN_WHITELIST = [f'https://{baseHost}', f'https://{baseHost}']
@@ -130,6 +137,12 @@ class HerokuProductionConfiguration(BatsAiMixin, HerokuProductionBaseConfigurati
 
 
 class AwsProductionConfiguration(BatsAiMixin, _BaseConfiguration):
+    SUBPATH = os.environ.get('SUBPATH', '').strip('/')
+
+    # If SUBPATH is non-empty, prefix URLs accordingly, else use defaults
+    STATIC_URL = f'/{SUBPATH}/static/' if SUBPATH else '/static/'
+    LOGIN_URL = f'/{SUBPATH}/accounts/login/' if SUBPATH else '/accounts/login/'
+
     DEFAULT_FILE_STORAGE = 'storages.backends.s3.S3Storage'
     baseHost = '[batdetectai.kitware.com](http://batdetectai.kitware.com/)'
     if 'SERVERHOSTNAME' in os.environ:
diff --git a/bats_ai/urls.py b/bats_ai/urls.py
@@ -1,3 +1,5 @@
+import os
+
 from django.conf import settings
 from django.contrib import admin
 from django.urls import include, path
@@ -9,15 +11,15 @@
 
 from .api import api
 
-# Some more specific Api Requests
 # OpenAPI generation
 schema_view = get_schema_view(
     openapi.Info(title='bats-ai', default_version='v1', description=''),
     public=True,
     permission_classes=(permissions.AllowAny,),
 )
 
-urlpatterns = [
+# Core URL patterns
+base_urlpatterns = [
     path('accounts/', include('allauth.urls')),
     path('oauth/', include('oauth2_provider.urls')),
     path('admin/', admin.site.urls),
@@ -29,6 +31,14 @@
     path('', include('django_large_image.urls')),
 ]
 
+# Add subpath prefix if SUBPATH is defined
+subpath = os.environ.get('SUBPATH', '').strip('/')
+if subpath:
+    urlpatterns = [path(f'{subpath}/', include(base_urlpatterns))]
+else:
+    urlpatterns = base_urlpatterns
+
+# Add debug toolbar if in DEBUG mode
 if settings.DEBUG:
     import debug_toolbar
 
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
@@ -26,11 +26,14 @@ function beforeEach(
   }
   next();
 }
+const subpath = import.meta.env.VITE_APP_SUBPATH?.replace(/\/+$/, '');
+const routerBase = subpath ? `/${subpath}/` : '/';
 
 
 function routerInit(){
   const router  = createRouter({
-    history: createWebHistory(),
+    base: routerBase,
+    history: createWebHistory(routerBase),
     routes: [
       {
         path: '/',
diff --git a/client/vite.config.js b/client/vite.config.js
@@ -2,9 +2,11 @@ import path from 'path';
 import { defineConfig } from 'vite';
 import Vue from '@vitejs/plugin-vue';
 import Vuetify from 'vite-plugin-vuetify';
+const subpath = process.env.VITE_APP_SUBPATH || './';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: subpath.endsWith('/') ? subpath : `${subpath}/`,
   envPrefix: 'VITE_APP_',
   define: {
     // Populated by netlify https://docs.netlify.com/configure-builds/environment-variables/
diff --git a/dev/.env.prod.docker-compose.template b/dev/.env.prod.docker-compose.template
@@ -20,3 +20,4 @@ VITE_APP_API_ROOT=https://batdetectai.kitware.com/api/v1
 VITE_APP_OAUTH_API_ROOT=https://batdetectai.kitware.com/oauth/
 VITE_APP_OAUTH_CLIENT_ID=HSJWFZ2cIpWQOvNyCXyStV9hiOd7DfWeBOCzo4pP
 VITE_APP_LOGIN_REDIRECT=https://batdetectai.kitware.com
+SUBPATH=
diff --git a/dev/client.Dockerfile b/dev/client.Dockerfile
@@ -1,36 +1,73 @@
-# Use official Node.js image as the base image for building Vue.js app
-FROM node:18 as build-stage
+# ========================
+# Build Stage (Vue + Env)
+# ========================
+FROM node:18 AS build-stage
 
-# Set working directory
 WORKDIR /app
 
-# Copy package.json and package-lock.json
-COPY client/package*.json ./
+# Build-time args
+ARG VITE_APP_API_ROOT
+ARG VITE_APP_OAUTH_API_ROOT
+ARG VITE_APP_OAUTH_CLIENT_ID
+ARG VITE_APP_LOGIN_REDIRECT
+ARG SUBPATH
 
-# Install dependencies
+# Copy and install dependencies
+COPY client/package*.json ./
 RUN npm install
 
-# Copy the rest of the application
+# Copy full client code
 COPY client .
 
-# Build the Vue.js application
+# Log and write .env.production
+RUN echo "SUBPATH=${SUBPATH}" && \
+    echo "VITE_APP_API_ROOT=${VITE_APP_API_ROOT}" >> .env.production && \
+    echo "VITE_APP_OAUTH_API_ROOT=${VITE_APP_OAUTH_API_ROOT}" >> .env.production && \
+    echo "VITE_APP_OAUTH_CLIENT_ID=${VITE_APP_OAUTH_CLIENT_ID}" >> .env.production && \
+    echo "VITE_APP_LOGIN_REDIRECT=${VITE_APP_LOGIN_REDIRECT}" >> .env.production && \
+    echo "VITE_APP_SUBPATH=${SUBPATH}" >> .env.production
+
+# Set environment for build
+ENV VITE_APP_API_ROOT=${VITE_APP_API_ROOT}
+ENV VITE_APP_OAUTH_API_ROOT=${VITE_APP_OAUTH_API_ROOT}
+ENV VITE_APP_OAUTH_CLIENT_ID=${VITE_APP_OAUTH_CLIENT_ID}
+ENV VITE_APP_LOGIN_REDIRECT=${VITE_APP_LOGIN_REDIRECT}
+ENV SUBPATH=${SUBPATH}
+ENV VITE_APP_SUBPATH=${SUBPATH}
+
+# Run Vue build
 RUN npm run build
 
-# Use NGINX as the final base image
-FROM nginx:alpine
+# ========================
+# Nginx Stage
+# ========================
+FROM nginx:alpine AS production-stage
 
-# Remove default NGINX website
+# Build-time ARG to get SUBPATH
+ARG SUBPATH
+
+# Clean default site
 RUN rm -rf /usr/share/nginx/html/*
 
-# Copy built Vue.js app to NGINX HTML directory
-COPY --from=build-stage /app/dist /usr/share/nginx/html
+# Copy build output
+COPY --from=build-stage /app/dist /tmp/dist
 
-RUN ls
-# Copy custom NGINX configuration
-COPY nginx/nginx.conf /etc/nginx/nginx.conf
 
-# Expose port 80
-EXPOSE 80
+# If SUBPATH is set, copy dist to subfolder and rewrite nginx config
+COPY nginx/nginx.subpath.template /nginx.subpath.template
+COPY nginx/nginx.conf /nginx.conf
 
-# Start NGINX
+# hadolint ignore=SC2016
+RUN if [ -n "$SUBPATH" ]; then \
+        echo "Copying Vue build to /usr/share/nginx/html/${SUBPATH}"; \
+        mkdir -p /usr/share/nginx/html/${SUBPATH}; \
+        cp -r /tmp/dist/* /usr/share/nginx/html/${SUBPATH}/; \
+        envsubst '${SUBPATH}' < /nginx.subpath.template > /etc/nginx/nginx.conf; \
+    else \
+        echo "No SUBPATH set. Using default nginx.conf"; \
+        cp /nginx.conf /etc/nginx/nginx.conf; \
+        cp -r /tmp/dist/* /usr/share/nginx/html/; \
+    fi
+
+EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]
diff --git a/dev/django.Dockerfile b/dev/django.Dockerfile
@@ -39,7 +39,7 @@ ARG BUILD_ENV
 
 # If not bind mounted we need bats_ai for celery deployment
 # The bind mount will override this directory
-COPY ./bats_ai /opt/django-project/
+COPY ./ /opt/django-project/
 
 # hadolint ignore=DL3013
 RUN set -ex \
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
@@ -51,7 +51,8 @@ services:
     # command: ""
     # Log printing via Rich is enhanced by a TTY
     tty: true
-    env_file: ./dev/.env.prod.docker-compose
+    env_file:
+      - ./dev/.env.prod.docker-compose
     networks:
       - django-nginx
     volumes:
@@ -80,7 +81,8 @@ services:
     ]
     # Docker Compose does not set the TTY width, which causes Celery errors
     tty: false
-    env_file: ./dev/.env.prod.docker-compose
+    env_file:
+      - ./dev/.env.prod.docker-compose
     networks:
       - django-nginx
     depends_on:
@@ -94,7 +96,14 @@ services:
     build:
       context: .
       dockerfile: ./dev/client.Dockerfile
-    env_file: ./dev/.env.prod.docker-compose
+      args:
+        VITE_APP_API_ROOT: ${VITE_APP_API_ROOT}
+        VITE_APP_OAUTH_API_ROOT: ${VITE_APP_OAUTH_API_ROOT}
+        VITE_APP_OAUTH_CLIENT_ID: ${VITE_APP_OAUTH_CLIENT_ID}
+        VITE_APP_LOGIN_REDIRECT: ${VITE_APP_LOGIN_REDIRECT}
+        SUBPATH: ${SUBPATH}
+    env_file:
+     - ./dev/.env.prod.docker-compose
     networks:
       - django-nginx
     depends_on:
@@ -118,7 +127,8 @@ services:
       - postgres:/var/lib/postgresql/data
 
   rabbitmq:
-    env_file: ./dev/.env.prod.docker-compose
+    env_file:
+      - ./dev/.env.prod.docker-compose
     image: rabbitmq:management
     networks:
       - django-nginx
@@ -133,7 +143,8 @@ services:
     # When run with a TTY, minio prints credentials on startup
     tty: true
     command: ["server", "/data", "--console-address", ":${DOCKER_MINIO_CONSOLE_PORT-9001}"]
-    env_file: ./dev/.env.prod.docker-compose
+    env_file:
+      - ./dev/.env.prod.docker-compose
     environment:
       - MINIO_ROOT_USER=${DJANGO_MINIO_STORAGE_ACCESS_KEY:-minioAccessKey}
       - MINIO_ROOT_PASSWORD=${DJANGO_MINIO_STORAGE_SECRET_KEY:-minioSecretKey}
diff --git a/nginx/nginx.subpath.template b/nginx/nginx.subpath.template
@@ -0,0 +1,81 @@
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+    client_max_body_size 100m;
+
+    server {
+        listen 80;
+
+        # Serve Vue.js static files
+
+        location /${SUBPATH} {
+            root /usr/share/nginx/html;
+            index index.html;
+            try_files $uri $uri/ /${SUBPATH}/index.html;
+        }
+
+        location /${SUBPATH}/api {
+            proxy_pass http://django:8000/${SUBPATH}/api;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_redirect off;
+        }
+
+        location /${SUBPATH}/oauth {
+            proxy_pass http://django:8000/${SUBPATH}/oauth;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_redirect off;
+        }
+
+        location /${SUBPATH}/static {
+            proxy_pass http://django:8000/${SUBPATH}/static;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_redirect off;
+        }
+
+        location /${SUBPATH}/admin {
+            proxy_pass http://django:8000/${SUBPATH}/admin;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-SCRIPT-NAME /${SUBPATH}/;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_redirect off;
+        }
+
+
+
+        location /${SUBPATH}/accounts {
+            proxy_pass http://django:8000/${SUBPATH}/accounts;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_redirect off;
+        }
+
+        location /django-storage {
+            proxy_pass http://minio:9000/django-storage;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_redirect off;
+        }
+
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -26,11 +26,14 @@ function beforeEach(`
`26`	`26`	`}`
`27`	`27`	`next();`
`28`	`28`	`}`
	`29`	`+const subpath = import.meta.env.VITE_APP_SUBPATH?.replace(/\/+$/, '');`
	`30`	+const routerBase = subpath ? `/${subpath}/` : '/';
`29`	`31`
`30`	`32`
`31`	`33`	`function routerInit(){`
`32`	`34`	`const router = createRouter({`
`33`		`- history: createWebHistory(),`
	`35`	`+ base: routerBase,`
	`36`	`+ history: createWebHistory(routerBase),`
`34`	`37`	`routes: [`
`35`	`38`	`{`
`36`	`39`	`path: '/',`