댓글 (0)
댓글 (0)
Next.js 개발 서버를 Docker로 띄우고, 소스 코드를 수정해도 HMR(Hot Module Replacement)가 동작하지 않았다.
관련 Github Discussion에서 참고한 결과, Turbopack을 포기하고 Webpack 방식으로 전환을 한 뒤, Polling 설정을 추가하는 방식이 있었다. next.config.ts에서 아래와 같은 옵션을 추가한다.
const nextConfig = {
webpack: (config) => {
config.watchOptions = {
poll: 1000,
aggregateTimeout: 300,
};
return config;
},
};
그리고 docker-compose.yaml 에 Polling 관련 옵션을 추가한다.
environment:
- WATCHPACK_POLLING=true
- CHOKIDAR_USEPOLLING=true
- CHOKIDAR_INTERVAL=500
Webpack으로 전환 후 HMR이 동작은 했지만, 리빌딩하는 시간이 너무 길었고 간헐적으로 저장 이후에 수정 사항이 없는데도 반복적으로 리빌딩되는 현상이 생겨 메모리를 너무 많이 사용하는 문제가 발생되었다.
Turbopack은 파일 변경을 감지할 때 inotify 메커니즘을 사용한다. 파일이 바뀌면 OS가 이벤트를 날려주고, Turbopack이 그걸 받아서 HMR을 트리거한다.
문제는 Windows Docker가 WSL2 위에서 동작하는데, 프로젝트 파일이 C:\Users\... 같은 Windows 파일 시스템에 있으면 inotify 이벤트가 컨테이너까지 제대로 전달되지 않는다는 거다.
Windows 파일시스템 (C:\) → WSL2 → Docker 컨테이너
↑
inotify 이벤트가 여기서 소실됨
Docker 공식 문서에서도 이 문제를 언급하고 있다.
"Linux containers only receive file change events, “inotify events”, if the original files are stored in the Linux filesystem. For example, some web development workflows rely on inotify events for automatic reloading when files have changed."
"if you mount files that live in the Windows file system (such as with
docker run -v /mnt/c/Users/Simon/windows-project:/sources <...>), you won’t get those performance benefits, as/mnt/cis actually a mountpoint exposing Windows files through a Plan9 file share. "
이미 설치된 Ubuntu가 있다면 이 단계는 건너뛰면 된다.
WSL2에 Ubuntu가 없다면 먼저 설치해야 한다. PowerShell을 관리자 권한으로 실행한 뒤 아래 명령어를 입력한다.
wsl --install -d Ubuntu-24.04
설치가 완료되면 자동으로 Ubuntu 터미널이 열리면서 계정 설정 화면이 나온다. username과 password를 설정하면 된다.
이후 접속은 윈도우 검색창에서 Ubuntu-24.04 를 검색하거나,
PowerShell에서 아래 명령어를 입력하면 된다.
wsl -d Ubuntu-24.04
로컬 프로젝트를 복사를 통해 이동시키거나, git에 올린 경우 git clone을 통해 가져온다.
초기에 node.js의 경우 윈도우에 있는 경로로 설정되어 있을 가능성이 높다.
which npm 명령어를 실행했을 때, /mnt/c/... 경로가 출려된다면 Windows npm을 바라보는 것이므로 별도로 nvm 등을 통해서 node.js를 설치해야 한다.
Docker Desktop → Settings → Resources → WSL Integration → Ubuntu-24.04 토글 활성화
이렇게 하면 Ubuntu에서도 docker compose up 해도 Docker Desktop에서 컨테이너가 생성이 된다.
Ctrl + Shift + P → WSL: Connect to WSL using Distro → Ubuntu-24.04 선택
접속 이후 Open Folder를 통해 2단계에서 복사한 프로젝트 폴더로 이동한 뒤, 파일을 확인하고 수정할 수 있다.
Windows + Docker 환경에서는 Turbopack의 HMR이 정상적으로 동작하지 않으므로, WSL2 파일시스템으로 옮겨서 실행해야 한다.