WebView용 웹 콘텐츠를 개발할 때는 개발 머신의 로컬 웹 서버에서 콘텐츠를 제공하는 것이 유용할 수 있습니다. 테스트 기기나 에뮬레이터의 WebView에서 이 로컬 서버에 액세스하면 원격 서버에 배포하지 않고도 변경사항을 빠르게 확인할 수 있습니다. 이 페이지에서는 WebView에서 호스트 머신에서 실행되는 웹 서버에 액세스하는 여러 방법을 설명합니다.
ADB로 역방향 포트 전달 설정
기기와 통신하는 명령줄 도구인 Android 디버그 브리지 (adb)를 사용하여 역방향 포트 전달을 설정할 수 있습니다. 이 기능을 사용하면 기기나 에뮬레이터가 개발 머신에서 localhost에 실행되는 웹 서버에 액세스할 수 있습니다.
adb에는 기기의 특정 포트에서 호스트 머신의 다른 포트로 요청을 전달할 수 있는 reverse 명령어가 있습니다.
이 기능을 사용하려면 터미널에서 다음 명령어를 실행하세요.
adb reverse tcp:DEVICE_PORT tcp:HOST_PORT
다음을 바꿉니다.
DEVICE_PORT: 앱의 WebView가 연결되는 기기의 포트입니다. 예: 8080HOST_PORT: 개발 머신에서 웹 서버가 실행되는 포트입니다. 예를 들어 8080 또는 3000입니다.
예:
개발 머신에서 로컬 개발 서버가 localhost:8080에서 실행되는 경우 다음 명령어를 실행하여 기기에서 서버로 요청을 전달할 수 있습니다.
adb reverse tcp:8080 tcp:8080
이 명령어를 실행한 후 기기나 에뮬레이터에서 앱의 WebView를 http://localhost:8080로 지정할 수 있습니다. 그러면 WebView가 개발 머신의 localhost:8080에서 실행되는 웹 서버에 연결할 수 있습니다. 이 메서드는 USB를 사용하여 연결된 실제 기기와 Android 에뮬레이터 모두에서 작동합니다.
Chrome DevTools 포트 전달 사용
Chrome DevTools에는 기기에서 개발 머신으로 요청을 전달하는 데 사용할 수 있는 자체 포트 전달 기능이 있습니다.
- Chrome DevTools를 사용하여 디버그에 설명된 대로 디버깅을 위해 기기를 설정합니다.
chrome://inspect페이지에서 포트 전달...을 선택합니다.- 포트 필드에 개발 머신에 액세스하는 데 사용할 Android 기기의 포트 번호를 입력합니다.
- IP 주소 및 포트 필드에 개발 머신의 웹 서버 주소와 포트 번호를 입력합니다.
- 포트 전달 사용 설정 체크박스를 선택합니다.
- 완료를 선택합니다.
예를 들어 포트 필드에 3000를 입력하고 IP 주소 및 포트 필드에 localhost:8000를 입력하면 WebView가 http://localhost:3000를 가리킬 때 localhost:8000에서 수신 대기하는 개발 머신의 웹 서버에 액세스할 수 있습니다.
로컬 웹 서버에 맞춤 도메인 이름을 사용할 수도 있습니다. 이 작업을 실행하는 방법은 포트 포워딩으로 로컬 서버 및 Chrome 인스턴스에 액세스하기를 참고하세요.
Android Emulator의 통과 IP 주소를 사용하여 연결
Android Emulator는 앱에서 개발 머신에 연결할 수 있는 특수 통과 IP 주소 10.0.2.2를 제공합니다. WebView가 이 IP 주소를 보안 컨텍스트로 취급하지 않으므로 이 방법은 WebView 디버깅에 권장되지 않습니다. 따라서 서비스 워커, 위치정보, 카메라 및 마이크 액세스와 같은 많은 웹 플랫폼 기능을 웹 앱에서 사용할 수 없습니다. 앞에서 설명한 adb reverse 및 Chrome DevTools 포트 전달 방법은 WebView를 신뢰할 수 있는 호스트 이름 localhost로 연결할 수 있으므로 이 문제가 없습니다.