[RN/Android] CodePush 사용기(1)

React Native 하면 빠질 수 없이 나오는 CodePush

 

(사족으로, RN은 모바일의 SPA라는 느낌이다)

 

CodePush는 스토어 심사 없이 바로 앱을 업데이트 할 수 있는 기능이다. 안드 최초 심사는 기간이 꽤 걸려서, 심사 결과를 기다리는 동안 앱을 고쳐두고 이후 업데이트 할 계획이다. 단, 자바스크립트 코드에만 한정된다. (노드 모듈도 안됨) 네이티브 코드를 수정하면 재심사를 받아야 한다. 그러니까 Code-Push를 세팅하고, 즉각 업데이트를 하는 건 아주 이상적인 솔루션이지 않을까? 웹앱처럼 동작한다!

 

CodePush 서버에 릴리즈한 업데이트와 앱을 동기화한다는 아이디어인것 같다. 아직 Push 기능을 사용하진 않았으니, 직접 해본 후 사용기(2)로 돌아오겠다. 이 글에서는 안드로이드 세팅을 다룬다. (2022.10.14 작성)

• 콘솔을 사용하는 방법도 있는데, 여기는 웹으로 들어가는 법을 다룬다!

1. 앱센터에 가입한다

https://appcenter.ms/

2. 앱 등록하기

https://appcenter.ms/apps/create

플랫폼, OS를 잘 선택해주자. (그런데 Swift도 이게 된단 말인가?)

팁으로 iOS, Android를 따로 만들어줘야 하는데 앱 이름 뒤에 -aos나 -ios를 붙이면 좋다

3. 노드 모듈 설치

npm i react-native-code-push
npm install appcenter appcenter-analytics appcenter-crashes
npm i -g appcenter-cli

4. appcenter login

appcenter login
appcenter codepush deployment list -a [오너명]/[앱이름] -k

login을 하면 브라우저로 가서 토큰을 입력하면 되고

list를 치면 key가 나와야 하는데 나는 나오지 않았다…

그래서 따로 배포 단계를 추가해줬다

appcenter codepush deployment add -a [오너명]/[앱이름] Staging
appcenter codepush deployment add -a [오너명]/[앱이름] Production

이제 다시

appcenter codepush deployment list -a [오너명]/[앱이름] -k

를 치면 배포 키를 확인할 수 있다! 잘 적어두자.

요런 감성으로 나옴

5. 안드로이드 세팅

react-native-code-push/setup-android.md at master · microsoft/react-native-code-push

저기를 참고해서 하면 됨

 

android/settings.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"
...

참고로 빌드하다 중복 에러나면

위에 apply from: "../../node_modules/react-native/react.gradle" 를 지워주면 해결된다

 

android/app/src/main/java/com/myapp/MainApplication.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();
        }
    };
}

나의 경우 Staging, Production 두 단계를 분리했지만 실 사용에서는 한 단계만 사용했다.

만약 두 단계를 분리하고 싶을 경우에는(multi deployment) 아래와 같이 설정

android {
    ...
    buildTypes {
        debug {
            ...
            // Note: CodePush updates should not be tested in Debug mode as they are overriden by the RN packager. However, because CodePush checks for updates in all modes, we must supply a key.
            resValue "string", "CodePushDeploymentKey", '""'
            ...
        }

        releaseStaging {
            ...
            resValue "string", "CodePushDeploymentKey", '"<INSERT_STAGING_KEY>"'

            // Note: It is a good idea to provide matchingFallbacks for the new buildType you create to prevent build issues
            // Add the following line if not already there
            matchingFallbacks = ['release']
            ...
        }

        release {
            ...
            resValue "string", "CodePushDeploymentKey", '"<INSERT_PRODUCTION_KEY>"'
            ...
        }
    }
    ...
}

 

그렇지 않은 경우에는(하나만 사용할 경우)

appcenter codepush deployment list -a [오너명]/[앱이름] -k

요걸로 알아낸 Staging의 키를 가지고 와서

res/values/strings.xml

<resources>
...
    <string moduleConfig="true" name="CodePushDeploymentKey">여기에 key넣기 </string>
    <string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
    <string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
...
 </resources>

를 넣어주면 된다.

 

참고로 저 다른 string들은 안넣어주니 오류가 났었다. 두개이상 쓸 때도 저기 밑에 두가지 string 값은 넣어두는게 좋을듯

 

아직 안 끝났다!

android/app/src/main/assets/appcenter-config.json 를 만들어서

{
  "app_secret": "{Your app secret here}"
}

appcenter에 있는 app secret를 저기에 넣고 저장해주면 된다.

app center > myapp> overview에 있다.

이 정보는 꼭 숨겨야 함!

 

cd android

./gradlew clean

를 해서 기존 빌드를 지우고 한번 잘 빌드되는지 해보자.

6. RN 세팅

이제 진짜 거의 끝~~

 

App.tsx

import codePush from "react-native-code-push";

const codePushOptions: CodePushOptions = {
  checkFrequency: CodePush.CheckFrequency.MANUAL, //업데이트 언제 체크하고 반영할지 정함
  installMode: CodePush.InstallMode.IMMEDIATE,
  mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE, //업데이트 어떻게 할건지
};

function App() {
}

export default codePush(codePushOptions)(App);

저런 식으로 옵션을 정할 수도 있는데 옵션 없이 codePush(App) 만 해도 된다. (나는 옵션을 안넣었다)

---

 

여기까지 하면 끝!

데일리 세션이나 액티브 유저도 트래킹할수 있다.

 

누가 뭘 눌렀는지도 트래킹하려고 했는데 원래는 다른 툴들을 생각하고 있었다… 그런데 생각보다 뭐가 더 있어서 App Center를 좀더 알아봐야겠다.

 

활성유저 그래프 인데

원래는 4명이었다!!!!

 

에뮬레이터 1,

앱 삭제하고 다시깐 에뮬레이터 2,

폰으로 apk 다운받았지만 빌드가 이상하게돼서 삭제한 3,

스토어 올리기 전 점검용으로 받은 4

 

그러니까 내가 4번 해서 4명이었는데 지금 확인하니까 14명이다

10명은 대체 누구지? 아무에게도 배포 안했는데?

하고 보니까

 

넥서스.... 미국... 캐나다.... 아!!

 

구글 심사를 넣었기 때문에 지금 심사를 하고 있는 거구나… 이렇게 빨리 되다니 깜짝 놀랐다

모쪼록 앱이 통과되길 바라며, CodePush(2)로 다시 포스트를 잇겠다.

진짜 끝~