[Expo] EAS로 Expo 프로젝트 빌드하기 안드로이드 배포파일 만들기 (apk파일) (feat.오류)

안녕하세요 오늘은 저번 포스팅에 이어서 EAS로 Expo 프로젝트를 빌드하는 과정에 대해 알아보려고 합니다!

창업팀에서 개발을 빨리 해야해서 Expo 프로젝트를 사용하고 빌드 및 배포까지 했어야 했어요.. android는 APK, ios는 testflight로 해야했습니다. EAS로 Expo 프로젝트를 빌드하는걸 하면서 gpt로 했다가 아주 혼났답니다.. 꼭 꼭 expo 문서를 확인하는게 제일 좋습니다!!

 

---

EAS란?

EAS(Expo Application Services)는 Expo 팀이 만든 Expo 및 React Native 앱을 위한 긴밀하게 통합된 클라우드 서비스 입니다.

이전에 Expo에 대해서 정리한 내용이 있는데 확인 부탁 드립니다!

https://gamza1013.tistory.com/133

[Expo] Expo 앱과 구성 파일, 개발주기에 대하여, EAS(Expo Application Services)란?

 

이제 바로 빌드하는 방법에 대해 설명해드리겠습니다! (이미지 캡처를 못해서,, 최대한 해보겠습니다) 먼저 android의 apk파일 생성하는 걸 먼저 작성하고 ios의 ipa파일 생성하는 방법에 대해 업로드 하겠습니다! ios는 ipa 파일을 만들 수 있지만 ipa파일만으로는 배포할 수 없고 App Store이나 Testflight에 업로드하는 방식이 있습니다. 오늘은 ipa 파일까지만 만드는 것을 하고 testflight에 만드는 것은 다음에 포스팅하도록 하겠습니다.

 

1. Expo 회원 가입, 로그인

https://expo.dev/

Expo

위 링크에 접속하여 회원가입, 로그인을 시도해줍니다.

 

1. 링크 접속해줍니다.

 

 

2. Sign Up / Log In을 선택해줍니다.

 

 

 

3. 로그인에 성공하면 Dashboard가 있을 텐데 프로젝트, activity 등 모두 비워 있을 겁니다(전 사용하던걸 캡처해서 모자이크 처리 해뒀습니다)

 

 

 

4. 그리고 Expo 프로젝트가 있겠죠? VSCode로 프로젝트를 열어주세요. 다른 툴로도 가능합니다!

만약 프로젝트가 없다면 아래의 명령어를 실행해서 프로젝트를 생성 해주세요

npx create-expo-app my-app(프로젝트이름)

 

 

 

5. EAS를 사용할 수 있도록 패키지를 설치해줘야 합니다.

npm install -g eas-cli

 

 

 

6. EAS에 로그인 해줍니다.

eas login

eas whoami // 로그인한 유저의 정보를 알기 위한 명령어

이 명령어를 실행하면 아이디와 비밀번호를 입력하면 됩니다.

그리고 이미 로그인 되어 있는 경우에는 'eas whoami' 를 실행하면 됩니다

 

 

7. 다음 명령어는 Expo 프로젝트의 EAS build를 구성하기 위한 명령어 입니다.

eas build:configure

 

이정도 실행하게 되면 EAS 빌드하기 위한 구성 및 설정이 완료된 것입니다. 이제 프로젝트 내에서 build의 설정 해줘야합니다.

 

그러면 프로젝트와 EAS 가상서버와 연결되는데 연결된 내용은 

app.json의 하단에 eas 프로젝트 id가 설정될 것입니다.

{
  "expo": {
    "name": "프로젝트이름",
    ...
    "extra": {
      "router": {
        "origin": false
      },
      "eas": {
        "projectId": "프로젝트 ID"
      }
    },
    "owner": "로그인 유저 정보"
  }
}

 

 

8. eas.json 파일 확인해야 합니다.

위 사진은 제일 처음 eas.json을 만들었을 때 작성되어 있던 것들입니다. eas.json을 수정해줘야 합니다.

그전에!!

development, preview, production이 있습니다. 저는 실제 앱과 비슷했으면 해서 preview나 production을 사용했습니다. 각 차이점은 이전 포스팅 내용에 정리되어 있습니다!

development : 개발자 도구가 포함되어 있어 앱스토어에 제출되지 않는다(iOS내부 배포용 빌드, 시뮬레이터용 빌드 구분하여 빌드 가능

preview : 개발자 도구가 포함되어 있지 않음. 프로덕션과 같은 환경에서 앱을 테스트하기 위해 만들어진 것.→ 앱 스토어에 배포하도록 서명되지 않았거나 스토어 배포에 최적화 되지 않은 방식임.(preview=.apk, google play store = .aab 권장)

production : 일반 대중에게 공개, TestFlight와 같은 스토어에서 진행하는 테스트 프로세스, 프로덕션 빌드는 앱 스토어를 통해 설치해야한다.(Android 에뮬레이터나 기기, iOS 시뮬레이터나 기기에 직접 설치 X), → 스토어에 제출할 때는 .aab. 를 “buildType”: “apk”사용하는 것이 좋음(기본구성)

 

스토어에 배포한다면 production을 하는게 제일 좋습니다.

 

 

 

 

2. EAS.json 설정하기

사실 그냥 빌드하는 거라면 아래의 명령어를 실행하면 됩니다.

eas build --platform android

하지만 이걸 바로 실행해도 오류야 너무 너무 많았었죠..

 

그래서 제가 빌드하면서 생겼던 오류를 정리해보려고 합니다.

 

 

 

2-1. 환경 변수 설정 오류(API 실행 안됨, Event 반응 없음 오류)

저는 환경 변수를 사용해서 API를 실행하는 방식으로 했는데 eas.json에 설정하지 않고 빌드하면 아무 Event가 없었습니다.. 설마 했는데 설정하고 빌드하니까 잘 되더라구요. 대신 그냥 코드에 작성하셨더라면 아마 문제가 없을 것 같습니다. 

 

"env"라는 필드를 사용하여 환경변수로 설정한 API 링크를 설정해줘야 합니다.

{
  "build": {
    "production": {
      "node": "16.13.0",
      "env": {
        "API_URL": "https://company.com/api"
      }
    },
    "preview": {
      "extends": "production",
      "distribution": "internal",
      "env": {
        "API_URL": "https://staging.company.com/api"
      }
    }
  }
}

https://docs.expo.dev/build/eas-json/#environment-variables

Configure EAS Build with eas.json

 

2-2. 너무 오래 걸리는 빌드(리소스 클래스 선택)

가장 오래 걸리는 빌드는 거의 5시간이 걸렸습니다.. 보통 처음 빌드할 때 그정도 걸렸던 것 같습니다.

리소스 클래스는 EAS 빌드하면서 사용하는 가상 머신의 리소스 구성(CPU 코어, RAM 크기)입니다. 기본적으로 리소스 클래스는 로 설정되어 있으며 medium, 일반적으로 소규모 및 대규모 프로젝트에 충분합니다. 그러나 프로젝트에 더 강력한 CPU나 더 큰 메모리가 필요하거나 빌드를 더 빨리 완료하려는 경우 large작업자로 전환할 수 있습니다.

 

{
  "build": {
    "production": {
      "android": {
        "resourceClass": "medium"
      },
      "ios": {
        "resourceClass": "large"
      },
    }
  }
}

(저는 최대한 빨리 됐으면 좋겠어서 둘다 large로 했다가 빌드할 때 로그로 힘들다고 하는게 있어서 둘 다 medium으로 바꿨었습니다..)

 

마지막으로 expo 문서에 있는 예외들을 자세하게 확인 할 수 있는데 작성 외 에러가 발생한 거라면 문서 검색을 해보는게 좋을 것 같습니다! 그리고 댓글에도 작성해주시면 저도 같이 찾아볼게요

 

최종 저의 eas.json 파일입니다

{
  "build": {
    "development": {
      "extends": "production",
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "env": {
        "EXPO_PUBLIC_API_URL": "https://"
      },
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "preview4": {
      "distribution": "internal"
    },
    "production": {
      "node": "18.18.0",
      "env": {
        "EXPO_PUBLIC_API_URL": "https://"
      },
      "autoIncrement": true,
      "android": {
        "resourceClass": "medium"
      },
      "ios": {
        "resourceClass": "medium"
      }
    }
  },
  "cli": {
    "appVersionSource": "remote"
  }
}

이것저것 설정하다가 보니 위와 같이 만들어졌고, preview도 여러개 설정해뒀습니다. 

그리고 안드로이드 빌드할 때 주의 사항을 찾아보다 우연히 알게 되었습니다.

/android/app/src/main/AndroidManifest.xml 파일에서 추가 부탁드립니다

<application
...
android:usesCleartextTraffic="true" // <-- 이것을 추가했습니다
...>

https://velog.io/@dev-smile/React-Native-Expo-%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-APK-%EB%B9%8C%EB%93%9C-%EC%97%AC%EC%A0%95%EA%B8%B0

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

자세한 내용은 위 블로그를 참고해주세요 덕분에 잘 마무리 됐습니다 감사합니다!

 

 

 

 

 

 

 

3. Expo 프로젝트 안드로이드 APK파일 만들기

 

저는 APK 파일을 만들때 prebuild 명령어를 실행했는데 오류가 많아서 EAS로 갈아탔었습니다. EAS로 했을 때 기본 영상을 보면서 했던 것 같습니다. 영어로 되어 있긴 한데 영포자라.. 좀 오래 걸렸습니다

https://www.youtube.com/watch?v=nxlt8uwqhpE

 

이어서 APK 파일을 생성해보겠습니다.

 

저는 안정적이게 preview를 빌드했습니다. production으로는 Google Play Store에는 안하기 때문에 preview를 사용했습니다.

eas build -p android --profile preview

 

 

아무 문제가 없다면 바로 빌드가 됩니다.

해당 진행된 상황은 expo.dev에서 확인할 수 있답니다. 진행 상황, 오류 사항 등 확인할 수 있습니다.

빌드에 성공하면 캡처는 못했지만 apk 파일 링크가 생성되고 

정상적으로 처리되었다면 아래의 이미지와 동일합니다.

 

하지만 여기에서 오류가 많이 발생했었는데 라이브러리 문제, gradle 문제 등이 있었습니다. 에러 사항들은 목록을 보면서 처리해보려고 합니다! (처음에는 prebuild했던 것에서 오류가 생겨서,, 한 계정은 거의 빌드 가능한 사양을 모두 다 사용했었답니다..)

 

 

1. Build failed: We've lost connection to the worker. Two common reasons: 1. Worker ran out of memory. Try running your build on a large worker. Learn more at https://docs.expo.dev/build/eas-json/#selecting-resource-class 2. Worker experienced a network issue. This is most likely an intermittent problem. Try running the build again.

 이 에러는 gradlew를 실행하면서 너무 오래걸려서 타임 아웃이 걸린 것처럼 연결이 끊긴겁니다.

1번은 위에 설명 드렸던 리소스 클래스를 설정하라는 에러이고 eas.json의 large, medium 처리 했던 부분을 수정해주면 됩니다. 아래의 링크를 확인해서 수정해주시면 됩니다. 

https://docs.expo.dev/build/eas-json/#selecting-resource-class

Configure EAS Build with eas.json

2번은 네트워크 이슈때문에 다시 빌드해보라는 뜻입니다

 

리소스 클래스를 수정하고 또 빌드했을 때 오류 발생을 적게 하기 위해서 2번 내용도 찾아봤는데 라이브러리가 너무 많거나 그러면 발생가능한 오류입니다. 그래서 라이브러리를 정리하는 명령어를 실행했었습니다.

아 그리고!!!!

그래도 계속 같은 오류가 발생하면 약간 eas 서비스를 자주 사용해서 그런 것같아서 좀 시간이 지난 후에 하니까 잘되더라구요.. 낮에는 잘 안하고 밤이나 새벽에 하니까 잘 됐어요!

 

 

1. 라이브러리 재설치 or 최신화

2. expo doctor로 라이브러리 검사

rm -rf node_moduls // 바로 전체 삭제되니까 주의해야합니다!
npm install

npx expo-doctor

 

이렇게 일단 빌드를 했는데 다른 오류가 발생했었습니다!

Failed to read the app config from the project using "npx expo config" command: npx expo config --json exited with non-zero code: 1. Falling back to the version of "@expo/config" shipped with the EAS CLI. Failed to resolve plugin for module "expo-build-properties" relative to "/경로/경로/경로/..."

위 에러를 해석해보면 앱의 경로를 읽는 데에 실패했다는 에러 사항입니다. "expo-build-properties"를 읽을 수 없었다는 겁니다. 

1. app.json 에서 expo-propertise 삭제

2. 다음 명령어 실행하여 튀고 있는 metro를 수정

pm ls metro

저는 아래와 같은 오류가 발생했었습니다.

mvp_app@1.0.0 /Users/경로/경로/...
└─┬ react-native@0.76.5 invalid: "0.76.7" from the root project
  └─┬ @react-native/community-cli-plugin@0.76.5
    ├─┬ metro-config@0.81.1
    │ └── metro@0.81.1 deduped
    └─┬ metro@0.81.1
      └─┬ metro-transform-worker@0.81.1
        └── metro@0.81.1 deduped

일단 @react-native/community-cli-plugin@0.76.5의 에러기 때문에 react native의 버전을 "0.76.7"로 버전 업해줬습니다.

참고했던 자료가 있었는데 지금은 안보이네요,, 

다른 오류가 생길 수도 있으니까 댓글로 남겨주시면 저도 함께 찾아보겠습니다! 그리고 각 에러 발생한 것들은 각 하나씩 자세하게 알아본 뒤에 포스팅 해야 겠네요..! 

 

 

2. Build failed: Gradle build failed with unknown error. See logs for the "Run gradlew" phase for more information.

Run gradlew에서 오류가 많이 났었습니다.. 

이 에러는 Execution failed for task ':expo-modules-core:compileReleaseKotlin'. 이게 문제의 요점입니다.

이문제도 node_module과 package-lock.json을 삭제하거나 재설치하면 해결됐던 것 같습니다.

rm -rf node_module
rm -rf package-lock

npx expo install --check
-> y

 

3. Execution failed for task ':app:processReleaseGoogleServices'.907> No matching client found for package name 'com.moobean.mvp_app' in /home/expo/workingdir/build/mvp_app/android/app/google-services.json

 

이건 푸시 알림 설정을 위해서 구글 firebase를 사용한 google-service.json 파일을 못읽겠다는 에러입니다. 이건 다음에 푸시알림 설정하는 포스팅을 진행하겠습니다. 푸시 알림 설정 포스팅에서 자세하게 설명할 텐데 아래의 명령어를 실행하면 됐답니다..!

npx expo install expo-notifications expo-device expo-constants

 

이런 에러가 가장 많이 발생했었고 결국 계정 3개를 만들어서 겨우 재시간에 성공했습니다.

위 에러 사항이 아니라 다른 에러가 발생하셨으면 댓글로 말씀해주시면 저도 같이 찾아보겠습니다!

 

 

---

마무리

오늘은 EAS를 사용하여 Expo 프로젝트를 빌드해봤습니다. EAS를 사용하여 apk와 ipa를 만들수 있으며 제한 사항이 많은 ios는 Apple development에서 해야할 것들도 자동으로 할 수 있도록 EAS의 프로세스가 계속해서 확장되고 성장하고 있다는 점에서 본받고 싶고, 너무 편한 기능이었습니다. 한달에 가능한 빌드 제한이 있지만 창업 계획 때문에 계정은 여러개 만들었다는 것은 못본척 해주세요ㅎㅎ... 아무튼 오늘 뒤죽 박죽이지만 eas로 빌드해보는 것을 알아봤는데 다시 정리할 수 있는 경험이었습니다. 얉은 지식이지만 기록이라도 하자는 마인드입니다! 빨리 취업할 수 있기를..