vite 호스트와 포트 설정하기(feat. cli 명령어)

by

Vite(비트)를 번들러로 사용하여 개발하다보면 모바일 장비로 확인할 수 있도록 호스트나 포트를 설정해야 하는 경우가 생깁니다. svelte 등으로 개발할 때 호스트와 포트 설정 방법을 안내해 드립니다.

기본 설정

Vite를 번들러는 yarn dev 명령을 이용해서 개발 서버를 띄울 때 기본적으로 호스트는 localhost로 설정되고, 기본 포트는 5173 으로 설정됩니다.

호스트 설정 및 포트 설정

호스트가 localhost로만 작동하는 경우 개발 서버를 띄운 곳에서만 접속이 가능하므로, 모바일 장비나 함께 일하는 동료의 외부 접속을 원한다면 호스트를 설정해 주어야 합니다. 현 개발 서버의 IP 주소가 192.168.0.10 이라면 아래와 같이 명령하여 개발 서버를 띄우면 됩니다. 그런데 포트 번호가 복잡해 보여서 5173이 싫고 4000으로 하고 싶다면 아래와 같이 하면 됩니다.

vite --host 0.0.0.0 --port 4000

package.json 설정

늘 그렇듯, 다들 귀찮은 걸 싫어하시죠? yarn dev 명령어 한 방에 위의 스크립트가 실행되게 하려면 당연히 package.json을 수정해주면 된다. package.json의 scripts는 다음과 같은 내용으로 되어 있습니다.

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
},

위에서 사용한 명령어를 dev에 있는 vite 대신에 아래와 같이 채워주면 됩니다.

"scripts": {
    "dev": "vite --host 0.0.0.0 --port 4000",
    "build": "vite build",
    "preview": "vite preview"
},

이제는 yarn dev만 입력해서 개발 서버를 띄우면 됩니다. 이와 같이 설정하면, localhost로도 접속할 수 있고, 192.168.0.10으로도 접속이 가능합니다. 호스트주소 설정과 포트 설정에 도움이 되셨길 바랍니다.

관련 자료

관련된 내용은 vite 공식 홈페이지의 서버 옵션 문서를 참조했습니다.

같이 읽으면 좋은 글

Leave a Comment