v3.2.0: Fix CORS - add nginx reverse proxy for production

- Add nginx to Dockerfile as reverse proxy
- Route /api/* to FastAPI, / to Next.js on single port 80
- Update all frontend components to use /api prefix in production
- Simplify docker-compose to single port 80
- Fixes CORS errors when deployed to remote servers

Dockerfile

@@ -21,13 +21,14 @@ RUN pip install --no-cache-dir -r requirements.txt
 # Copy backend source
 COPY backend/ ./
 
-# Stage 3: Production image with supervisor
+# Stage 3: Production image with nginx + supervisor
 FROM python:3.11-slim AS runner
 WORKDIR /app
 
-# Install Node.js and supervisor
+# Install Node.js, nginx, and supervisor
 RUN apt-get update && apt-get install -y \
     curl \
+    nginx \
     supervisor \
     && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
     && apt-get install -y nodejs \
@@ -50,6 +51,42 @@ COPY --from=backend-builder /backend ./backend
 # Copy data directory for prompts
 COPY --from=frontend-builder /app/data ./data
 
+# Create nginx config - reverse proxy /api to FastAPI
+RUN cat > /etc/nginx/sites-available/default <<'EOF'
+server {
+    listen 80;
+    server_name _;
+
+    # Proxy /api/* to FastAPI backend (strip /api prefix)
+    location /api/ {
+        proxy_pass http://127.0.0.1:8000/;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        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_cache_bypass $http_upgrade;
+        proxy_read_timeout 300s;
+        proxy_connect_timeout 75s;
+    }
+
+    # Proxy everything else to Next.js
+    location / {
+        proxy_pass http://127.0.0.1:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        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_cache_bypass $http_upgrade;
+    }
+}
+EOF
+
 # Create supervisor config
 RUN mkdir -p /var/log/supervisor
 COPY <<EOF /etc/supervisor/conf.d/supervisord.conf
@@ -59,6 +96,15 @@ user=root
 logfile=/var/log/supervisor/supervisord.log
 pidfile=/var/run/supervisord.pid
 
+[program:nginx]
+command=/usr/sbin/nginx -g "daemon off;"
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=0
+
 [program:nextjs]
 command=node /app/server.js
 directory=/app
@@ -84,12 +130,12 @@ EOF
 # Set permissions
 RUN chown -R appuser:appgroup /app /var/log/supervisor
 
-# Expose ports
+# Expose only port 80 (nginx) - internal ports 3000 and 8000 not needed externally
-EXPOSE 3000 8000
+EXPOSE 80
 
-# Health check
+# Health check via nginx
-HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+HEALTHCHECK --interval=30s --timeout=10s --start-period=10s --retries=3 \
-    CMD curl -f http://localhost:3000 && curl -f http://localhost:8000/health || exit 1
+    CMD curl -f http://localhost/api/health || exit 1
 
 # Run supervisor
 CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

components/Gallery.tsx

@@ -8,8 +8,8 @@ import { Download, Maximize2, Sparkles, Trash2, X, ChevronLeft, ChevronRight, Co
 import { VideoPromptModal } from './VideoPromptModal';
 import { EditPromptModal } from './EditPromptModal';
 
-// FastAPI backend URL
+// FastAPI backend URL - /api in production (nginx proxy), localhost in dev
-const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || (typeof window !== 'undefined' && window.location.hostname !== 'localhost' ? '/api' : 'http://localhost:8000');
 
 // Helper function to get proper image src (handles URLs vs base64)
 const getImageSrc = (data: string): string => {

components/PromptHero.tsx

@@ -5,8 +5,8 @@ import { useStore, ReferenceCategory } from "@/lib/store";
 import { cn } from "@/lib/utils";
 import { Sparkles, Maximize2, X, Hash, AlertTriangle, Upload, Brain, Settings, Settings2 } from "lucide-react";
 
-// FastAPI backend URL
+// FastAPI backend URL - /api in production (nginx proxy), localhost in dev
-const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || (typeof window !== 'undefined' && window.location.hostname !== 'localhost' ? '/api' : 'http://localhost:8000');
 
 const IMAGE_COUNTS = [1, 2, 4];
 

components/PromptLibrary.tsx

@@ -7,8 +7,8 @@ import { cn } from '@/lib/utils';
 import { Prompt, PromptCache } from '@/lib/types';
 import { motion, AnimatePresence } from 'framer-motion';
 
-// FastAPI backend URL
+// FastAPI backend URL - /api in production (nginx proxy), localhost in dev
-const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || (typeof window !== 'undefined' && window.location.hostname !== 'localhost' ? '/api' : 'http://localhost:8000');
 
 export function PromptLibrary({ onSelect }: { onSelect?: (prompt: string) => void }) {
     const { setPrompt, settings } = useStore();

components/UploadHistory.tsx

@@ -5,8 +5,8 @@ import { useStore, ReferenceCategory } from '@/lib/store';
 import { Clock, Upload, Trash2, CheckCircle, X, Film, Check } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
-// FastAPI backend URL
+// FastAPI backend URL - /api in production (nginx proxy), localhost in dev
-const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || (typeof window !== 'undefined' && window.location.hostname !== 'localhost' ? '/api' : 'http://localhost:8000');
 
 export function UploadHistory() {
     const {

docker-compose.yml

@@ -4,8 +4,7 @@ services:
     container_name: kv-pix
     restart: unless-stopped
     ports:
-      - "3000:3000" # Next.js frontend
+      - "80:80" # nginx serves both frontend and API
-      - "8000:8000" # FastAPI backend
     environment:
       - NODE_ENV=production
     volumes: