안드로이드 로컬 앱을 빌드하는 과정

 

정~~ 말 오랜만에 작성해 보는 삽질 기록..

앱 프로젝트를 로컬 환경에서 세팅하는 과정은 따로 시간 내서 정리해 보도록 하고,

프로젝트 실행 환경을 세팅했다고 우선 가정해보자.

 

프로젝트는 모노레포로 구성되어 있고

next의 웹 프로젝트와 RN으로 작성된 앱 프로젝트가 있다.

하려고 하는 건, 앱 프로젝트에서 안드로이드 앱을 로컬에서 빌드시켜서 에뮬레이터를 통해서 실행하는 것이었다.

새로운 빌드를 하기 전에는 항상 아래의 명령어로 이전에 빌드했던 잔재가 남아있지 않도록 clean을 해주도록 한다.

❯ ./gradlew clean

이 명령어는./gradlew 파일이 있는 곳에서 실행해주어야 한다.

그러면 아래와 같이 성공했다는 메시지가 나오면 이제 새로운 빌드 준비를 마친 상태

 

BUILD SUCCESSFUL in 18s
42 actionable tasks: 37 executed, 5 up-to-date

나의 프로젝트 같은 경우에는 package.json에 아래와 같이 스크립트 명령어를 정의해 주었으므로

"android": "ENVFILE=.env react-native run-android --variant=developDebug --appIdSuffix=dev",

아래의 명령어로 앱 빌드를 실행시켜 주도록 한다

❯ yarn run android

그러면 이제 컴퓨터가 갑자기 뜨거워지기 시작한다~

상당한 달리기 실력이다 평균 2분 페이스?

그러면 빌드를 진행하는데 아래와 같은 에러가 발생한다면

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDevelopDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 2m 3s

침착하자, 잘 읽어보면 No connected devices 니까 연결할 기기 즉, 에뮬레이터가 없어서 실패한다는 뜻

즉, 빌드를 한다는 건 기기에 해당 앱을 설치한다고 생각하면 이해하기 쉬울 것 같아서 나는 그렇게 이해를 했다.

자 그러면 이제 안드로이드 폰을 준비해 보자

안드로이드 스튜디오를 켜주도록 하고,

안드로이드 스튜디오에서 디바이스 매니저

프로젝트에 맞는 안드로이드 기기를 만들어준 다음, 액션에 있는 실행버튼으로 안드로이드 핸드폰을 구입!

안드로이드 폰이 생긴 상태에서 재 빌드를 해주도록 하자

위에서 남은 잔재를 지우는 것도 까먹지 말자~

만약 까먹었다면 아래와 같은 빌드 실패를 겪을 것이니 이때에도 당황하지 않도록 하자

Execution failed for task ':app:mergeDevelopDebugAssets'.

뭔가 이런 에셋 관련 예외가 발생했을 때 clean을 해주도록 하고 재빌드 해보자

Execution optimizations have been disabled for 1 invalid unit(s) of work during this build to ensure correctness.
Please consult deprecation warnings for more details.

BUILD SUCCESSFUL in 1m 45s
602 actionable tasks: 597 executed, 5 up-to-date
info Connecting to the development server...
8081
info Starting the app on "emulator-5554"...

오예 성공~

그러면 이제 안드로이드 폰에 잘 설치되어 있는지 확인하면 된다. 

 

그 외 트러블 슈팅 기록

최초에 앱을 빌드할 때 나는 빌드된 앱이 로컬 백엔드와 통신하게 하기 위해서 아래와 같이 앱 내의 env를 수정해 주었다.

APP_API_URL=http://127.0.0.1:8000

백엔드 서버를 8000번 포트로 열어두었기 때문에 이렇게 했다.

그러고 빌드된 앱에서 API를 쏴야 하는데, 로컬 백엔드 쪽 로그에는 아무런 흔적도 남지 않는 것이었다.

도저히 모르겠어서 지피티  선생님~~ 

현재 React Native 앱에서 백엔드 서버에 요청이 전달되지 않는 문제는 localhost와 관련된 네트워크 설정 문제일 가능성이 높습니다. 특히, React Native 에뮬레이터에서 localhost는 디바이스 자체를 참조하므로, 호스트 머신(PC 또는 Mac)의 localhost와 연결되지 않을 수 있습니다.

1. localhost의 의미

• 에뮬레이터 내부에서 localhost는 에뮬레이터 자체를 참조합니다.

• 따라서 localhost:8000은 앱이 에뮬레이터의 8000번 포트를 참조하려고 하지만, 실제 서버(호스트 머신)에 연결되지 않습니다.

2. 네트워크 주소 변환 필요

• 에뮬레이터에서 호스트 머신의 localhost에 연결하려면 특별한 IP 주소를 사용해야 합니다:

• Android 에뮬레이터: 10.0.2.2

• iOS 시뮬레이터: 127.0.0.1

3. react-native-config 설정

• Config.APP_API_URL이 올바르게 설정되지 않았을 수 있습니다.

음,, 그렇다 안드로이드 에뮬레이터의 로컬호스트는 다른 주소였던 것이었다

그래서 다시 수정해서 청소하고 재빌드.. 

APP_API_URL=http://10.0.2.2:8000

 

그랬더니 드디어 정상적으로 로컬 백엔드에 로그가 남았음~!

근데 이제 아래처럼 통신이 불가능하다고 알려주고 있었다.

django.core.exceptions.DisallowedHost: Invalid HTTP_HOST
header: '10.0.2.2:8000'. You may need to add '10.0.2.2' to ALLOWED_HOSTS.

즉, 백엔드 쪽에서 쟤가 누군데? 나 모르는 사람인데요? 이거 요청받으려면 너 이거 추가해야 해요라고 하는 중이다.

이건 그냥 Django 세팅 값 중 ALLOWED_HOSTS에 해당 안드로이드 에뮬레이터의 주소만 추가해 주면 끝!