이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

Kayce Basques

Meggin Kearney

Sofia Emelianova

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

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

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

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

포트 전달 설정

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

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

--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
```
디버깅하는 Chrome 인스턴스에서 다음을 사용합니다.
1. chrome://inspect/#devices를 엽니다.
2. 네트워크 대상 검색이 선택되어 있는지 확인합니다.
3. 체크박스 옆에 있는 구성을 클릭합니다.
4. 대상 검색 설정에 localhost:PORT을 입력하고 포트 전달 사용 설정을 선택한 다음 완료를 클릭합니다.
5. 다시 기기로 이동하면 새로운 원격 타겟을 확인할 수 있습니다. 디버그하려는 탭 옆에 있는 검사를 클릭합니다.
기기 모드에서 새 DevTools 창이 열립니다. 상단의 주소 표시줄에 디버깅할 웹사이트의 주소를 입력할 수 있습니다.
주소 표시줄 옆에서 입력 방법을 전환할 수 있습니다.

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

개발 머신과 Android 기기 간에 원격 디버깅을 설정합니다. 완료되면 Android 기기가 목록에 표시됩니다.
USB 기기 검색이 선택되어 있는지 확인합니다.
체크박스 옆에 있는 포트 전달을 클릭합니다.
포트 전달 설정에서 localhost:8080가 기본적으로 설정됩니다. 포트 전달 사용 설정을 선택합니다.

.
다른 포트를 설정하려면 다음 단계를 따릅니다. 그렇지 않으면 단계를 건너뛰고 완료를 클릭합니다.
왼쪽의 포트 텍스트 필드에 전송하려는 포트 번호를 입력합니다. Android 기기에서 사이트에 액세스할 수 있어야 합니다. 예를 들어 사이트에 액세스하려는 경우 localhost:5000부터 5000를 입력합니다.
오른쪽의 IP 주소 및 포트 텍스트 입력란에 IP 주소 또는 호스트 이름을 입력합니다. 개발 머신의 웹 서버에서 실행되고 있는지 확인하고 그 뒤에 포트 번호를 입력합니다. 대상 예를 들어 사이트가 localhost:5000에 실행 중인 경우 localhost:5000을 입력합니다.
완료를 클릭합니다.

이제 포트 포워딩이 설정되었습니다. 상단에서 포트 전달 상태 표시기도 확인할 수 있습니다. 표시됩니다.

포트 전달 상태입니다.

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

커스텀 로컬 도메인에 매핑

맞춤 도메인 매핑을 사용하면 커스텀 도메인을 사용하는 개발 머신입니다

예를 들어 사이트에서 허용 목록에 추가된 도메인(chrome.devtools)입니다. 따라서 컴퓨터의 hosts 파일에 이 도메인을 localhost에 매핑하는 개발 머신입니다 (예: 127.0.0.1 chrome.devtools). 후(After) 맞춤 도메인 매핑 및 포트 포워딩을 설정하면 Android 기기(URL chrome.devtools)

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

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

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

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

참고: 프록시 서버와 웹 서버는 다른 포트에서 실행되어야 합니다.
Android 기기로 포트 전달을 설정합니다. 로컬 주소 필드에 localhost: 뒤에 프록시 서버가 실행 중인 포트를 입력합니다. 예를 들어 포트 8000에서 실행 중인 경우 localhost:8000를 입력합니다. device port 입력란에 Android 기기에서 청취할 번호(예: 3333)를 입력합니다.

기기에서 프록시 설정 구성

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

Android 기기에서 설정 > Wi-Fi.
연결된 네트워크의 이름을 길게 누릅니다.

참고: 프록시 설정은 네트워크별로 적용됩니다.
네트워크 수정을 탭합니다.
고급 옵션을 탭합니다. 프록시 설정이 표시됩니다.
프록시 메뉴를 탭하고 수동을 선택합니다.
프록시 호스트 이름 필드에 localhost를 입력합니다.
Proxy port 입력란에 device port 입력한 포트 번호를 입력합니다. 이전 섹션에 나와 있습니다.
저장을 탭합니다.

이렇게 설정하면 기기에서 모든 요청을 개발 환경의 프록시로 전달합니다. 가상 머신을 만드는 데 도움이 됩니다 프록시가 기기를 대신하여 요청하므로 맞춤설정된 로컬 확인할 수 있습니다.

이제 Android 기기에서처럼 맞춤 도메인에 액세스할 수 있습니다. 실행할 수도 있습니다

웹 서버가 비표준 포트로 실행 중인 경우 포트 지정 시 콘텐츠를 요청할 수 있습니다. 예를 들어 웹 서버가 커스텀 포트 7331에서 도메인 chrome.devtools의 경우 Android 기기에서 사이트를 볼 때 chrome.devtools:7331 URL을 사용합니다.