[꿀팁] 휴대폰으로 localhost 접속하기(with Vite)

웹 개발을 진행하다 보면 모바일에서 사용하는 웹을 만드는 경우가 있습니다. 그럴 때는 보통 개발자 도구(크롬)의 Device Mode 기능을 이용하면 편리하게 작업을 할 수 있습니다.

해당 기능은 화면의 사이즈를 원하는 대로 조절할 수 있게 하고, 모바일에서 접속한 것처럼 화면을 스크롤할 수 있습니다. 하지만 실제 기기에서 접속하는 것과는 차이가 있다는 한계가 있습니다.

 

그럴 때 사용할 수 있는 방법으로 바로 모바일 기기에서 개발 중인 사이트에 접속하는 방법입니다. 배포되지 않고 개발 중인 웹을 localhost URL을 통해 접속하는 것입니다.

 

단순한 방법으로 접근하는 것은 같은 와이파이 즉 인터넷을 사용하고 있다면 localhost:portnum을 통해 접속할 수 있습니다.

 

하지만 Vite를 사용해서 개발 중이라면 다른 방법을 사용해야 합니다.

 

vite.config.js 파일 내부의 server의 host 옵션을 true 또는 0.0.0.0으로 설정하면 됩니다.

 

따로 파일을 건드리지 않고 싶은 경우에는 CLI를 이용할 수도 있습니다. 보통 vite 명령어를 통해서 프로젝트를 실행하게 되는데 이때 --host 옵션 또는 --host 0.0.0.0을 통해 프로젝트를 동작시키면 됩니다.

$ vite --host

// or

$ vite --host 0.0.0.0

 

npm을 사용하면 경우엔 package.json의 scripts를 활용하면 됩니다.

// package.json
{
  // ...
  "scripts": {
    "dev": "vite",
    "devM": "vite --host",
  },
  // ...
}

 

위와 같이 설정하고 CLI에서 npm run devM을 실행시키면 외부 기기에서 접속할 수 있는 URL이 제공됩니다.

 

최종적으로 Network에 제공되는 URL을 통해 다른 기기에서 접속할 수 있습니다.

 

참고

Vite localhost 로컬 개발 서버 모바일 접속, hana1203, 2024.09.25

vite 공식 문서, 2024.11.08