아이폰(모바일)에서 localhost 개발 서버 열기

Vite 으로 생성한 React 프로젝트를 개발 서버에서 실행시킬 때

보통 터미널에서 npm run dev 로 실행하는데

모바일 기기로도 확인할 수 있으면 좋을 것 같아서 방법을 찾아봤다.

 

맥북과 아이폰을 사용한다는 전제하에 설명해보겠다.

 

방법

 

1. 먼저 아이폰과 맥북은 동일한 와이파이에 접속해야한다.

 

2. 맥북 터미널에서 다음과 같은 명령어를 입력한다

ipconfig getifaddr en0

 

그러면 IP 주소가 뜨는데, https://<IP주소> 로 모바일에서 사파리로 접속하면 된다.

하지만 나는 제대로 연결되지 않아서 추가적인 과정을 하나 더 해줘야했다.

 

ref:https://dev.to/bhendi/how-to-open-your-vite-dev-server-on-your-mobile-k1k

 

3. React 프로젝트의 package.json 에 들어가서 scripts의 dev 부분을 다음과 같이 수정한다

// 변경 전
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  
 // 변경 후 
 "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

 

vite 에서 vite --host 로 변경해주면 된다.

 

이 후 똑같이 npm run dev 를 해준다.

 

그리고 다시 아이폰에서 https://<IP주소> 로 접속해보면 잘 렌더링 되는 것을 확인할 수 있다!