docker 웹 개발환경(nginx + vite-react + 기타 등등)에서 auto-reloading이 안됩니다.

Question

안녕하세요, 선배님들? 오랜만에 뵙습니다.웹 서비스를 개발하고 배포하기 위한 모노레포 boilerplate를 만들고있습니다. 정확히는 boilerplate를 생성하는 쉘스크립트를 짜고있는데요, 스크립트를 실행하면 생성되는 것의 구성은 간략히 보면 아래와 같습니다.├── apps │ ├── one │ │ ├── dev-ops // 개발용 서버가 되는 docker-compose.dev.yml과 배포용이 되는 ...prod.yml을 모두 가짐 │ │ │ // one, two, ... 각 앱마다 로컬(컨테이너 입장에서 외부인)에서 접근하는 포트를 부여받아 │ │ │ // 개발용 서버인 nginx를 실행. 이 안에서 upstream으로 지정한 front/back이 소통 │ │ ├── client │ │ ├── server │ │ └── database │ ├── two │ └── tree ├── commanders // 외부 배포용 웹서버인 nginx와 apps 디렉토리 내의 │ // 여러 프로젝트들을 dev 또는 prod 버전으로 켜고 끄는 스크립트 └── dev-ops ├── docker-compose.global.yml // 80번 포트 등 시스템 외부 배포 전용 nginx와 certbot │ // apps 디렉토리에 앱이 추가될때마다 upstream과 proxy로 server를 생성 └── nginx └── conf.d외부 배포용 nginx서버가 있고, apps/ 안에 각 앱들의 개발 전용 서버가 있습니다. 도커컴포즈로 각각 띄워보면 배포용 서버도, 각각의 개발용 서버도 잘 띄워지고 잘 돌아갑니다.개발환경을 테스트하기 위해 일단 backend 와 db 컨테이너는 주석처리하구요,front(client)부분에 vite 로도, create-react-app으로도 react, typescript 생성해서 테스트 했습니다. 그런데 제목에 쓴것처럼 auto-reloading이 안됩니다. 브라우저에서 새로고침을 꼭 해줘야만 합니다.docker volume으로 연결해뒀기때문에 로컬에서 소스를 수정해보면 파일 저장 할 때마다 따박따박 client 컨테이너의 로그에 찍힙니다. 아래처럼이요.[sy&#64;sy-230620 client]$ docker logs dev_client_one > vite-project&#64;0.0.0 dev > vite --port 3000 --host 0.0.0.0 VITE v5.0.6 ready in 110 ms ➜ Local: http://localhost:3000/ ➜ Network: http://172.20.0.2:3000/ 8:23:29 AM [vite] vite.config.ts changed, restarting server... 8:23:29 AM [vite] server restarted. 8:24:11 AM [vite] hmr update /src/App.tsx 8:24:25 AM [vite] hmr update /src/App.tsx스스로 추측컨데 이게 vite로 프로젝트를 생성한 client컨테이너 내부에서는 auto-reloading이 잘 되고있는거 아닌가싶습니다. 단지 nginx서버가 돌아가는 컨테이너를 한번 거치면서 그... 리로딩 명령(?)이랄까 이것이 종착지인 (제 눈에 보이는)로컬 브라우저까지 닿지 않는것 아닐까 합니다.왜냐면 vite가 제공하는 개발용 서버는 로컬머신이 아니라 컨테이너 내부에서 돌아가고있으니까요. 컨테이너에게 무슨 특별한 권한을 준것도 없는데 별도 설정 없이 로컬환경의 브라우저를 컨트롤하진 못할것같아요.왜냐면 vite가 제공하는 개발용 서버는 자기 자신에 대한 권한은 있어도, 웹서버로 활동중인 nginx에게까지 리로딩을 해라마라 하지 못할것같아요. 별도 설정이 없다면. 그니까 자기 업데이트 됐다고 (dev)nginx가 실행중인 컨테이너에다가 계속 알려주긴 하는데, nginx단에서 그냥 묵살되는거라고 예상합니다.실제로 같은 소스에서컨테이너로 만들지 않고 로컬환경에서 바로 vite가 제공하는 개발용 서버를 띄우거나(제 눈에 보이는)로컬환경의 포트와 연결시킨 컨테이너로 만들고 그 안에서 vite가 제공하는 개발용 서버를 띄우면소스 수정/저장 시 바로바로 auto-reloading이 됩니다. 즉 vite가 제공하는 개발서버나 도커는 아무 잘못이 없는것같다는거죠.다만 제가 auto-reloading이 어떤 방식으로 진행되는지 지식이 전무해서... 위와같이 나름대로 추측해서 docker, nginx, auto reloading, react, vite 등 조합해서 검색해봐도 상황파악을 명확히 하기 어렵네요.제 추측이 맞는지, 또는 제가 모르는 어떤 맥락이 있는지 등 조언해 주시면 감사하겠습니다.읽어주셔서 감사합니다! 따듯한 12월 되세요!** 참고로 개발용 서버는 아래와같이 띄워졌습니다.docker-compose.dev.ymlversion: '3.8' services: dev_client_one: container_name: dev_client_one build: context: ../client/ dockerfile: dev.Dockerfile image: 'dev_client_one' command: npm run dev volumes: - ../client/:/app/ env_file: - ../client/configs/.env.dev networks: - dev-one-net expose: - 3000 dev_nginx_one: depends_on: - dev_client_one container_name: dev_nginx_one image: 'nginx:latest' volumes: - ../dev-ops/nginx/conf.dev.d/:/etc/nginx/conf.d/ ports: - '83:80' networks: - dev-one-net networks: dev-one-net: external: truenginx/default.confupstream dev_client_one { server dev_client_one:3000; } server { listen 80; listen [::]:80; location / { proxy_pass http://dev_client_one; } }

Clickin · Answer

공식문서에 힌트가 있네요https://ko.vitejs.dev/config/server-options.html#server-watch기본적으로 파일 시스템 변경을 감지하기 때문에 격리된 환경에서 reload하려면 감지가 안될겁니다.이 경우에는 해당 블로그에서 제시하는 방법을 사용해보실 수 있겠습니다.https://velog.io/&#64;sangwoo_le/vue-vite-vite-hot-reload%EA%B0%80-%EB%8F%99%EC%9E%91%ED%95%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EA%B2%BD%EC%9A%B0Polling을 사용하면 정말 즉각적인 반응까진 아니라도 hot reload 가능할 것으로 보입니다.

docker 웹 개발환경(nginx + vite-react + 기타 등등)에서 auto-reloading이 안됩니다.

1개의 답변

#hot-reloading 목록