vite 개발 서버에 local ip로 접속 불가능

vite 개발 서버를 가동한 후, 동일한 와이파이를 사용하는 스마트폰으로 접속을 시도해보았다.

가령, http://192.168.219.102:8080/ 라는 주소를 직접 입력했지만, 페이지를 찾을 수 없다는 경고문만 출력될 뿐이었다.

우선 개발서버가 가동된 pc에서 직접 위 주소를 입력했더니 마찬가지로 404 에러가 발생할 뿐이었다.

혹시나 싶어 localhost대신 127.0.0.1을 입력해보았더니 마찬가지로 404 에러가 나왔다.

처음에는 공유기의 포트포워딩을 의심했지만, 서버가 가동된 pc에서도 안되는걸 보니 더욱 의아해져만갔다.

곰곰히 생각해보니 vite 개발서버를 띄워본 이후 로컬주소를 통한 접속은 이번이 처음이었는데,

이를 토대로 조사한 결과 vite에 관련된 설정이 원인이었음을 알게되었다.

https://ko.vite.dev/config/server-options

// // vite.config.ts
export default {
  server: {
    host: true // 또는 host: '0.0.0.0'
  }
}

string 또는 boolean 타입의 입력을 허용하며,

true를 입력하여 모든 입력값에 대한 접속을 허용하거나,

호스트명 또는 ip 주소값을 입력하여, 해당 입력에 대한 접속만을 허용할 수 있다.

그리고 vite.config.ts 에서 host 설정을 비워놓으면 기본값은 host: 'localhost'가 된다.

그러면 개발서버는 오직 localhost 라는 이름으로 들어오는 요청만 받게된다.

127.0.0.1은 사실 같은 ip지만, 이름이 다르기 때문에 명시적으로 허용되지 않으면 거부된다는데...

localhost가 127.0.0.1로 변환되는 절차를 정확히 숙지할 필요성이 느껴진다.

우선true를 설정한후, 동일한 네트워크를 사용하는 기기에서 접속이 가능함을 확인하였다.