Merge pull request #13 from AdrianAcala/12-backend-url-config-fix

Add backend URL configuration for frontend and update nginx setup

README.md

@@ -114,6 +114,26 @@ docker compose up -d
 # Access the frontend at localhost:6767
 ```
 
+### Reverse Proxy / Traefik Setups (Docker)
+
+When running ExcaliDash behind Traefik, Nginx, or another reverse proxy, configure both containers so that API + WebSocket calls resolve correctly:
+
+- `FRONTEND_URL` (backend) must match the public URL that users hit (e.g. `https://excalidash.example.com`). This controls CORS and Socket.IO origin checks.
+- `BACKEND_URL` (frontend) tells the Nginx container how to reach the backend from inside Docker/Kubernetes. Override it if your reverse proxy exposes the backend under a different hostname.
+
+```yaml
+# docker-compose.yml example
+backend:
+  environment:
+    - FRONTEND_URL=https://excalidash.example.com
+frontend:
+  environment:
+    # For standard Docker Compose (default)
+    # - BACKEND_URL=backend:8000
+    # For Kubernetes, use the service DNS name:
+    - BACKEND_URL=excalidash-backend.default.svc.cluster.local:8000
+```
+
 # Development
 
 ## Clone the Repository

docker-compose.yml

@@ -32,6 +32,10 @@ services:
     container_name: excalidash-frontend
     ports:
       - "6767:80"
+    environment:
+      # Backend URL for nginx proxy (host:port format, no protocol)
+      # Override for reverse proxy setups (e.g., excalidash-backend.svc.cluster.local:8000)
+      - BACKEND_URL=backend:8000
     depends_on:
       - backend
     networks:

frontend/Dockerfile

@@ -25,12 +25,21 @@ RUN npm run build
 # Production stage
 FROM nginx:alpine
 
-# Copy custom nginx config
-COPY frontend/nginx.conf /etc/nginx/nginx.conf
+# Install envsubst (gettext) so we can template nginx config at runtime
+RUN apk add --no-cache gettext
+
+# Copy nginx config template (will be processed at runtime)
+COPY frontend/nginx.conf.template /etc/nginx/nginx.conf.template
+
+# Copy entrypoint script
+COPY frontend/docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh
 
 # Copy built application from builder
 COPY --from=builder /app/frontend/dist /usr/share/nginx/html
 
 EXPOSE 80
 
+# Use custom entrypoint to process nginx config template
+ENTRYPOINT ["/docker-entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"]

frontend/docker-entrypoint.sh

@@ -0,0 +1,22 @@
+#!/bin/sh
+# Alpine-based image uses /bin/sh (busybox ash), not bash
+set -e
+
+# Set default backend URL if not provided (host:port format, no protocol)
+export BACKEND_URL="${BACKEND_URL:-backend:8000}"
+
+echo "Configuring nginx with BACKEND_URL: ${BACKEND_URL}"
+
+# Substitute environment variables in nginx config template
+# Only substitute BACKEND_URL, preserve nginx variables like $http_upgrade
+envsubst '${BACKEND_URL}' < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf
+
+# Validate the generated nginx configuration before starting
+echo "Validating nginx configuration..."
+if ! nginx -t -c /etc/nginx/nginx.conf; then
+    echo "ERROR: nginx configuration validation failed" >&2
+    exit 1
+fi
+
+# Execute the main command (nginx)
+exec "$@"

frontend/nginx.conf.template

@@ -0,0 +1,78 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    sendfile on;
+    keepalive_timeout 65;
+    gzip on;
+    gzip_vary on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    # Set maximum request body size to 50MB to handle large drawings with embedded images
+    client_max_body_size 50M;
+
+    server {
+        listen 80;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # API and WebSocket proxy to backend
+        # BACKEND_URL is substituted at container startup (default: backend:8000)
+        location /api/ {
+            proxy_pass http://${BACKEND_URL}/;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection 'upgrade';
+            proxy_set_header Host $host;
+            proxy_cache_bypass $http_upgrade;
+            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;
+            
+            # Buffer and timeout settings for large payloads
+            proxy_buffering on;
+            proxy_buffer_size 4k;
+            proxy_buffers 8 4k;
+            proxy_busy_buffers_size 8k;
+            client_body_buffer_size 128k;
+            
+            # Timeouts for large uploads (300 seconds)
+            proxy_connect_timeout 300s;
+            proxy_send_timeout 300s;
+            proxy_read_timeout 300s;
+        }
+
+        # WebSocket proxy for Socket.IO
+        location /socket.io/ {
+            proxy_pass http://${BACKEND_URL}/socket.io/;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection 'upgrade';
+            proxy_set_header Host $host;
+            proxy_cache_bypass $http_upgrade;
+            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;
+            
+            # Longer timeouts for WebSocket connections
+            proxy_read_timeout 3600s;
+            proxy_send_timeout 3600s;
+        }
+
+        # Frontend routes
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        # Cache static assets
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+    }
+}