AppCenter 설정이 끝나면 다중 배포 테스트를 포함한 React Native 클라이언트 SDK 설정을 해주어야 한다. 이 부분은 적용하는데 시간이 조금 걸렸다. 다중 배포 테스트란 코드푸시를 효과적으로 테스트하기 위해 배포 단계를 Staging과 Production으로 활용하여 테스트하는 것을 말한다. 자세한 설명은 설정이 끝난 후에 하도록 하겠다.

SDK 설치

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

IOS 설정

1. CocoaPods Dependency 설치를 해준다.

cd ios && pod install && cd ..

2. AppDelegate.m 파일 헤더에 밑에 코드를 import 해준다.

#import <CodePush/CodePush.h>

3. 코드를 바꿔준다.

return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; // 이 부분을
return [CodePush bundleURL]; // 이 코드로 바꿔준다.

4. Info.plist 파일을 열어서 코드푸시 Deployment키를 다음 아래와 같이 넣어준다.

<key>CodePushDeploymentKey</key>
<string>$(CODEPUSH_KEY)</string>

Android 설정

1. anroid/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 파일을 열어서 다음과 같이 코드를 추가해준다.

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

3. android/app/src/main/java/com/medihere/chronic/MainApplication.java 파일을 열어서 상단에 다음 내용을 Import 해준다.

import com.microsoft.codepush.react.CodePush;

그리고 new ReactNativeHost(this) 코드를 찾아서 블록({}) 안에 다음 내용을 삽입해준다.

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

4. 설치의 마지막 단계로 strings.xml 파일을 열어서 다음과 같이 코드를 작업하면 된다.

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

4번 같은 경우 우리는 빌드 배포 자동 동기화를 진행하기 때문에 필요한 작업은 아니지만 빌드 배포 자동 동기화를 진행하지 않는다면 작업해주어야 하는 부분이다.

여기까지는 React Native 클라이언트 SDK 설치를 위한 작업이고 이제 앱을 빌드하거나 실행할 때 빌드와 배포 단계를 자동으로 동기화되도록 구성하는 설정이 필요하다. 쉽게 말하자면 앱의 Staging 빌드가 코드푸시의 Staging 배포와 자동으로 동기화되고 Release 빌드가 Production 배포화 동기화되도록 하는 작업이다. 아직 갈길이 멀다..

IOS 빌드 배포 자동 동기화

1. XCode를 열어서 Project -> Info Tab -> Configurations을 클릭해서 하단에 + 버튼을 누른 후에 'Duplicate "Release" Configuration' 버튼을 눌러서 Staging으로 이름을 생성한다.

2. Info 탭 옆에 있는 Build Settings 탭을 선택하여 + 버튼을 누르고 'Add User-Defined Setting'을 클릭한다. Setting의 이름을 MULTI_DEPLOYMENT_CONFIG로 생성한다.

3. MULTI_DEPLOYMENT_CONFIG의 Release와 Staging은 다음의 코드로 설정한다.

# Release
$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 
# Staging
$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME) 

4. 또 + 버튼을 다시 누르고 'Add User-Defined Setting'을 클릭해서 이번에는 CODEPUSH_KEY로 이름을 설정하고 Release와 Staging에 각 해당하는 빌드의 코드푸시 배포 키를 지정해준다.

모든 작업이 끝났다면 IOS 설정은 완료되었다!

Android 빌드 배포 자동 동기화

1. 전에 열었던 android/app/build.gradle 파일에 있는 buildTypes 블록({}) 안에 다음 코드를 추가해준다.

buildTypes {
        debug {
            ...
            // Note: CodePush updates shouldn't be tested in Debug mode as they're 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's 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와 안드로이드 모든 설정이 끝났다. 이제 다중 배포 테스트도 가능하다. 다중 배포 테스트는 Production과 Staging을 활용하여 효과적인 Workflow를 달성하는 것인데 그 워크플로는 다음과 같다.

1. Staging에 코드푸시 업데이트를 Release
2. 빌드와 업데이트를 확인하고 수정사항이 반영됐는지 다른 이슈는 없는지 확인
3. 문제없음을 확인하면 Staging의 Release를 Production으로 승격해서 Production에 바로 Release
4. 2번과 같이 실제 앱에 수정사항이 잘 반영됐는지 다른 이슈는 없는지 확인

이렇게 하면 앱 배포를 하기 전에 안전하고 효과적인 테스트가 가능하다.

이제 코드푸시 코드 작업을 진행하면 된다!