[React-Native] React-Native CLI / Expo EAS CLI Deploy, Build

CLI란?

명령줄 인터페이스(CLI)는 키보드를 이용해 운영 체제와 상호 작용하는 방식이다. 명령줄 인터페이스를 사용하면 텍스트 명령을 입력하여 모든 서버 또는 컴퓨터 시스템에서 프로그램을 구성, 탐색 또는 실행할 수 있다. Linux, macOS와 Windows를 포함한 모든 운영 체제는 시스템과 더 빠르게 상호 작용할 수 있는 CLI를 제공한다.

참조 : https://aws.amazon.com/ko/what-is/cli/

 

 

React-Native는 앱 개발을 위한 다양한 도구와 CLI(Command Line Interface)를 제공한다. 특히 두 가지 주요 CLI 도구가 있는데, 바로 React-Native CLI, Expo CLI 이다.

 

• React Native CLI란?
  • React Native CLI는 기본적으로 네이티브 모듈을 직접 사용할 수 있는 환경을 제공한다. 이는 기존 네이티브 라이브러리를 직접 활용하려는 경우에 적합하다.
  • 개발자는 Xcode 및 Android Studio 같은 네이티브 개발 도구를 사용하여 앱을 빌드하고 디버깅할 수 있다.
• Expo CLI란?
  • Expo는 React Native의 상위 레이어로, 많은 기본 기능이 내장된 관리형 워크플로우를 제공한다.
  • Expo의 장점은 OTA(Over-the-Air) 업데이트, 카메라 및 위치 서비스와 같은 기본적인 기능을 손쉽게 사용할 수 있다.
  • 하지만 필요없는 기능까지 함께 포함해 빌드하기 때문에 용량이 더 커진다는 단점이 있다.

 

CLI가 제공하는 도구들은 여러가지지만 내가 앱을 빌드하면서 느꼈던 빌드 방법의 차이점에 대해 작성하려고 한다.

 

 

React-Native CLI

apk build

 

우선 apk 파일 빌드 전 단계에 대해 알아보니 React Native 애플리케이션을 네이티브 환경(Android 또는 iOS)에서 실행할 수 있는 번들 파일이 필요하다고 한다.

이 번들 파일을 생성하는 명령어 바로 아래 명령어다. 이를 터미널에 입력하면

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

• npx react-native bundle: npx는 npm 패키지를 실행하는 도구이며, react-native bundle은 번들링 명령어이다.
• -platform android: 번들을 생성할 플랫폼을 지정한다.
• -dev false: 개발 모드를 비활성화한다.
• -entry-file index.js: 애플리케이션의 번들링을 시작할 진입 파일(entry file)을 지정한다. 보통 index.js 또는 App.js 이다.
• -bundle-output android/app/src/main/assets/index.android.bundle: 생성된 번들 파일의 출력 경로를 지정한다. 이 파일이 나중에 네이티브 코드와 함께 APK 빌드에 포함된다.
• -assets-dest android/app/src/main/res/: 애플리케이션에서 사용되는 이미지, 폰트 등의 에셋을 저장할 디렉토리를 지정한다. 이 곳으로 에셋들이 복사된다.

 

이러한 번들 생성 후에는 터미널에 npm 명령어를 입력해 빌드를 해준다.

 npm run android  

 

이렇게 안드로이드 빌드를 해주면 android > app > build > outputs > apk 폴더에 apk 파일이 생성된다.

 

aab build

 

출시버전은 빌드 방법이 조금 다르다.

 npx react-native build-android --mode=release

 

공식문서에 따르면 이 명령어를 터미널에 입력하면 된다고 한다.

 

 

하지만 이외에도 playstore와 관련해서 각자의 keystore를 적용해야한다.

AndroidManifest.xml 파일을 각자 애플리케이션에 맞게 수정하고, keystore.jks 파일도 관리해줘야 빌드가 가능하다.

 

MYAPP_RELEASE_STORE_FILE=
MYAPP_RELEASE_KEY_ALIAS=
MYAPP_RELEASE_STORE_PASSWORD=
MYAPP_RELEASE_KEY_PASSWORD=

 

Expo CLI

Expo CLI의 빌드 방법은 훨씬 간단하다.

( velog에 적었던 글들을 차근차근 tistory로 옮길 예정입니다. )

[Expo][react-native] Expo EAS Deploy, Build(android, ios)

 

Expo CLI는 이전에는 Expo build를 사용했지만 이제 EAS 빌드를 사용한다.

 

Building Standalone Apps(expo build)

Building Standalone Apps

이건 더 이상 사용하지 않는다.

 

EAS

yarn global add eas-cli

 

Create your first build

Expo Application Services (EAS)

 

 

app.json

 

IOS

"bundleIdentifier": "co.gpthealth.fitnee",
			"buildNumber": "1.0.0"

 

Android

"package": "co.gpthealth.fitnee",
			"versionCode": 1,

 

bundleIdentifier는 앱이 가져야 하는 고유한 이름이다. 보통은 회사의 도메인 이름과 앱의 이름을 적으면 된다 !

buildNumber는 버전을 나타낸다. 새로운 앱을 빌드할 때마다 숫자가 하나씩 올라간다. expo는 publish를 통한 업데이트가 가능하므로 많이 빌드할 일이 없다고 한다.

expo build:ios 명령어는 2023년 1월 4일부터 사용이 중단됐다. 대신 eas build를 사용하여 iOS 앱을 빌드할 수 있다. 이를 위해 eas-cli 패키지를 설치해야 한다.

 

 

#npm install -g eas-cli
yarn global add eas-cli

#설치 후 로그인(엑스포 아이디로 하면 됨)
eas login

#로그인 성공후 프로젝트 구성
eas build:configure

 

eas build:configure 이 명령어는 첫 빌드에만 사용하고, 이후에는 expo build:{platform} --config app.production.json 과 같은 명령을 사용해야한다.

 

Configure EAS Build with eas.json

자동으로 생성된 eas.json 파일을 사용해서 빌드환경을 구성할 수 있다.

 

내부 (테스트) 배포용 빌드 구성하기

 

아래와 같이 eas.json을 열고 내부배포용 빌드 프로필을 추가

{
  "build": {
    "preview": {
      "distribution": "internal"
    }
  }
}

빌드 종류 

다 정리했기 때문에 필요에 맞춰 사용하면 된다.

eas device:create
eas build:resign

#내부 빌드 프로필로
# preview 구성으로 android,ios 플랫폼에 대한 빌드 생성
eas build --profile preview --platform all

# preview 구성으로 ios 플랫폼에 대한 빌드 생성
eas build --profile preview --platform ios

# preview 구성으로 android 플랫폼에 대한 빌드 생성
eas build --profile preview --platform android

#Store용 빌드
eas build --platform android

eas build --platform ios

eas build --platform all

#development 모드
eas build --profile development --platform ios

eas build --profile development --platform android

#시뮬레이터용 develpment 모드
eas build --profile development-simulator --platform ios

eas build --profile development-simulator --platform android

#xcode로 시뮬레이터 빌드
npx react-native run-ios

 

prebuild 이후에는 npm start를 사용할 수 없었고, 인앱결제를 적용한 이후에는 더 이상 expo start를 사용할 수 없어서 실기계와 같은 역할을 할 수 있게 해주는 develoment모드가 매우 중요했다.

 

나는 특히 이상하게 npx react-native run-ios 명령어를 사용하면 오류가 너무 많이 생겨서 사용이 불가능했다. 핸드폰에 앱을 설치하려고 해도 무결성 이상 문구가 생겨 불가능했다.

무결성을 확인할 수 없기 때문에 이 앱을 설치 할 수 없습니다

 

이때 가능했던 것이 eas build --profile development-simulator --platform ios 시뮬레이터로 develoment 빌드 하는 것이었고, dev 빌드는 개발 중 유용하게 사용가능하다.

 

 

참고로, Expo CLI가 지원하는 Node.js 버전은 16.x 이하기 때문에 16.x 버전을 사용하는 것이 좋다.

 

빌드가 완료되면 expo.io 에 올라간다. 그리고 그 파일을 다운받으면 된다.

코드를 가지고 새로운 번들을 expo publish하면, 그 내용이 앱에 들어간다. ⇒ Over the Air Update(OTAU). Release channel은 우리가 만든 앱의 서로 다른 버전들을 말하는데, 업데이트를 하려면

expo publish —release-channel <your-channel>

 

라고 하면 된다. < >은 깃허브의 브랜치 같은 것이다.

 

Increment the Expo SDK Version
Change anything under the `ios`, `android`, or `notification` keys
Change your app `splash`
Change your app `icon`
Change your app `name`
Change your app `owner`
Change your app scheme
Change your `facebookScheme`
Change your bundled assets under `assetBundlePatterns`

하지만 이 모든 경우에는 publishing이 아니라 새로 re-building 해야한다.

 

Expo

EAS Submit

Submit to the Apple App Store

How to resolve EAS Build Expo Doctor error?

 

EAS ID

"eas": {
        "projectId": "a9c237c7-a7f7-4d65-bf88-d~" 
        // 이는 저절로 생성되며 본인에 맞게 작성하면 된다. 이때 기기마다 다르기 때문에 같은 프로젝트라도 다른 사람이 한다면 수정해야한다.
      }

 

projectId는 서버랑 연결해주는 ID 이다.

 

EAS Update

 

Expo 프로젝트의 app.json 파일 또는 app.config.js 파일에서 "version" 필드를 원하는 버전으로 값을 수정한다.

예를 들어, "version": "1.0.1"과 같이 버전 번호를 업데이트, 변경 사항을 커밋하고 앱의 소스 코드와 함께 저장소에 push 한다.

 

터미널에 아래와 같이 명령어를 입력해 업데이트(publish)한다.

eas update --branch branchName --message "write your message..."

 

명령어를 입력하면 dist 폴더가 생성 된 뒤 변경된 내용이 작성되고, branch에 변경된 내용이 적용되고, branch와 chennel이 연결되어 있기에 빠르게 변경사항이 적용된다.

 

 

 

 

.

.

.

.

참고자료

[React Native] React Native CLI 시작하기

[react-native] 안드로이드 APK(AAB) 파일 생성하기📱

[expo] ios 빌드하기

[앱 배포] ReactNative로 개발 IOS 첫 빌드 및 배포 방법 정리