[React Native] CodePush

환경정보

Apple M3 MacOS 15 

react : 18.3.1

react-native : 0.76.3

 

AppCenter Cli 설치

ㄴ npm install -g appcenter-cli

 

AppCenter Cli 로그인

ㄴappcenter login

ㄴ명령어 실행 직후 appcenter 홈페이지가 열린다.

ㄴ로그인을 완료하면 로그인 토큰값이 가운데 표시되는데 복사하여

ㄴEnter your token from the browser : 에 복사한 토큰값을 붙여넣기 하고 Enter 

ㄴ그럼 아래에 Logged in as [로그인한 사용자 이름] 이라고 나온다.

 * 추후 로그인한 사용자 이름이 기억이 안나면 appcenter login 을 실행하여 위와 같이 진행하면 확인이 가능하다.

 

AppCenter Console 에 앱 등록

ㄴ appcenter apps create -d <앱 이름> -o <OS> -p <플랫폼 타입>

 * OS와 플랫폼 대소문자는 예시와 같이 해야함.

 * 예) 앱이름 : myapp_android / myapp_ios, OS: Android, iOS, 플랫폼 타입: React-Native

         appcenter apps create -d myapp_android -o Android -p React-Native

         appcenter apps create -d myapp_ios -o iOS -p React-Native

 

Staging / Production 키 발급 및 등록

ㄴ appcenter codepush deployment add -a <로그인한 사용자 이름>/<앱이름> <모드(Staging or Production)>

 * 예) 로그인한 사용자 이름: tester-gmail.com, 앱이름 : myapp_android / myapp_ios, 모드: Staging / Production

        appcenter codepush deployment add -a tester-gmail.com/myapp_android Staging

        appcenter codepush deployment add -a tester-gmail.com/myapp_android Production
        appcenter codepush deployment add -a tester-gmail.com/myapp_ios Staging

        appcenter codepush deployment add -a tester-gmail.com/myapp_ios Production 

ㄴ appcenter codepush deployment list -a [로그인한 사용자 이름]/[앱이름] -k 명령어를 통해 Staging과 Production 값 확인 가능

 

React Native 설정

ㄴ npm install react-native-code-push

ㄴ App.jsx 

import codePush from 'react-native-code-push'
...
export default codePush(App)

 

Android 설정

ㄴ android/gradle.properties

...
CODEPUSH_DEPLOYMENT_KEY_DEBUG=
CODEPUSH_DEPLOYMENT_KEY_STAGING=<Staging 키>
CODEPUSH_DEPLOYMENT_KEY_PRODUCTION=<Production 키>

 

ㄴ android/setting.gradle

...
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

 

ㄴ android/app/build.gradle

...
apply from: "../../node_modules/react-native/react.gradle"
+ apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

defaultConfig {
		...
+ 		resValue 'string', "CODE_PUSH_APK_BUILD_TIME", String.format("\"%d\"", System.currentTimeMillis())
	}
...
...
buildTypes {
   debug {
      ...
+      resValue "string", "CodePushDeploymentKey", CODEPUSH_DEPLOYMENT_KEY_DEBUG
   }
   release {
      ...
+      resValue "string", "CodePushDeploymentKey", CODEPUSH_DEPLOYMENT_KEY_PRODUCTION
   }
+   releaseStaging {
+      initWith release
+      resValue "string", "CodePushDeploymentKey", CODEPUSH_DEPLOYMENT_KEY_STAGING
+      matchingFallbacks = ['release']
   }
}


...
if (enableHermes) {
 ...
+  releaseStagingImplementation files(hermesPath + "hermes-release.aar")
}

 

ㄴ src/com/<패키지명>/MainApplication.java

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...

+         // 2. Override the getJSBundleFile method in order to let
+         // the CodePush runtime determine where to get the JS
+         // bundle location from on each app start
+         @Override
+         protected String getJSBundleFile() {
+             return CodePush.getJSBundleFile();
        }
    };
}

 

iOS 설정

ㄴ cd ios && pod install

ㄴ Xcode 열고

ㄴ info.plist

<key>CodePushDeploymentKey</key>
<string>${CODEPUSH_KEY}</string>

ㄴ AppDelegate.m 

#import <CodePush/CodePush.h>

// return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 

ㄴ> 이렇게 수정 : return [CodePush bundleURL];

 

ㄴ <Project> -> info -> Configuration

+ 버튼 클릭
ㄴ Duplicate Release Configuration 클릭
ㄴ Staging 이라고 수정

 

ㄴ <Project> -> Build Settings

+ 버튼 클릭
ㄴ Add User-Defined Setting
ㄴ MULTI_DEPLOYMENT_CONFIG 등록
ㄴ Release 에 $(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 등록
ㄴ Staging 에 $(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME) 등록

+ 버튼 클릭
ㄴ Add User-Defined Setting
ㄴ CODEPUSH_KEY 등록
ㄴ Release 에 <Production 키> 등록
ㄴ Staging 에 <Staging 키> 등록

 

 

앱설치

ㄴ 앱을 Metro 없이 실제 디바이스에 설치하여 테스트

ㄴ Android 는 apk 파일 만들어서 실제 디바이스에 설치

ㄴ iOS 는 TestFlight 에 업로드하여 설치

 

Android

cd android 
./gradlew clean  
// 앱의 apk 파일을 만드려면 keystore 가 있는 상태여야함.
./gradlew assembleRelease<Staging|Production> 

cd /android/app/build/outputs/apk/release<Staging|Production>
// adb devices 로 연결된 실제 디바이스 확인 후 설치
adb install app-release<Staging|Production>.apk

 

iOS

 

AppCenter 에 배포
ㄴ appcenter codepush release-react -a <로그인한 사용자 이름>/<앱 이름> -d <모드(Staging or Production)>

* 예) appcenter codepush release-react -a tester-gmail.com/myapp_android -d Staging

ㄴ 배포 확인 : appcenter codepush deployment list

ㄴ 배포 에러 해결 :

Error: The uploaded package was not released because it is identical to the contents of the specified deployment's current release.

--disable-duplicate-release-error 추가하여 다시 배포

 

Workflow

1. Staging에 코드푸시 업데이트를 Release

2. 빌드와 업데이트를 확인하고 수정사항이 반영됐는지 다른 이슈는 없는지 확인

3. 문제없음을 확인하면 Staging의 Release를 Production으로 승격해서 Production에 바로 Release

4. 2번과 같이 실제 앱에 수정사항이 잘 반영됐는지 다른 이슈는 없는지 확인

 

 

 

 

 

 

 

 

 

 

참고 사이트 : React Native에서 CodePush 사용하기