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 로 다시시도
- 충격..... 성공....
- 또다른 문제는, 위 상황을 거치고 나니 에뮬레이터에 연결이 되지 않습니다.
