[Vite, Docker] 로컬에선 되는데 원격에서는 ERR_CONNECTION_REFUSED

문제:

로컬인 localhost:5173 에서는 페이지가 열리는데

Docker 컨테이너를 실행했을 때는 <원격 ip>:5173 접속 시 ERR_CONNECTION_REFUSED 에러가 발생한다.

*Dockerfile, docker build 과정, 방화벽, VM 보안그룹에는 이상 없음

 

왜 로컬에선 되는데 원격에선 안되냐고!!!!!!!!!!!!!!!!! <- 이 문제는 내가 죽든 개발을 그만두든 해야 끝날듯

---

해결방법:

 

기존 package.json 을

  "scripts": {
    "dev": "vite",
	...
  },

 

다음과 같이 수정한다.

  "scripts": {
    "dev": "vite --host 0.0.0.0 --port 5173",
	...
  },

 

 

🤔 --port 도 지정해야하나요?

> 사실 이 경우에는 --host 옵션만 주면 됨. --port는 포트번호도 지정할 경우에 쓰면 된다.

> 나는 명시적으로 보여주기 위해 --port 옵션을 사용했을 뿐....

 

 

참고

Docker port forwarding not working

 

---

원인:

vite에서 dev서버를 실행할 경우, (`npm run dev`)

옵션을 주지 않은 host의 기본 설정은 localhost(127.0.0.1) 이다.

 

이렇게 도커 컨테이너 내부에서 실행 중인 Vite 서버가 localhost 주소를 사용하면 컨테이너 외부에서는 접근할 수 없다.

> 컨테이너의 네트워크가 자기 자신을 가리키고 있으니까 외부에서의 접속이 안됨!

 

이를 해결하기 위해 Vite 서버의 host 옵션을 0.0.0.0 으로 설정하면

모든 네트워크 인터페이스를 통해 컨테이너 외부에서도 vite 서버에 접근할 수 있게 된다 ~~

 

🤔 0.0.0.0 이 뭔가요?

> 모든 host ip의 <port번호>가 해당 컨테이너의 <port번호> 로 바인딩 됨을 의미한다.

 

 

끝!