feat: handle dev server proxy by traefik

app/vite.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
     },
   },
   server: {
+    host: '0.0.0.0',
     proxy: {
       '/trpc': {
         target: process.env.API_TARGET || 'http://localhost:3000',

docker-compose.yml

@@ -8,14 +8,19 @@ services:
       - '--api.insecure=true'
       - '--providers.docker=true'
       - '--providers.docker.exposedbydefault=false'
+      - '--providers.file.directory=/etc/traefik/conf'
+      - '--providers.file.watch=true'
       - '--entrypoints.web.address=:80'
       - '--entrypoints.websecure.address=:443'
     ports:
       - '80:80'
       - '443:443'
       - '8080:8080'
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock:ro
+      - ./traefik/conf:/etc/traefik/conf
 
   db:
     image: mongo:6

traefik/conf/dev.yml

@@ -0,0 +1,24 @@
+http:
+  routers:
+    frontend:
+      rule: 'PathPrefix(`/`)'
+      service: frontend
+      entryPoints:
+        - web
+
+    backend:
+      rule: 'PathPrefix(`/api`, `/socket.io`, `/trpc`, `/api-docs`)'
+      service: backend
+      entryPoints:
+        - web
+
+  services:
+    frontend:
+      loadBalancer:
+        servers:
+          - url: 'http://host.docker.internal:5173'
+
+    backend:
+      loadBalancer:
+        servers:
+          - url: 'http://host.docker.internal:3000'