Expo WebView에서 localhost 연결 안될 때 해결 방법 (ERR_CONNECTION_REFUSED)

하이브리드 앱을 만들면서
React / Vite 로 만든 웹을 Expo WebView로 띄우려고 할 때
실기기에서 아래 오류가 발생할 수 있다.

net::ERR_CONNECTION_REFUSED
url: http://localhost:5173

이 문제는 구조 때문에 발생하는 정상적인 현상이다.
원인과 해결 방법을 정리한다.

 

문제 원인

앱에서 localhost 는 PC가 아니라 폰 자기 자신을 의미한다.

http://localhost:5173

이 주소는

• PC에서는 정상
• Expo Go 앱에서는 폰 내부 주소로 인식됨

그래서 서버 연결 실패가 발생한다.

---

해결 방법 1 — PC IP로 접속

터미널에서 IP 확인

ifconfig

또는

ipconfig

Mac 기준

en0:
inet 192.168.0.87

이 경우 PC IP는

192.168.0.87

WebView 주소 변경

http://192.168.0.87:5173

<WebView source={{ uri: 'http://192.168.0.87:5173' }} />

---

해결 방법 2 — Vite 서버 host 열기

Vite는 기본적으로 localhost만 허용한다.
외부 접속 가능하게 설정해야 한다.

vite.config.ts

export default defineConfig({
  server: {
    host: true,
    port: 5173,
  },
});

또는 실행 시

yarn dev --host

또는

vite --host

이 설정이 없으면 모바일에서 접근할 수 없다.

---

해결 방법 3 — 같은 WIFI 사용

폰과 PC는 반드시 같은 네트워크에 있어야 한다.

가능한 상태

• 같은 공유기
• 같은 WIFI

불가능한 상태

• LTE / 5G
• 다른 WIFI
• USB만 연결

USB 연결은 네트워크 공유가 아니다.

---

해결 방법 4 — ngrok 사용 (추천)

로컬 서버를 외부 주소로 열어주는 방법

ngrok http 5173

예시

https://xxxx.ngrok-free.dev

WebView

https://xxxx.ngrok-free.dev' }} />

장점

• WIFI 달라도 됨
• USB 필요 없음
• 실기기 테스트 가능
• 하이브리드 개발에 가장 안정적

---

정리

방법추천

localhost	❌
PC IP + host 설정	⭕
ngrok	⭐⭐⭐ 추천

하이브리드 앱 개발할 때 가장 많이 쓰는 방식은

Vite + host + ngrok + WebView

이 세팅이다.

 

 

이후에 웹 실행할때 터미널에 나오는

  VITE v6.4.1  ready in 233 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.x.xx:5173/
  ➜  press h + enter to show help

 

network 주소를 웹뷰 src로 교체 해주면 된다