Android Emultator에서 localhost에 설치된 SPA 및 API까지 localhost 상태로 연결

모바일을 위한 SPA를 개발할 때 안드로이드 시뮬레이터에서 동작을 확인하고 싶을 때 하는 말이다.
SPA 개발에서는 AWS 람바다, 아주펀션, Firebase Function 등에 API를 구축하고, 프런트엔드는 대부분 S3, Firebase Hosting, Netlify 등 접대 서비스에 구성한다.
이런 것들을 개발할 때 현지에서

localhost: 3100은 API 서버

localhost:3200은 웹 서버

이렇게 개발용 서버를 만들어서(또는 도구 세트를 통해) 사용한다.이때 프런트엔드에서 API 서버로의 액세스는 하드코딩ttp://localhost:3100/api/ping 등으로 변경될 수 있습니다.
휴대전화 동작을 확인하기 위해서는 크롬 등 개발자 도구로만 외관을 바꿀 수 있지만, 실제 기기에 더 가까운 환경으로 안드로이드 시뮬레이터를 사용할 수도 있다.
안드로이드 시뮬레이터는 본 PC와 다른(독립된) 네트워크에 위치하기 때문에 시뮬레이터 내localhost는 당연히 시뮬레이터 자체를 표시하기 때문에 시뮬레이터 내 브라우저에서 PC에서 실행되는 SPA를 개발할 때 SPA에서 API 서버localhost:3100에 도달하지 못해 오류가 발생할 수 있다.
시뮬레이터에서 그 개발 PC(호스트 PC)에 대한 접근은 10.0.2.2에서 가능하기 때문에 ttp://localhost:3100/api/ping를 ttp://10.0.2.2:3100/api/ping로 바꾸면 동작하지만 일일이 다시 쓰는 것도 번거롭다.
아날로그 내의 특정 포트에 대한 통신을 호스트 PC로 전송하는 기능이 있었으면 좋겠다고 생각했는데... 사실 있어요!

안드로이드 터미널에서 PC 전송 포트 개발-Qita

호스트 PC에서 다음 명령을 실행하는 방법을 학습합니다.

adb reverse tcp:3100 tcp:3100

시뮬레이터 내ttp://localhost:3100/api/ping는 호스트 PC로 전송되고 SPA는 정상적으로 작동한다.
SP A 액세스

adb reverse tcp:3200 tcp:3200

면 시뮬레이터에서도 사용할 수 있다ttp://localhost:3200/indesx.html.

Android 응용 프로그램에서 WebView에 액세스하는 경우

현재 안드로이드 개발에서https를 제외한 통신은 정해진 상황에서 사용할 수 없기 때문http://localhost도 열 수 없습니다.

Android 9을 통해 HTTP 통신을 효율적으로 하는 방법 | 백포트

AndroidManifest.xml에서 설정해야 합니다.
심플한android:usesCleartextTraffic="true" 사용 시 Build Variant 등 제품판 빌딩false을 이용하세요.

참고 자료

안드로이드 터미널에서 PC 전송 포트 개발-Qita

Android Emulator 네트워크 설정

Android 9을 통해 HTTP 통신을 효율적으로 하는 방법 | 백포트

구성 변형 설정하기