React Native Expo 안드로이드 APK 빌드 여정기

Dev Smile·2024년 2월 10일

React Native

목록 보기

5/5

TL;DR

eas.json

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "preview4": {
      "distribution": "internal"
    },
    "production": {}
  }
}

빌드

eas build -p android --profile preview

[ http:// ]로 시작하는 API를 사용중이라면,

다음을 설치
```
npx expo install expo-build-properties
```

app.json 수정 (맞춤법 주의)

"plugins": [
    [
      "expo-build-properties",
      {
        "android": {
          "usesCleartextTraffic": true
        }
      }
    ]
  ]

빌드 여정기

React Native Expo를 이용하여 어플을 개발하고 APK 파일로 만들기 위한 빌드를 진행해 보았습니다.

제일 처음 진행한 방법은 다음 링크를 참고하여 진행하여 보았습니다.

https://docs.expo.dev/develop/development-builds/create-a-build/

위 링크를 참고하여 eas.json을 수정하고 빌드하였습니다.

eas.json

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  }
}

eas build --profile development --platform android

expo.dev 페이지의 Builds 탭에서 빌드 상세 내역을 확인할 수 있었습니다.

그러나 첫 번째 시도 결과물은 development build 였습니다. 빌드 결과물을 어플에 설치하여 보니 다음과 같은 결과물이 나왔습니다.
그래서 빌드를 했던 명령어에서 "development" 문구를 제거해보았습니다.

eas build --platform android

그러나 두 번째 시도의 결과물은 AAB 파일이 생성되었습니다.
- AAB는 APK의 용량 문제를 해결하기 위해 등장한 Google Play를 비롯한 기타 앱 스토어와 Android Studio, Gradle, Unity 등의 빌드 도구에서 지원하는 Android용 배포 형식이다.

APK 파일을 생성하기 위해 세 번째 시도는 다음 링크를 참고하여 진행해 보았습니다.

https://docs.expo.dev/build-reference/apk/

eas.json 수정

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "preview4": {
      "distribution": "internal"
    },
    "production": {}
  }
}

빌드 명령어 : eas build -p android --profile preview
APK가 생성되었습니다.

그런데 문제점이 생겼습니다. 어플에 붙여둔 API가 동작을 하지 않았습니다.(http://로 시작하는 서버)
- 왼쪽이 빌드 전 에뮬레이터로 확인한 부분, 오른쪽이 APK로 설치한 어플 사진입니다.
- 에뮬레이터의 초록색 부분이 서버에서 받아온 데이터를 보여주는 부분인데, 지금 빌드한 어플은 API에서 받아온 정보를 표시하지 않았습니다.
API 수신은 제대로 하고 있는지 확인하기 위해 안드로이드 시뮬레이터에 APK를 설치하고 log를 찍어보았습니다.
- 다음 에러가 발생했습니다.
- [AxiosError: Network Error]

google과 chatgpt에 검색 중 다음과 같은 문구를 발견
- Android 9 (Pie) 이상에서는 기본적으로 모든 HTTP 트래픽이 차단됩니다. 만약 서버가 HTTP를 사용 중이라면, AndroidManifest.xml에 android:usesCleartextTraffic="true" 설정을 추가해야 할 수 있습니다. 그러나 이는 임시적인 해결책일 뿐, 가능한 빨리 HTTPS로 전환하는 것이 좋습니다.
- 이것을 expo에 적용하는 방법으로 app.json에 다음 문구를 추가하였습니다.
  - "useCleartextTraffic": true
  - "permissions": ["INTERNET", "ACCESS_NETWORK_STATE"]
- 하지만 같은 에러 로그를 남기면서 실패.
axios를 fetch로 변경을 해보았습니다.
- 그러나 모양이 다른 같은 에러가 발생하였습니다.
- [TypeError: Network request failed]
- error.stack으로 찍어봐도 명확한 문제점을 알려주지는 않습니다.
  
  'TypeError: Network request failed
  at anonymous (address at index.android.bundle:1:127429)
  at apply (native)
  at anonymous (address at index.android.bundle:1:91744)
  at _callTimer (address at index.android.bundle:1:91076)
  at callTimers (address at index.android.bundle:1:92806)
  at apply (native)
  at callFunction (address at index.android.bundle:1:58011)
  at anonymous (address at index.android.bundle:1:56507)
  at guard (address at index.android.bundle:1:57445)
  at callFunctionReturnFlushedQueue (address at index.android.bundle:1:56465)'
해결이 되지 않아 네이버를 GET 해보았습니다.
- 불러와집니다..?
- 현재 API 서버는 http를 이용중인데, 이것이 문제일까요?
- 관련 옵션인, "useCleartextTraffic": true는 app.json에 했는데 어떤 점이 필요한지 찾아봐야겠습니다.
다른 방식으로 추가하는 방법을 찾았습니다. https://stackoverflow.com/questions/77090627/react-native-expo-android-http-server-network-request-failed
- 다음을 설치
```
npx expo install expo-build-properties
```
- app.json 수정
```
"plugins": [
    [
      "expo-build-properties",
      {
        "android": {
          "useCleartextTraffic": true
        }
      }
    ]
  ]
```
- 하지만 똑같이 실패
apktool을 이용하여 설정이 제대로 들어갔는지 확인
- 안 들어가 있음
- useCleartextTraffic가 안 됨..?
- 철자를 다시 확인... 😯 use"s"CleartextTraffic 로 다시시도
- 충격..... 성공....