카테고리 없음

React-Native Trouble Shooting(Andorid, IOS) 빌드가 안된다..ㅠ

200scs 2024. 12. 20. 23:59

**2024/12/20(금) 현재 사진이 정상적으로 올라가지 않아서, 추후에 사진 업로드 해드리겠습니다**

내가 사용하는 버전set-up
JDK - 17
Android SDK - 35
IOS - 18.2

[Windows] Setting - Environment Variable

Android SDK

1. 시스템 변수 추가

1. ANDROID_HOME 추가
2. ANDROID_SDK_ROOT 추가

[시스템 변수] - [PATH]에 관련 값 추가

[시스템 변수] - [PATH]에 관련 값 추가

Java JDK

1. JDK 다운로드(원하는 버전으로 openjdk혹은 oracle에서 다운로드. 뭐든 무관합니다)

2. 시스템 변수 추가(1)

  1. 맨 하단 [새로 만들기] 클릭
  2. 변수이름: JAVA_HOME
  3. 변수 값: C:\Program Files\Java\jdk-17
  4. 💡변수 값은 원하는 jdk 버전을 사용한다.

3. [시스템 변수] - [CLASSPATH] 값 셋팅

4. 시스템 변수의 PATH에 값 추가

사용자 변수에서 [편집] 클릭
추가: %JAVA_HOME%\bin

[MacOS] Setting - Environment Variable

Android SDK

Language & Framework > Android SDK에서 34버전 설치

SDK 34 다운로드 (본인에게 맞게 환경에 맞추세요.)

Android SDK 34버전의 애뮬레이터 생성

  • UpsideDownCake(sdk-34) 선택

  • 절차 진행 완료 → 애뮬레이터 생성 완료

Java JDK-17 설치

brew install openjdk-17

환경변수 설정

  • ~/.zshrc파일 셋팅하기
export ANDROID_HOME=$HOME/Library/Android/sdk
  • ANDROID_HOMEsdk 설치 경로를 환경변수로 지정(sdk 기본경로 설정)
export PATH=$ANDROID_HOME/platform-tools:$PATH
  • Android SDK의 platform-tools 디렉토리를 PATH에 추가
  • $PATH는 명령어 실행 시 검색할 디렉토리 목록을 지정하는 환경 변수
  • platform-tools에는 Android 디바이스와 통신하거나 앱을 디바이스에 설치하는 데 필요한 도구가 포함
  • 주요 명령어:*
  • adb (Android Debug Bridge): 디바이스 연결, 로그 보기, 앱 설치 등.
  • fastboot: 디바이스 부트로더와 상호작용
export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$ANDROID_HOME/platform-tools:$PATH export PATH=$ANDROID_HOME/cmdline-tools/latest/bin:$PATH
  • Android SDK의 최신 명령줄 도구(cmdline-tools/latest/bin) 디렉토리를 PATH에 추가합니다.
  • 이 디렉토리에는 SDK 관리와 관련된 명령줄 도구가 포함
  • 주요 명령어:
    • sdkmanager: Android SDK 구성 요소 설치 및 업데이트.
    • avdmanager: Android 가상 디바이스(AVD) 생성 및 관리.export PATH=$ANDROID_HOME/cmdline-tools/latest/bin:$PATH
✅ 요약
ANDROID_HOME:
        SDK의 루트 경로를 지정하여 기본적인 참조점으로 사용.
platform-tools:
        디바이스 연결 및 디버깅과 관련된 작업을 수행하기 위한 명령어를 사용할 수 있게 함.
cmdline-tools/latest/bin:SDK:
        구성 요소 설치 및 업데이트를 자동화하거나 명령줄 도구를 사용하는 프로젝트 설정에 필수.
  • 적용
    • zshrc란?
      1. 환경 변수 설정:
        • 예: export PATH=/usr/local/bin:$PATH특정 경로를 $PATH에 추가하거나, ANDROID_HOME 같은 변수를 정의.
      2. 별칭(alias) 설정:
        • 예: alias ll='ls -la'자주 사용하는 명령어를 짧게 정의.
      3. 플러그인 로드:
        • 예: source $ZSH/oh-my-zsh.shZsh 플러그인 프레임워크(예: Oh My Zsh)를 로드.
      4. 프롬프트 커스터마이징:
        • 예: PROMPT='%n@%m %~ %# '셸 프롬프트의 모양을 설정.
      CocoaPods 설치CocoaPods 설치 중 에러발생!현재 사용 중인 Ruby 버전(2.6.10)이 CocoaPods 설치에 필요한 securerandom 라이브러리의 요구사항인 Ruby 3.1.0 이상을 충족하지 못해서 발생한 오류
    • brew install rbenv rbenv init echo 'eval "$(rbenv init -)"' >> ~/.zshrc source ~/.zshrc

ERROR: Error installing cocoapods:
The last version of securerandom (>= 0.3) to support your Ruby & RubyGems was 0.3.2. Try installing it with gem install securerandom -v 0.3.2 and then running the current command again
securerandom requires Ruby version >= 3.1.0. The current ruby version is 2.6.10.210.

    • sudo gem install cocoapods pod --version
    • 최신 Ruby 버전 설치(버전은 에러에서 확인)
    • sudo gem install cocoapods
    • rbenv install 3.2.2 rbenv global 3.2.2 exec $SHELL ruby -v # -> 3.2.2
  • source ~/.zshrc
### Project root에서

```bash
cd ios
pod install
```

→ 성공적인 설치가 되었다면?

> **Pod installation complete!**
> 
> 
> There are X dependencies from the Podfile and X total pods installed.
> 

위와 같은 메세지가 출력됨

상황

ios 빌드는 잘 되는 상황이지만, android 빌드 시 문제가 발생.

💡 PowerShell에서 환경변수 출력하기

Get-ChildItem Env:[환경 변수명]

지금까지 얼만큼 시도했는지 기억은 안 난다.. 이렇게 하다간 도저히 해결하지 못할 것 같아서, 기록하며 이 문제를 해결할 시점엔 이 트러블슈팅 과정을 나 뇌리에 새기기 위해 기록하려고 합니다.

n번째 시도…, 기본 환경에서 테스트

💡기존의 프로젝트는 여러 의존성이 엮여있기 때문에, 제 문제해결의 과정이 문제가 있었는지 확인하기 위해 새로운 프로젝트에서 안드로이드를 실행 환경을 구축하고 빌드해보려고 합니다. 여기서 된다면, 실행 방법에는 문제가 없고 제 프로젝트 환경에서 문제가 있는 거겠죠…

React Native 프로젝트를 생성한 후, Android 모드로 실행하여 애뮬레이터를 돌려보려면 아래의 명령을 실행하면 됩니다.

  1. Metro 실행 npx react-native start를 실행하지 않으면 아래와 Doctor 검사 시, 아래와 같은 메세지가 출력됩니다.
  2. npx react-native start #Metro 실행
  3. Android 실행(Metro 실행 창과 다른 Tab을 열고 실행해야 합니다)→ 안됨… 0%에서 올라가지 않는 상황 ㅠ
  4. npx react-native run-android #Android 실행
  5. doctor를 통해 검사해보자android sdk가 준비되지 않았다고 한다.
  6. npx react-native doctor
  7. 안드로이드 SDK를 설치합시다.
  8. 다시 npx react-native doctor, 다행히도 정상적으로 모든 준비가 완료되었다.

n+1 번째 시도…, 이제 다시 실행시켜 봅시다!

  • 현재 탭에서 Metro 실행
  • npx react-native start
  • 다른 탭에서 Android 실행
  • npx react-native run-android

결과(ERROR)

(node:27328) ExperimentalWarning: CommonJS module C:\Users\zaq48\AppData\Roaming\npm\node_modules\npm\node_modules\debug\src\node.js is loading ES Module C:\Users\zaq48\AppData\Roaming\npm\node_modules\npm\node_modules\supports-color\index.js using require().
Support f
or loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:3904) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info A dev server is already running for this project on port 8081.
info Installing the app...

> Task :app:installDebug
[PropertyFetcher]: TimeoutException getting properties for device emulator-5554
java.lang.Throwable: TimeoutException getting properties for device emulator-5554
        at com.android.ddmlib.PropertyFetcher.handleException(PropertyFetcher.java:259)
        at com.android.ddmlib.PropertyFetcher$1.run(PropertyFetcher.java:213)
Caused by: com.android.ddmlib.TimeoutException
        at com.android.ddmlib.AdbHelper.read(AdbHelper.java:882)
        at com.android.ddmlib.AdbHelper.readAdbResponse(AdbHelper.java:351)
        at com.android.ddmlib.internal.DeviceImpl.lambda$executeRemoteCommand$18(DeviceImpl.java:795)
        at com.android.ddmlib.internal.DeviceImpl.logRun1(DeviceImpl.java:1801)
        at com.android.ddmlib.internal.DeviceImpl.executeRemoteCommand(DeviceImpl.java:755)
        at com.android.ddmlib.internal.DeviceImpl.lambda$executeRemoteCommand$15(DeviceImpl.java:618)
        at com.android.ddmlib.internal.DeviceImpl.logRun1(DeviceImpl.java:1801)
        at com.android.ddmlib.internal.DeviceImpl.executeRemoteCommand(DeviceImpl.java:615)
        at com.android.ddmlib.internal.DeviceImpl.lambda$executeShellCommand$13(DeviceImpl.java:557)
        at com.android.ddmlib.internal.DeviceImpl.logRun1(DeviceImpl.java:1801)
        at com.android.ddmlib.internal.DeviceImpl.executeShellCommand(DeviceImpl.java:554)
        at com.android.ddmlib.PropertyFetcher$1.run(PropertyFetcher.java:209)

[PropertyFetcher]: TimeoutException getting properties for device emulator-5554
java.lang.Throwable: TimeoutException getting properties for device emulator-5554
        at com.android.ddmlib.PropertyFetcher.handleException(PropertyFetcher.java:259)
        at com.android.ddmlib.PropertyFetcher$1.run(PropertyFetcher.java:213)
Caused by: com.android.ddmlib.TimeoutException
        at com.android.ddmlib.AdbHelper.read(AdbHelper.java:882)
        at com.android.ddmlib.AdbHelper.readAdbResponse(AdbHelper.java:351)
        at com.android.ddmlib.internal.DeviceImpl.lambda$executeRemoteCommand$18(DeviceImpl.java:795)
        at com.android.ddmlib.internal.DeviceImpl.logRun1(DeviceImpl.java:1801)
        at com.android.ddmlib.internal.DeviceImpl.executeRemoteCommand(DeviceImpl.java:755)
        at com.android.ddmlib.internal.DeviceImpl.lambda$executeRemoteCommand$15(DeviceImpl.java:618)
        at com.android.ddmlib.internal.DeviceImpl.logRun1(DeviceImpl.java:1801)
        at com.android.ddmlib.internal.DeviceImpl.executeRemoteCommand(DeviceImpl.java:615)
        at com.android.ddmlib.internal.DeviceImpl.lambda$executeShellCommand$13(DeviceImpl.java:557)
        at com.android.ddmlib.internal.DeviceImpl.logRun1(DeviceImpl.java:1801)
        at com.android.ddmlib.internal.DeviceImpl.executeShellCommand(DeviceImpl.java:554)
        at com.android.ddmlib.PropertyFetcher$1.run(PropertyFetcher.java:209)

Skipping device 'BusTrackerDevice1_35(AVD)' for ':app:debug': Unknown API Level

> Task :app:installDebug FAILED
62 actionable tasks: 17 executed, 45 up-to-date

info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor 


FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> java.util.concurrent.ExecutionException: org.gradle.api.GradleException: Failed to install on any 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 10s
error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > java.util.concurrent.ExecutionException: org.gradle.api.GradleException: Failed to install on any 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 10s.

 

  1. Metro 실행
    1. 명령어: npx react-native start
  2. Android Studio - Device Manager - Amulator 실행
  3. Doctor 검사를 실행하여 최종 확인
    1. 명령어
    2. npx react-native doctor
  4. Android 실행(성공!!!)
  5. npx react-native run-android(성공!!)

n+2 번째 시도…, 내 프로젝트 환경에 적용해보자

내 프로젝트에서 다시 시도해보자

프로젝트의 안드로이드 빌드 관련 파일들을 모두 테스트 환경과 동일하게 해줍니다. (이러면 문제가 없겠죠)

  1. 자, 우선 Metro를 실행시킵니다.음… react-native cli 버전이 최신 버전이 아닌 것 같군요. 업데이트 해봅시다.
  2. 의존성을 설치합시다
  3. npm install
  4. 버전 확인
  5. npx react-native --version
  6. 다시
  7. npx react-native start
  8. 이제 doctor 검사를 진행해볼까요?오케이!! 좋습니다. 제발 돼라…
  9. npx react-native run-android으로 Android 실행정..말.. 너무하다ㅠㅠㅠ 왜 안 될까요?
  10. 혹시 adb 문제일 가능성???
  11. 문제는 없었습니다… 도대체 뭐가 문제일까요
  12. 연결된 애뮬레이터가 없어서 그럴까요..?라는 생각을 해봤지만
  13. 기기는 잘 연결돼있지만 React-native가 이를 인식하지 못할 수도 있다고 하더군요..
  14. adb kill-server adb start-server
  15. 지금까지 너무 많은 테스트를 해서, 캐시 문제일 가능성을 고려하여 캐시를 모두 초기화해줍니다.
  16. 왜 이것도 0%에서 오르지 않는 걸까요…?ㅠ
  17. cd android ./gradlew clean
  18. 다른 실행중인 서버가 문제를 일으킬 수 있으니 Node도 초기화합니다.
  19. npx react-native start --reset-cache
  20. 디버깅 모드로 한번 실행해봅시다…이 역시 0%에서 오르지 않네요..
  21. npx react-native run-android --verbose
  22. Gradle 문제일 가능성Gradle에 대해 공부해보고 다시 문제를 해결해봅시다.
    • Gradle 알아보기Gradle-Wrapper를 사용하는 이유에 대해서 알아보았는데, Gradle 프로젝트를 빌드하고 사용하기 위해선 프로젝트의 Gradle과 내 컴퓨터의 Gradle 버전을 항상 동일하게 유지시켜줘야 하는데, 이는 상당히 번거로운 작업이라 Gradle-Wrapper를 사용한다고 합니다.
    • Gradle-Wrapper를 사용하면 Gradle을 설치하지 않고도 지정된 Gradle 버전으로 빌드를 진행할 수 있다고 합니다.

참고 문서

https://ttl-blog.tistory.com/1268

  1. 남은 건 Gradle…

n+3 번째 시도…, 그냥 다시 만들자

도저히 안돼서, 기존의 프로젝트에 환경구축을 하지 않고 새로 프로젝트를 만들어서 기존 프로젝트의 코드를 이전시켜야겠습니다…

  1. 새로운 프로젝트 생성
  2. npx @react-native-community/cli init BusBuddyBuddy
    1. # BudBuddyBuddy 자리는 프로젝트명을 입력
  3. 프로젝트 코드를 모두 옮겨줍니다
  4. package.json을 보며, 필요한 패키지 모듈을 모두 설치해줍니다.(정말 귀찮군요…)
  5. 자 이제 시작해봅시다(이전의 SDK, 애뮬레이터 실행은 모두 완료됐다는 가정 하에 실행)
  6. npx react-native start
    1. # Metro 실행(n번 탭) npx doctor # 결과 -> 모두 정상 npx react-native run-android # Android 실행(n+1번 탭)

트러블슈팅 간에 알게된 유용한 지식

gradle 캐시 제거

"C:\Users[사용자명].gradle\caches” 디렉토리를 삭제해줍니다.

삭제하는 이유

  • 의존성 충돌이 발생할 경우, 초기화하는 역할을 합니다.
  • 빌드 시, 문제가 발생할 때 프로젝트 루트의 android파일 위치에서 gradlew clean 명령이 반영되지 않을 때가 있습니다. 이럴 때 해당 경로의 caches 디렉토리를 삭제해주면 됩니다.

빌드 캐시 제거

gradlew clean

해당 명령을 사용하는 이유

  1. 의존성이 충돌하는 경우.
  2. 지난 빌드와 다음 빌드 간의 의존성 충돌이 우려되는 경우

위와 같은 경우에 실행합니다.

혹시 명령을 실행해도 반영되지 않는다면 gradle 캐시 제거에서 언급한 경로에서 caches 디렉토리를 삭제하여 문제를 해결할 수 있었습니다.

캐시 초기화와 함께 시작

npx react-native start --reset-cache

"C:\Users\zaq48\AppData\Local\Temp\metro-cache”경로의 캐시를 초기화한다고 합니다.

가끔 Metro 서버가 비정상적으로 작동하여 앱이 제대로 실행되지 않을 때 해당 명령을 사용하여 해결하였습니다.

 

 

Notion에 정리한 자료로는 정말 참고 사진이 많은데ㅠ 티스토리에는 목록 사이사이에 자유롭게 사진이 안 들어가서 많이 뺐습니다.. 원본을 보고 싶으신 분들은 아래 노션 페이지를 접속해주세요!

React-native, android 환경설정 트러블슈팅...

저작자표시