포트 포워딩으로 로컬 서버 및 Chrome 인스턴스에 액세스

Kayce Basques
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
GitHub

포트 전달을 사용하여 다음을 수행할 수 있습니다.

  • 사례 1. 다른 Chrome 인스턴스에서 열린 탭을 디버그합니다.
  • 케이스 2. 개발용 컴퓨터 웹 서버에서 사이트를 호스팅한 다음 USB 케이블을 통해 Android 기기에서 콘텐츠에 액세스합니다.

사례 2에서 포트 전달은 개발 머신의 TCP 포트에 매핑되는 Android 기기의 수신 TCP 포트를 통해 작동합니다. 포트 간 트래픽은 Android 기기와 개발 머신 간의 USB 연결을 통해 이동하므로 연결은 네트워크 구성에 종속되지 않습니다.

또한 웹 서버에서 맞춤 도메인을 사용하는 경우 맞춤 도메인 매핑을 사용하여 해당 도메인의 콘텐츠에 액세스하도록 Android 기기를 설정할 수 있습니다.

포트 전달 설정

케이스에 따라 다음 단계를 따르세요.

사례 1: 다른 Chrome 인스턴스로 포트 전달 설정

  1. --remote-debugging-port=PORT 매개변수를 사용하여 다른 Chrome 인스턴스를 실행합니다. 예를 들면 다음과 같습니다.

    MacOS

    open -a "Google Chrome" --args --remote-debugging-port=PORT

    Windows

    start chrome --remote-debugging-port=PORT

    Linux

    google-chrome --remote-debugging-port=PORT

  2. 디버깅하는 Chrome 인스턴스에서 다음을 사용합니다.

    1. chrome://inspect/#devices를 엽니다.
    2. 체크박스입니다. 네트워크 대상 검색이 선택되어 있는지 확인합니다.
    3. 체크박스 옆에 있는 구성을 클릭합니다.

    4. 대상 검색 설정에 localhost:PORT을 입력하고 체크박스입니다. 포트 전달 사용 설정을 선택한 다음 완료를 클릭합니다.

      타겟 검색 설정 창

    5. 다시 기기로 이동하면 새로운 원격 타겟을 확인할 수 있습니다. 디버그하려는 탭 옆에 있는 inspect를 클릭합니다.

      원격 대상의 탭 옆에 있는 검사 링크.

  3. 기기 모드에서 새 DevTools 창이 열립니다. 상단의 주소 표시줄에 디버깅할 웹사이트의 주소를 입력할 수 있습니다.

    DevTools를 기기 모드로 사용합니다.

  4. 주소 표시줄 옆에서 입력 방법을 전환할 수 있습니다.

케이스 2: Android 기기에 USB를 통한 포트 전달 설정

  1. 개발 머신과 Android 기기 간에 원격 디버깅을 설정합니다. 완료되면 Android 기기가 목록에 표시됩니다.

    목록에 있는 Android 기기

  2. 체크박스입니다. USB 기기 검색이 선택되어 있는지 확인합니다.

  3. 체크박스 옆에 있는 포트 전달을 클릭합니다.

  4. 포트 전달 설정에서 localhost:8080가 기본적으로 설정됩니다. 포트 전달 사용 설정을 선택합니다.

    포트 전달 설정입니다..

  5. 다른 포트를 설정하려면 다음 단계를 따릅니다. 그렇지 않으면 단계를 건너뛰고 완료를 클릭합니다.

  6. 왼쪽의 포트 텍스트 필드에 Android 기기에서 사이트에 액세스할 때 사용하는 포트 번호를 입력합니다. 예를 들어 localhost:5000에서 사이트에 액세스하려면 5000를 입력합니다.

  7. 오른쪽의 IP 주소 및 포트 텍스트 필드에 개발 머신의 웹 서버에서 사이트를 실행 중인 IP 주소 또는 호스트 이름과 포트 번호를 차례로 입력합니다. 예를 들어 사이트가 localhost:5000에서 실행 중인 경우 localhost:5000를 입력합니다.

  8. 완료를 클릭합니다.

이제 포트 포워딩이 설정되었습니다. 상단과 기기 이름 옆에 포트 전달 상태 표시기가 표시됩니다.

포트 전달 상태입니다.

콘텐츠를 보려면 Android 기기에서 Chrome을 열고 기기 포트 필드에서 지정한 localhost 포트로 이동합니다. 예를 들어 필드에 5000를 입력한 경우 localhost:5000로 이동합니다.

커스텀 로컬 도메인에 매핑

커스텀 도메인 매핑을 사용하면 커스텀 도메인을 사용하는 개발 머신의 웹 서버에서 Android 기기의 콘텐츠를 볼 수 있습니다.

예를 들어 사이트에서 허용 목록의 도메인 chrome.devtools에서만 작동하는 서드 파티 JavaScript 라이브러리를 사용한다고 가정해 보겠습니다. 따라서 개발 머신의 hosts 파일에 이 도메인을 localhost (예: 127.0.0.1 chrome.devtools)에 매핑하는 항목을 만듭니다. 맞춤 도메인 매핑 및 포트 전달을 설정한 후에는 Android 기기의 URL chrome.devtools에서 사이트를 볼 수 있습니다.

프록시 서버로 포트 전달 설정

커스텀 도메인을 매핑하려면 개발 머신에서 프록시 서버를 실행해야 합니다. 프록시 서버의 예로는 Charles, Squid, Fiddler가 있습니다.

프록시로 포트 전달을 설정하려면 다음 단계를 따르세요.

  1. 프록시 서버를 실행하고 사용 중인 포트를 기록합니다.

  2. Android 기기로 포트 전달을 설정합니다. 로컬 주소 필드에 localhost:과 프록시 서버가 실행 중인 포트를 차례로 입력합니다. 예를 들어 포트 8000에서 실행 중인 경우 localhost:8000를 입력합니다. 기기 포트 필드에 Android 기기가 수신할 번호(예: 3333)를 입력합니다.

기기에서 프록시 설정 구성

그런 다음 프록시 서버와 통신하도록 Android 기기를 구성해야 합니다.

  1. Android 기기에서 설정 > Wi-Fi로 이동합니다.

  2. 연결된 네트워크의 이름을 길게 누릅니다.

  3. 네트워크 수정을 탭합니다.

  4. 고급 옵션을 탭합니다. 프록시 설정이 표시됩니다.

  5. 프록시 메뉴를 탭하고 수동을 선택합니다.

  6. 프록시 호스트 이름 필드에 localhost를 입력합니다.

  7. 프록시 포트 필드에 이전 섹션에서 기기 포트에 입력한 포트 번호를 입력합니다.

  8. 저장을 탭합니다.

이렇게 설정하면 기기에서 모든 요청을 개발 머신의 프록시로 전달합니다. 프록시가 기기를 대신하여 요청하므로 맞춤설정된 로컬 도메인에 대한 요청이 제대로 확인됩니다.

이제 개발 머신에서와 마찬가지로 Android 기기 Android에서 맞춤 도메인에 액세스할 수 있습니다.

웹 서버가 비표준 포트로 실행 중인 경우 Android 기기에서 콘텐츠를 요청할 때 포트를 지정해야 합니다. 예를 들어 웹 서버가 포트 7331에서 맞춤 도메인 chrome.devtools을 사용하는 경우 Android 기기에서 사이트를 볼 때 URL chrome.devtools:7331을 사용해야 합니다.