[DevContainer] 컨테이너 환경에서 Vite의 hot reload가 안될 경우 (with VSCode, svelte)

일반적인 로컬환경에서는 잘 동작하는 vite hot reload가 sveltekit 프로젝트를 devcontainer 내에서 코딩 및 디버그를 할 때제대로 동작하지 않고 매번 npm run dev 명령어로 새로 실행해줘야 수정사항이 반영되는 현상이 있었다.

해결방법은 로컬에 있는 소스코드를 bind 방식이 아닌, volume 으로 동작해야하는데, 이렇게 되면 빌드 후 생성된 volumne이 빈 volumne이 된다.

// See https://containers.dev/implementors/json_reference/ for configuration reference
{
    "name": "Node.js with firebase",
    "build": {
        "dockerfile": "Dockerfile"
    },  
    "workspaceFolder": "/workspace",
    "workspaceMount": "source=volume-name,target=/workspace,type=volume", /* 소스코드와 같이 있어도, 빌드되면 아무것도 없다. */
    "remoteUser": "node",
    "features": {
        "ghcr.io/devcontainers-contrib/features/firebase-cli:2": {
            "version": "latest"
        }
    },
    "customizations": {  
        "codespaces": {},
        "vscode": {
            "extensions": [
                "GitHub.copilot",
                "eamodio.gitlens",
                "svelte.svelte-vscode"
            ]
        },
        "container": {
            "name": "nodejs-firebase"
        }
    }
}

어떻게 해야하는지 방법을 찾아봤지만, 별도로 volumne에 복사해주거나 하는 수동 작업이 추가적으로 필요하다는 사실만 알게 되었다.
다행히 우회하는 방법이 있다. vscode 에서 Dev Containers: Clone Repository in Named Container Volume...를 이용하면 된다. 해당 명령어는 Dev Containers VSCode 확장을 설치해야 한다.

반드시 로컬 host 환경에도 소스가 있어야 하는게 아니라면 해당 방법을 통해 컨테이너 내 격리된 개발환경 구축하는것을 추천한다. sveltekit을 예로 들었지만, vite 를 사용하는 next, nuxt 환경도 동일한 이슈가 있다면 해당 방법을 사용해보기 바란다.