일단해보는거지

Vite devServer를 nginx proxy 하기 사내 개발환경에서 백엔드서버와 프론트엔드 서버들을 Docker 위에서 nginx의 리버스 프록시로 띄워서 사용하고 있었습니다. 그 중 Vite로 빌드한 React App과 devSever도 포함되었습니다. devServer와의 연결을 위해서 nginx에선 HTTP를 WebSocket으로 업그레이드 하느 설정이 반드시 필요합니다. 설정은 아래와 같이 간단합니다. server { listen 80; client_max_body_size 50M; location /api { proxy_pass http://backend; } location / { proxy_pass http://frontend; proxy_http_version 1.1; proxy_se..

드디어! 오랜 문제를 해결했습니다. 절대로 해결하지 못할 것 같던 문제를 해결하고 공유하게 되어서 기쁘네요 ㅎㅎ 어쩌다 이런일이? 도커환경에서 nginx를 사용하여 여러 서버들을 운용하고 있었는데, Vue 또한 그랬었죠. 도커의 Node 버전을 올림에 따라 Vue의 버전도 2.5.x에서 2.6.x 버전으로 그에 맞추어 업그레이드 해야만했습니다. 그리고 문제를 만나버렸습니다. 다른 것들은 괜찮았는데 HMR(Hot Module Replacement)가 제대로 동작하지 않았고 브라우저 콘솔에는 "WebSocket Connection to 'ws://some_ip/ws' failed~" 에러메시지만 나타났을 뿐이였습니다. 개발환경과 설정 Mac OS Docker and Nginx Vue 2.6.x (using ..