이전 글인 [RN Library 📚] codepush 도입하기 - 1. app center 셋팅에 이어서
codepush를 도입하기 위해 프로젝트에 react-native-code-push SDK를 심어보자.

---

react-native-code-push 셋팅

프로젝트에 react-native-code-push를 설치하고 ios/android 각각 setup해줘야 한다.
버전마다 설치 방법이 상이하게 다르다고 하니 꼭 공식문서를 참고해서 셋팅하시길..

npm install --save react-native-code-push

Android 셋업

android 셋업

1. 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')

2. android/app/build.gradle 파일에 codepush.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. 
라는 오류가 발생했고 첫번째 줄을 주석 처리하면 해결된다는 글을 발견했다. 

3. MainApplication.java를 공식문서 내용대로 수정한다.

...
// 1. codepush 패키지를 import한다. 
import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

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

        // 2. getJSBundleFile 메소드를 오버라이드 한다.
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

4. 배포키를 strings.xml에 추가한다. staging, production 두가지 key 중에 사용할 환경의 key를 넣어주면 된다.
   만약 staging, production 두 환경을 모두 사용하고 싶다면, 5.로 넘어가자

// 배포키 알아내기
appcenter codepush deployment list -a <ownerName>/<appname> -k

// strings.xml
<resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">Staging deploymentkey</string>
 </resources>

5. multi deployment 환경 세팅하기 (문서)
   staging, production 두 환경을 모두 사용하고 싶다면, android/app/build.gradle에 두 환경의 배포키를 추가해줘야 한다.

android {
    ...
    buildTypes {
        debug {
            ...
            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>"'
            ...
        }
    }
    ...
}

iOS 셋업

ios 셋업

1. cd ios && pod install && cd ..
2. AppDelegate.m 파일 상단에 #import <CodePush/CodePush.h>를 추가한다.
   아래 before 코드를 찾아 after 코드로 바꿔준다.

// before
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
// after
return [CodePush bundleURL];

5. Info.plist파일에 아래 코드를 추가한다.

// 배포키 알아내기
appcenter codepush deployment list -a <ownerName>/<appname> -k

// Info.plist
<key>CodePushDeploymentKey</key>
<string>Staging deploymentkey</string>

프로젝트에 codepush 적용하기

최상위 컴포넌트에 아래와 같은 작업을 해야 한다. 관련 옵션도 설정해줄 수 있는데 아래 링크를 참고하자. '앱이 시작할때 업데이트를 할 것이냐' 등의 옵션이 있다.
codepush api 확인하기

import React from 'react';
import codePush from 'react-native-code-push'; // here!


const App = () => (
   <SomeComponent />
)

// here! 각종 codepush 관련 옵션을 설정하고
const codePushOptions = {
  checkFrequency: codePush.CheckFrequency.ON_APP_START,
  installMode: codePush.InstallMode.IMMEDIATE,
}

// here! 최상위 컴포넌트를 codepush 래퍼로 감싸서 export 시키고, 해당 컴포넌트를 앱에 등록시킵니다.
export default codepush(codePushOptions)(App)

릴리즈 하기

프로젝트 루트 디렉토리에서 한다.

// 릴리즈 하기
appcenter codepush release-react -a <ownerName>/<appname> -d Staging
or
appcenter codepush release-react -a <ownerName>/<appname> -d Production

// codepush에 이름 붙이기
appcenter codepush release-react -a <ownerName>/<appname>  -m --description "Modified the header color"

// 배포 확인하기
appcenter codepush deployment list -a <ownerName>/<appName>

Production으로 배포할 경우 실 배포 앱에 적용된다.(?) 무슨 뜻이지?
staging과 production의 차이를 잘 모르겠다. 경험을 해봐야겠다.
일단 전부 production key를 사용하고 production으로 릴리즈 해본자.

이렇게 배포가 성공했는데 실 배포 앱에 적용되지 않는다면 배포된 파일의 appcenter key 와 staging key와 현재 적용하고 있는 파일의 appcenter key 와 staging key가 일치하는지 확인해 봐야 한다.

2021.08.02 추가
staging, production은 말그대로 dev, prod 환경이라고 생각하면 된다. 실제 유저에게 보여지는 앱을 개발하는 분들이라면 두 환경을 모두 사용하는게 좋을듯해서 multi-deployment을 세팅해서 사용하시길 권장 드힌다.