[이슈 로그] 네트워크 이슈 + 'yarn dev --host 0.0.0.0'

진짜 별거 아닌 이슈 로그이다. 근데 2시간 동안 삽질해서 한번 정리해본다.

 

상황

현재 사내 온프렘 서버로 바로 접근해서 작업하지 않고 router에 접근해서 작업하고 있다. router로 요청을 보내면 자동으로 라우팅된 요청이 내가 사용하는 서버로 가는 구조이다.

 

192.168.y.y 에 단순히 yarn dev로 react 애플리케이션을 실행했다. 그리고 라우터의 8051번 포트를 vite 애플리케이션이 사용하는 5173번 포트로 포트포워딩 해두었다.

결과는?

 

아니 내 네트워크 지식으론 이론상 완벽한데? 라고 생각했지만 문제는 네트워크 연결이 아니라 yarn dev에 있었다.

yarn dev 기본설정

대부분의 경우, 개발 서버는 localhost(또는 127.0.0.1)에서만 실행된다. 이는 개발 서버가 로컬 머신 내부에서만 접근 가능하다는 의미이다. 외부 네트워크에서 외부 host를 달고 개발 서버에 접근하려고 하면 연결할 수 없는 것이 당연하다. 또한, 같은 네트워크 상의 다른 기기에서 http://<local IP>:{port_num}로 접속하려고 해도 당연히 실패되는 것이다.

해결 방법 : yarn dev -- host 0.0.0.0

$ yarn dev --host 0.0.0.0

0.0.0.0은 모든 네트워크 인터페이스에서 요청을 수신하겠다는 설정을 의미한다. 이 설정으로 개발 서버에 로컬 네트워크의 다른 기기에서도 접근 가능해진다.