Dockerize

frontend/.dockerignore

@@ -0,0 +1,9 @@
+node_modules
+npm-debug.log
+dist
+.git
+.gitignore
+*.md
+.env
+.DS_Store
+*.log

frontend/.env.example

@@ -0,0 +1,4 @@
+# Frontend Environment Variables
+# Use /api for production (proxied by nginx)
+# Use http://localhost:8000 for local development
+VITE_API_URL=/api

frontend/.env.production

@@ -0,0 +1 @@
+VITE_API_URL=/api

frontend/Dockerfile

@@ -0,0 +1,29 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code and config files
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy custom nginx config
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Copy built application from builder
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -0,0 +1,58 @@
+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;
+
+    server {
+        listen 80;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # API and WebSocket proxy to backend
+        location /api/ {
+            proxy_pass http://backend:8000/;
+            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;
+        }
+
+        # WebSocket proxy for Socket.IO
+        location /socket.io/ {
+            proxy_pass http://backend:8000/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;
+        }
+
+        # 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";
+        }
+    }
+}

frontend/src/pages/Editor.tsx

@@ -99,8 +99,14 @@ export const Editor: React.FC = () => {
   useEffect(() => {
     if (!id || !isReady) return;
 
-    const socket = io(import.meta.env.VITE_API_URL || 'http://localhost:8000', {
-      transports: ['websocket'],
+    // For production/Docker, connect to same origin. For dev, use localhost:8000
+    const socketUrl = import.meta.env.VITE_API_URL === '/api' 
+      ? window.location.origin 
+      : (import.meta.env.VITE_API_URL || 'http://localhost:8000');
+    
+    const socket = io(socketUrl, {
+      path: '/socket.io',
+      transports: ['websocket', 'polling'],
     });
     socketRef.current = socket;