일단해보는거지

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..

[UI 컴포넌트 라이브러리] 1. Typescript로 React 컴포넌트 만들고 Rollup으로 빌드하기 💡 스토리북의 디자인시스템 튜토리얼을 진행하고 오시는 것을 추천합니다. 튜토리얼을 진행하고 오셨다면 예제로 사용할 소스코드가 있을 것입니다. 해당 코드들 위에서 아주 간단한 Input 컴 mitchellglobal.tistory.com 이번에는 1편에 이어서 빌드한 소스를 만들어둔 소스를 필요한 곳에서 사용할 수 있도록 NPM registry에 배포하고 프로젝트에서 불러와 사용하는 방법을 공유하겠습니다. 전체적으로 다음과 같은 내용을 학습하게 되겠습니다. 오픈소스로 라이브러리 배포하기 Private으로 라이브러리 배포하기 Github Action으로 배포 자동화하기 Docker 환경에서 Privat..

드디어! 오랜 문제를 해결했습니다. 절대로 해결하지 못할 것 같던 문제를 해결하고 공유하게 되어서 기쁘네요 ㅎㅎ 어쩌다 이런일이? 도커환경에서 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 ..