[Flutter] 모바일 기기에서 Localhost 서버 연동 및 디버깅 하는 방법 - Android (feat. WebView , Chrome inspect)

이번 글에서는 모바일 기기에서 운영 서버가 아닌 Local 서버에 연동 및 디버깅 하는 방법에 대해서 설명하고자 한다.

최근 실제 모바일 기기에 Localhost 서버를 연동해서 테스트해야하는 필요성이 생겼다.
Stage 서버의 주소로 모바일을 연동해서 테스트하려니까 소스를 git에 업로드 -> 배포 되는 과정이 최소 3~5분이 걸리다보니 너무 비효율적이라는게 문제였다.

그래서 그동안 찾은 연동 방법들과 실패한 사유 및 해결방법에 대해 글을 남기고자 한다.

1. Localhost 연동 실패 사유 및 해결방법 - 테더링

모바일에 Localhost를 연동하는 방법들은 검색하면 많다.

• 로컬호스트:3000 인 경우 로컬호스트 대신 컴퓨터 ip주소를 이용하는 방법
• 컴퓨터와 모바일 기기의 와이파이를 동일하게 맞춘뒤 컴퓨터 ip주소를 이용하는 방법
• Chrome inspect를 이용하는 방법

위 방법들 말고도 다른 방식으로도 시도해보았는데 연동이 안되서 이유를 찾다가 알게된 사실은 회사 공유기의 사설 IP로 인해서 연동이 실패했다는 점이다.

사설 IP란?

내부 네트워크 ( 예, 공유기 내부 네트워크 ) 상에서만 사용되는 주소로 인터넷상에서는 사용할 수 없는 IP주소이다.

가정이나, 소규모 사무공간에서 공유기 / 라우터 등의 장비가 하나의 공인 IP를 할당 받고 NAT방식을 통해 여러 컴퓨터가 나누어 쓰는 방식으로 사용될 때 주로 사용된다.

정리하자면 , 회사내에서는 회사 내부 네트워크로만 인터넷이 접속가능하게 사용하는 IP라는 것이다.

IP 주소 확인

실패 사유 및 해결 방법

회사내에서만 접속가능하게끔 사설 IP를 사용하는 중인데 , 핸드폰으로 접속하려고 하니 차단되는것이다.

그래서 찾아본 해결방법은 USB 테더링이다.

USB 테더링 연동 방법

• USB 테더링 : 핸드폰과 PC를 USB로 연결하여 휴대폰의 인터넷 기능을 같이 사용하는 것이다.

1. PC와 모바일 기기를 USB로 연결한 후 > 설정 > 연결 > 테더링 선택

2. 윈도우PC 시작키 > 설정 > 이더넷 > 네트워크 7 (환경마다 새로운 네트워크 생성됨)
   

3. 네트워크 7 > IPv4주소 확인
   

4. 모바일 기기의 크롬 or 인터넷창에 내 IPv4주소:포트번호 를 입력하면 PC에서와 똑같이 로컬호스트 서버가 실행이 될것이다.

2. WebView에서 디버깅 허용 방법

1. 플러터 웹뷰 디버깅 방법

안드로이드 - Aos

flutter_webview - debuggingEnabled : true 활성화

또한 추가적으로 웹뷰와 Localhost를 연동하고 싶다면 로컬 주소를 url 입력칸에 추가한다.

예시 코드 - flutter_webview

(1) Url을 설정하는 부분에 "192.xxx.xx.2xx:3000" 처럼 연동하면 된다.

	WebView(
              initialUrl: "192.xxx.xx.2xx:3000",
              onWebViewCreated: (WebViewController webViewController) {
                _webViewController = webViewController;
              },
              javascriptMode: JavascriptMode.unrestricted,
              debuggingEnabled: true,
              initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
              allowsInlineMediaPlayback: true, // iOS에서 HTML5 비디오의 인라인 재생 허용
            )

(2) 이후로는 3. Chrome inspect 연동하여 웹 디버깅 방법을 진행한다.

아이폰 - Ios

ios에서는 안드로이드에서 사용하는 크롬 브라우저와는 사파리 브라우저 방식을 사용한다.

또한 디버깅을 하기 위해서는 아이폰 기기와 맥북 Safari에서 웹 인스펙터에 대한 설정을 해줘야 한다. (버전 관련해서도 iOS 16.4 이상 , Chrome for iOS 115 이상 체크)

우선 설정 방법에 대해서 정리해보자.

1. 아이폰 기기에서 [설정 > Safari > 고급 > 웹 속성 ON].
   

2. 아이폰 기기에서 Chrome으로 디버깅을 하고 싶다면 [크롬 앱 실행 후 우측 하단 더보기 > 설정 > 콘텐츠 설정 > Web Inspector 사용]
   

3. 맥북에서 MacOS에서 [Safari 실행> Safari 메뉴 > 설정 > 고급 탭 > 개발자용 메뉴 보기 체크]
   

4. 이제 아이폰을 연결하고 사파리나 크롬을 실행해서 Web Inspector 되는지 확인해보자.
   

2. 안드로이드 웹뷰 디버깅 방법

안드로이드에서 웹뷰 디버깅 방법은 간단하다.

(1) 웹뷰에서 디버깅 옵션 허용

WebView.setWebContentsDebuggingEnabled(true);

(2) 이후로는 3. Chrome inspect 연동하여 웹 디버깅 방법을 진행한다.

3. Chrome inspect 연동하여 웹 디버깅 방법

1. 개발자 옵션 허용 : 디바이스 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드번호 여러번 클릭하면 토스트 메시지가 나옴.

2. 디바이스의 개발자 옵션에서 USB 디버깅 허용

3. 크롬 브라우저 주소창에 chrome://inspect/#devices 을 입력하면 밑의 화면이 나온다.

4. 디바이스에서도 크롬앱을 실행 > 연결이 제대로 되면 기기의 모델명이 나옴 > "Open tab with url"에 로컬호스트 ip 입력
   

5. 위 이미지에서 inspect를 클릭하면 아래의 이미지창이 나오며 콘솔 로그를 확인할수가 있어진다.