Add nginx reverse proxy for VM deployment

Configure nginx to proxy API and WebSocket requests to backend.
This allows the frontend to work on VMs without hardcoded localhost URLs.

Changes:
- nginx.conf: Added proxy rules for /api/, /ws, and /health
- client.ts: Use relative URLs in production mode
- websocket.ts: Dynamically construct WebSocket URL based on current host

This fixes ERR_BLOCKED_BY_CLIENT and connection issues on VMs.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/nginx.conf

@@ -9,6 +9,36 @@ server {
     gzip on;
     gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
 
+    # Proxy API requests to backend
+    location /api/ {
+        proxy_pass http://backend:8000/api/;
+        proxy_http_version 1.1;
+        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 WebSocket connections to backend
+    location /ws {
+        proxy_pass http://backend:8000/ws;
+        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_read_timeout 86400;
+    }
+
+    # Proxy health check to backend
+    location /health {
+        proxy_pass http://backend:8000/health;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+    }
+
     location / {
         try_files $uri $uri/ /index.html;
     }

frontend/src/api/client.ts

@@ -3,7 +3,10 @@
 import axios from 'axios';
 import type { Statistics, EventListResponse } from '../types';
 
-const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
+// Use relative URLs when running in production (nginx proxy)
+// Fall back to localhost for development
+const API_BASE_URL = import.meta.env.VITE_API_URL ||
+  (import.meta.env.MODE === 'production' ? '' : 'http://localhost:8000');
 
 const apiClient = axios.create({
   baseURL: API_BASE_URL,

frontend/src/api/websocket.ts

@@ -2,7 +2,21 @@
 
 import type { WebSocketMessage } from '../types';
 
-const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost:8000/ws';
+// Use relative WebSocket URL when running in production (nginx proxy)
+// Fall back to localhost for development
+const getWsUrl = () => {
+  if (import.meta.env.VITE_WS_URL) {
+    return import.meta.env.VITE_WS_URL;
+  }
+  if (import.meta.env.MODE === 'production') {
+    // Use current host with ws/wss protocol
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    return `${protocol}//${window.location.host}/ws`;
+  }
+  return 'ws://localhost:8000/ws';
+};
+
+const WS_URL = getWsUrl();
 
 type MessageHandler = (message: WebSocketMessage) => void;
 type ConnectionHandler = (connected: boolean) => void;