본문으로 건너뛰기

React Native

Proxyman으로 iOS 기기, iOS 시뮬레이터, Android 기기, Android 에뮬레이터에서 React Native 및 Expo 앱의 HTTPS 트래픽을 캡처하세요.

동영상​

React Native Expo 앱을 iOS 시뮬레이터와 Android 에뮬레이터에서 HTTPS 캡처하기

1. React Native - iOS​

  • iOS 앱을 React Native로 만들었다면 iOS 가이드를 따르세요. 네이티브 iOS 앱과 차이가 없습니다.
  • Expo 또는 Metro 번들러와 함께 동작합니다

iOS 기기Mac의 Proxyman으로 iPhone과 iPad의 HTTP/HTTPS 트래픽을 캡처하세요. Wi-Fi 프록시를 설정한 뒤, 기기에 Proxyman 인증서를 설치하고 신뢰하도록 설정합니다.

iOS 시뮬레이터macOS의 Proxyman으로 iOS 시뮬레이터의 HTTP/HTTPS 트래픽을 캡처하세요. 인증서 자동 설정, 수동 설치, 트래픽이 보이지 않을 때의 점검 방법을 다룹니다.

2. React Native - Android​

React Native Android 앱의 HTTP/HTTPS 트래픽 캡처는 네이티브 Android 앱과 같은 방식으로 동작합니다. 다음 Android 설정 가이드를 따르세요:

경고

가이드의 모든 단계를 따랐는지 확인하세요. 특히 res/xml/network_security_config.xml과 AndroidManifest.xml을 추가하는 5번째 단계를 꼭 확인하세요.

그렇지 않으면 Proxyman이 SSL 연결을 복호화할 수 없습니다.

3. 문제 해결 - Android​

3.1 Metro 번들 오류​

Android 기기의 HTTP 프록시를 Proxyman으로 설정하면, Metro 번들러가 로컬 서버에 연결하지 못해 다음 오류가 발생할 수 있습니다.

Unable to load script, make sure you're running Metro 메시지가 표시된 React Native Android 빨간 화면

Metro 번들 오류

해결 방법은 다음과 같습니다:

Android 에뮬레이터​

  1. Proxyman -> Certificate 메뉴 -> Install Certificate on Android -> Emulators… 순서로 열고 "Revert All Changes"를 클릭합니다.
  2. Android 에뮬레이터를 열고 Settings 앱 -> Network -> Wi-Fi -> 프록시 설정을 엽니다.
  3. HTTP 프록시를 Proxyman IP & Port로 직접 설정합니다. IP와 포트를 모른다면 Certificate 메뉴 -> Install Certificate on Android -> Physical Devices…를 열고 2단계에서 Server IP & Port를 확인하세요.
  4. 저장하기 전에 bypass proxy 목록에 localhost를 입력합니다 ✅

Proxyman IP와 포트, bypass proxy 목록의 localhost가 표시된 Android Wi-Fi 프록시 설정

  1. 완료
  2. The Bridge Was shutdown 경고와 Metro 번들 오류가 사라집니다 ✅

Android 실제 기기​

  1. Android 실제 기기를 열고 Settings 앱 -> Network -> Wi-Fi -> 프록시 설정을 엽니다.
  2. HTTP 프록시를 Proxyman IP & Port로 직접 설정합니다. IP와 포트를 모른다면 Certificate 메뉴 -> Install Certificate on Android -> Physical Devices…를 열고 2단계에서 Server IP & Port를 확인하세요.
  3. 저장하기 전에 bypass proxy 목록에 your IP를 입력합니다 ✅
  4. 완료

더 보기: https://github.com/ProxymanApp/Proxyman/issues/1407#issuecomment-1497235102

더 알아보기​

최종 수정: 에