feat: dockerize client (nginx) and server (node) with docker-compose

client/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.env.local
+*.log

client/.env.production

@@ -0,0 +1,3 @@
+# En production Docker, nginx proxifie /socket.io vers le container server
+# Le client se connecte donc sur la même origine (pas de port différent)
+VITE_SERVER_URL=

client/Dockerfile

@@ -0,0 +1,19 @@
+# ── Stage 1 : build ──────────────────────────────────────────────────────────
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+# ── Stage 2 : serve with nginx ────────────────────────────────────────────────
+FROM nginx:1.27-alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

client/nginx.conf

@@ -0,0 +1,27 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Vue Router - renvoyer toutes les routes vers index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Proxy WebSocket + API vers le serveur Node
+    location /socket.io/ {
+        proxy_pass         http://server:3000;
+        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;
+    }
+
+    # Compression gzip
+    gzip on;
+    gzip_types text/plain text/css application/javascript application/json;
+    gzip_min_length 1024;
+}

client/src/services/socket.js

@@ -4,9 +4,12 @@ let socket = null
 
 export function useSocket() {
   if (!socket) {
-    socket = io(import.meta.env.VITE_SERVER_URL || 'http://localhost:3000', {
-      autoConnect: true
-    })
+    // En dev : pointe vers localhost:3000
+    // En prod Docker : connexion sur la même origine (nginx proxifie /socket.io)
+    const url = import.meta.env.VITE_SERVER_URL || (
+      import.meta.env.PROD ? window.location.origin : 'http://localhost:3000'
+    )
+    socket = io(url, { autoConnect: true })
   }
   return socket
 }