CodePush 적용

적용 과정

AppCenter 설정

npm install -g appcenter

npm install appcenter appcenter-analytics appcenter-crashes

npm install react-native-code-push

AppCenter 앱 생성

Appcenter 페이지에서 생성 또는 cli 활용

• Appcenter 페이지

• Release Type = Production
• Platform = React Native
• cli

appcenter apps create -d appName-aos -o android -p react-native
appcenter apps create -d appName-ios -o ios -p react-native

AppCenter 로그인

appcenter login

브라우저가 열리면 표시되면 token을 복사해서 터미널에 붙여넣는다.

 

앱의 배포 단계 추가

appcenter codepush deployment add -a <ownerName>/<appName> Staging

appcenter codepush deployment add -a <ownerName>/<appName> Production

appcenter 에서 생성된 앱으로 진입했을때의 url

https://appcenter.ms/users/dabinim09-gmail.com/apps/앱이름

중에서

dabinim09-gmail.com - ownerName

앱이름 - appName

 

앱의 배포 키 확인

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

 

React Native SDK 설정

codePush 패키지 설치

import codePush from 'react-native-code-push'
...
export default codePush(App)

// App.tsx

패키지 문서 : https://github.com/microsoft/react-native-code-push#getting-started

 

IOS 설정

AppCenter-Config.plist 파일 생성 후 Xcode의 info.plist이 속한 디렉토리 우클릭후 Add Files to 를 클릭해 파일 추가

• ios/<appName>/AppCenter-Config.pliast
  • App Secret Key 는 Appcenter의 앱에 진입 후 세팅 메뉴에 들어가면 찾을 수 있다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
    <key>AppSecret</key>
    <string>{AppSecretKey}</string>
    </dict>
</plist>

• ios/<appName>/info.plist

...
<key>CodePushDeploymentKey</key>
<string>${CODEPUSH_KEY}</string>
...

• ios/<appName>/AppDelegate.m

// 여기 추가
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
#import <CodePush/CodePush.h>
// 여기까지
...
#ifdef FB_SONARKIT_ENABLED // 꼭 이거 위에 추가해야됨
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...

// 여기 추가
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
// 여기까지

return YES;
}

// 아래와 같은 코드를 찾아서
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

// 아래 코드로 변경 (Debug와 Production에서 로드할 JS Bundle을 나눔)
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [CodePush bundleURL];
#endif
}

• Multi Deployment
  • Xcode → Project → Info
  • Duplicate “Release” Configuration 클릭 후 이름을 Staging으로 변경

  

  
  
  • Build Setting 탭에서 + 버튼을 눌러 Add User-defined Setting 선택
  • Multi_Deployment_Config 로 이름 바꾸고
  • $(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
  • 를 추가해주면 Debug, Release, Staging 생긴다.
  • 한번더 Add User-defined Setting 선택 후
  • CODEPUSH_KEY 라고 이름 바꾸고 각 트랙별로 Deployment key를 넣는다
  
  
  • Deployment key 확인 명령어는
  • appcenter codepush deployment list -a <ownerName>/<appName> -k

┌────────────┬───────────────────────────────────────┐
│ Name       │ Key                                   │
├────────────┼───────────────────────────────────────┤
│ Production │ ..................................... │
├────────────┼───────────────────────────────────────┤
│ Staging    │ ..................................... │
└────────────┴───────────────────────────────────────┘

 

Android 설정

• android/app/src/main/assets 디렉토리에 appcenter-config.json 생성

{
  "app_secret": "App Secret Key"  // <-- 위에서 넣었던 그 Secret key
}

• strings.xml

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>

• 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" // <- 새롭게 추가한 라인
...

• MainApplication.java

// 여기 추가
import com.microsoft.codepush.react.CodePush;
// 여기까지

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
				// 여기 추가
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
				// 여기까지
    };
}

• Multi Deployment
  • android/app/build.gradle

...
defaultConfig {
...
// 여기 추가
resValue 'string', "CODE_PUSH_APK_BUILD_TIME", String.format("\\"%d\\"", System.currentTimeMillis())
// 여기까지
}
...

// 각각 resValue 추가
buildTypes {
        debug {
            signingConfig signingConfigs.debug
            resValue "string", "CodePushDeploymentKey", "코드푸시 Staging 키"
        }
        releaseStaging {
                    resValue "string", "CodePushDeploymentKey", "코드푸시 Staging 키"
                    matchingFallbacks = ['release']
                }
        release {
						...
            resValue "string", "CodePushDeploymentKey", "코드푸시 Production 키"
        }
    }

 

배포

현재 작업중인 앱 확인

appcenter apps get-current

작업중인 앱 지정

appcenter apps set-current <ownerName>/<appName>

배포 목록 조회

appcenter codepush deployment list

┌────────────┬──────────────────────────────────┬───────────────────────────┐
│ Name       │ Update Metadata                  │ Install Metrics           │
├────────────┼──────────────────────────────────┼───────────────────────────┤
│ Production │ Label: v5                        │ Active: 67% (2 of 3)      │
│            │ App Version: 1.0.8               │ Installed: 2 (-1 pending) │
│            │ Mandatory: No                    │                           │
│            │ Release Time: Jan 07, 05:10 PM   │                           │
│            │ Released By: dabinim09@gmail.com │                           │
├────────────┼──────────────────────────────────┼───────────────────────────┤
│ Staging    │ No updates released              │ No installs recorded      │
└────────────┴──────────────────────────────────┴───────────────────────────┘

릴리즈 배포

appcenter codepush release-react -d Staging 또는 Production