CodePush 가이드

---

0. 프로젝트 생성

• 프로젝트가 존재하지 않는 경우, 다음 명령어를 통해 프로젝트를 생성합니다.

npx react-native init MyTestApp --template react-native-template-typescript

1. App Center 설정

• 최초 1회만 진행하면 됩니다. ( 1. App Center 설정 ~
• 터미널에 코드 입력

npm install -g appcenter-cli

• 터미널에 코드 입력

appcenter login

• 터미널에 코드 입력

appcenter apps create -d {{appName}}_android -o Android -p React-Native
appcenter apps create -d {{appName}}_ios -o iOS -p React-Native

• myProject_android 클릭 → Distribute 내의 CodePush 클릭 → Create standard deployments 클릭

• myProject_ios 클릭 → Distribute 내의 CodePush 클릭 → Create standard deployments 클릭

2. Android 설정

• android/settings.gradle 에 코드 추가
• if 문 이전에 코드를 추가해야 합니다.

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"
...

• MainApplication.java 에 코드 추가
• import com.~.CodePush 는 import java ~ 이전에 위치해야 합니다.

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

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();
        }
    };
}

• 터미널에 코드 입력

appcenter codepush deployment list -a <ownerName>/<appName> -k

• strings.xml에 String key를 입력

<resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
</resources>

3. iOS 설정

• AppDelegate.mm 또는 AppDelegate.m 파일에 코드 추가

// 상단에 추가
#import <CodePush/CodePush.h>

• 같은 파일에서, [코드 1]을 return [CodePush bundleURL]; 로 변경

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

// 다음 코드로 변경
return [CodePush bundleURL];

• 공식문서랑 코드가 다릅니다.
• 공식문서대로 코드를 입력할 경우, 정상적으로 Build가 되지 않습니다.

• 터미널에 코드 입력

appcenter codepush deployment list -a <ownerName>/<appName> -

• info.plist에 String key를 입력

<key>CodePushDeploymentKey</key>
<string>Acdg1bMSmJHzx90TNEiNHMJRj5pCRk2taVR8Y</string>

• 위의 사진처럼 중간을 찾아 들어가서 코드를 입력해 줄 필요는 없습니다.
• Release 배포 시 알파벳 순으로 정렬이 됩니다.

4. App.tsx 설정

• 터미널에 코드를 입력

npm i react-native-code-push

• App 컴포넌트를 codePush()로 감쌉니다.

import React from 'react';
import {Text, View} from 'react-native';
import codePush from 'react-native-code-push';

const App = () => {
  return (
    <View>
      <Text>Hello World! :D</Text>
    </View>
  );
};

export default codePush(App);

5. CodePush 배포 방법

• 반드시 Javascript와 관련된 내용의 업데이트만 진행해야 합니다.
• CodePush 측에서는 번들링이 된 파일이 Javascript만 변경되었는지 여부를 확인하지 않습니다.
• 이 문서에서는 Staging으로만 배포를 진행하고 있습니다.
• 안드로이드 빌드 시, npx react-native run-android --variant=release 를 사용해야 합니다.
• npx react-native run-android 에서는 CodePush가 정상 작동하지 않을 수 있습니다.

1. Android 배포

• 어플 버전은 android/app/build.gradle에서 versionName으로 확인 가능합니다.
• versionCode는 안드로이드에 배포할 때마다 매번 정수로 올리는 값으로, versionName과 다릅니다.

  

• Javascript 코드 수정 → versionName 변경 → 타겟 버전을 고려해서 터미널에 아래의 코드를 입력
• Android에서의 타겟 버전은 versionName입니다.

appcenter codepush release-react -a eikjae-gmail.com/myProject_android -d Staging -m -t 0.0.1

2. iOS 배포

• Javascript 코드 수정 → Xcode에서 Version 변경

• 타겟 버전을 고려해서 터미널에 아래의 코드를 입력
• iOS에서의 타겟 버전은 Version 입니다.

appcenter codepush release-react -a eikjae-gmail.com/myProject_ios -d Staging -m -t 0.0.1

6. CodePush 오류 해결 방법

• android/app/build.gradle 에 코드 추가

defaultConfig {
        ...
        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
        vectorDrawables.useSupportLibrary = true
        resValue 'string', "CODE_PUSH_APK_BUILD_TIME", String.format("\"%d\"", System.currentTimeMillis())
				
        if (isNewArchitectureEnabled()) {
            ...
        }
    }

7. CodePush 개선

• 이후 추가할 예정입니다.