docker compose 환경에서 Vite HMR이 작동 안 합니다

3가지 문제가 동시에 일어납니다. 하나씩 해결합시다.

1) Vite가 컨테이너 외부에서 접속 못 함

// vite.config.ts
export default defineConfig({
  server: {
    host: '0.0.0.0',         // ← 컨테이너 외부 노출
    port: 5173,
    strictPort: true,
    watch: {
      usePolling: true,      // ← Docker volume에서 fs 이벤트 안 옴
      interval: 100,
    },
    hmr: {
      host: 'localhost',     // 브라우저가 접속하는 호스트
      port: 5173,
    },
  },
})

가장 흔한 누락 — usePolling: true. macOS·Windows의 Docker Desktop은 호스트 파일시스템 이벤트를 컨테이너 안으로 정확히 전달 못 합니다. polling으로 강제하면 해결.

2) node_modules anonymous volume이 빌드 결과물 막음

volumes:
  - .:/app
  - /app/node_modules        # 호스트의 node_modules가 컨테이너 안 것 덮어쓰지 않게
  - /app/.vite               # Vite cache도 별도 volume으로

3) 폴링 cost — CPU 사용량 증가

polling은 100ms마다 디렉터리 스캔이라 CPU 5~10% 정도 먹습니다. 다음 옵션으로 줄여보세요:

watch: {
  usePolling: true,
  interval: 1000,            // 1초로 늘림 (반응성 약간 ↓)
  ignored: [
    '**/node_modules/**',
    '**/.git/**',
    '**/dist/**',
  ],
}

Linux에서 Docker 돌리면 polling 안 써도 되니, OS별 분기:

watch: {
  usePolling: process.platform !== 'linux',
}

대안 — Docker 안에서 dev 서버 안 돌림

요즘은 dev 서버는 호스트에서 돌리고 DB·캐시만 Docker compose로 두는 패턴이 더 흔해요. 속도·HMR 모두 빨라집니다.