React Native — Code Push 3

지난 포스팅에서 Code Push 기본 설정을 했습니다. 이번 포스팅에서는 Android 셋팅을 하겠습니다.

본 포스팅은 React Native 0.61.5 버전에서 진행했습니다.

Code Push 1 — 기본 설정

Code Push 2 — iOS 설정

Code Push 3 — Android 설정

Code Push CLI 업데이트 (2021.6.30 추가)

android/app/build.gradle 파일을 엽니다. build.gradle 파일 가장 아래에 소스를 추가합니다.

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

Cannot add task ‘bundleDebugJsAndAssets’ as a task with that name already exists. 에러가 발생하면 apply from: “../../node_modules/react-native/react.gradle” 이 부분은 제거합니다.

MainApplication.java 파일을 엽니다. CodePush를 import 합니다.

import com.microsoft.codepush.react.CodePush;

ReactNativeHost 설정에 getJSBundleFile() 추가합니다.

@Override
protected String getJSBundleFile() {
    return CodePush.getJSBundleFile();
}

res/values/strings.xml 열어서 CodePushDeploymentKey를 추가합니다.

CodePushDeploymentKey 값은 아래 명령어로 확인합니다.

code-push deployment ls <appName> -k

여기까지 안드로이드 기본 설정을 완료했습니다.

이제 CodePush를 사용해보겠습니다. 아래 구현 소스를 참고합니다.

const App = () => {
  codePushSync = () =>{
    codePush.sync({
      updateDialog: { //업데이트 다이얼로그 설정
        title : "새로운 업데이트가 존재합니다.",
        optionalUpdateMessage : "지금 업데이트하시겠습니까?",
        optionalIgnoreButtonLabel : "나중에",
        optionalInstallButtonLabel : "업데이트"
      },
      installMode: codePush.InstallMode.IMMEDIATE //즉시 업데이트
    });
  }
useEffect(() => { //ComponentDidMount
    codePushSync();
    //앱이 켜졌을 때 마다 codePushSync() 실행해서 업데이트 체크한다.
    AppState.addEventListener("change", (state) => {
      state === "active" && codePushSync();
    });
  }, []);
  return (
    <>
      <Text> Hello!!!</Text>
    </>
  );
};
export default App;

시뮬레이터를 실행한 다음, Hello!!! 텍스트를 Hello Gale!!!로 수정합니다. 이제 CodePush 업데이트 명령어를 사용하겠습니다.

code-push release-react <appName> android -d Staging [or Production]

[Error] The uploaded package was not released because it is identical to the contents of the specified deployment’s current release. 에러가 나면 info.plist에 앱 버전을 하나 올려주고 다시 업데이트 명령어를 실행합니다.

Javascript 번들이 생성되고 CodePush 서버에 업로드 된 것을 확인할 수 있습니다. 앱을 종료하지 않고 아래로 내렸다가 다시 실행해 보겠습니다.

테스트는 시뮬레이터에서 Fast Refresh 기능을 끄고 진행했습니다. 개발모드에서 테스트 하시는 분은 반드시 Fast Refresh 기능을 Command+m 에서 꺼주세요!

업데이트 모달을 확인할 수 있습니다. 업데이트를 선택하면 앱이 재시작되고 Hello!!! 텍스트가 Hello Gale!!! 로 변경된 것을 확인할 수 있습니다.

여기까지 CodePush 에 대해서 살펴보았습니다. 디테일한 API는 react-native-code-push API에서 확인할 수 있습니다.

microsoft/react-native-code-push