[ React Native ] Code Push 사용하기

1. AppCenter Cli 글로벌 설정으로 설치

$ npm install -g appcenter-cli

yarn으로는 설치가 안된다고 함

 

2. AppCenter 로그인

$ appcenter login

명령어 실행 직후 appcenter 홈페이지가 열림

로그인 하게되면 키값을 복사할수 있는데 복사해서 다시 터미널로 돌아가서 입력하면 로그인이 완료됩니다.

 

3. AppCenter에 앱 등록하기

appcenter apps create -d {앱 이름} -o {os} -p {플랫폼 타입}

같은 프로젝트라도 OS별로 등록해야함

1) appcenter apps create -d myapp_android -o Android -p React-Native
2) appcenter apps create -d myapp_ios -o iOS -p React-Native

<주의> OS 와 플랫폼은 대문자 소문자 구별되니 예시와 같이 입력되어야 함

 

4. 등록된 앱의 Staging, Production 키 등록하기

테스트할때는 Staging, 배포할때는 Production을 사용한다고 보면 됨

appcenter codepush deployment add -a {user name}/{앱 이름} {Staging or Production}

user name 은 3번에서 앱생성할때 Owner name에 해당되는 부분

Owner Name 이 minsu 였다면

1) appcenter codepush deployment add -a minsu/myapp_android Staging
2) appcenter codepush deployment add -a minsu/myapp_android Production
3) appcenter codepush deployment add -a minsu/myapp_ios Staging
4) appcenter codepush deployment add -a minsu/myapp_ios Production

위 4개 명령어를 모두 실행해야 하고 실행했을때 키 값을 반환해주니 기록해놓으시면 됩니다.

 

만약 키 값을 잊어버렸다면 아래 명령어를 입력해서 키를 다시 찾으시면 됩니다.

appcenter codepush deployment list -a {user name}/{앱 이름} -k

 

5. 프로젝트에 패키지 설치

저는 npm을 사용하니 

npm install react-native-code-push

// ios 설정
cd ios && pod install && cd ..

 

6.  iOS 설정

  1) VSCODE로 ios 폴더 app 폴더 안에 info.plist 에 값 추가하기

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

  2) Xcode 실행 AppDelegate.mm에 import 추가하기

#import <CodePush/CodePush.h>

  3) AppDelegate.mm 에서 값 수정하기

return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
---> return [CodePush bundleURL];  // 이걸로 수정

  4) 1에서 추가했던 CODEPUSH_KEY 전역변수 등록하기 (중요)

• Xcode에서 > Project > info > Configurations에 들어가 아래 + 버튼 클릭하여
  'Duplicate Release Configuration'을 선택추가하고 이름을 Staging으로 수정

 

• Project > Build Settings 좌상단 + 버튼 클릭  > 'Add User-Defined Setting 클릭

 

• 새로 추가된 항목의 이름을 MULTI_DEPLOYMENT_CONFIG로 해주고, Release와 Staging 각 항목에 다음과 같은 값을 추가

 

•  + 버튼 > 새롭게 하나 더 추가해서 CODEPUSH_KEY로 이름 수정하고 아까 키값을 입력해줍니다.
  Release > Production deployment key
  Staging > Staging deployment key

 

7. 안드로이드 설정

 안드로이드 스튜디오에서 gradle.properties 파일을 선택합니다.

(SDK 싱크 문제 때문에 vscode가 아닌 스튜디오에서 작업)

 

• gradle.properties 파일 하단에 코드추가

CODEPUSH_DEPLOYMENT_KEY_DEBUG=
CODEPUSH_DEPLOYMENT_KEY_STAGING={staging deployment key}
CODEPUSH_DEPLOYMENT_KEY_PRODUCTION={production deployment key}

 

• setting.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')

 

• app/src/main/java/MainApplication.java 에 import 및 코드 추가

...
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();
        }
      };
    ...
}

 

• app/build.gradle에 하단에 코드 추가

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

• 같은 파일 buildTypes 내부에 다음과 같이 코드 추가

buildTypes {
   debug {
      ...
      resValue "string", "CodePushDeploymentKey", CODEPUSH_DEPLOYMENT_KEY_DEBUG
   }
   release {
      ...
      resValue "string", "CodePushDeploymentKey", CODEPUSH_DEPLOYMENT_KEY_PRODUCTION
   }
   releaseStaging {
      initWith release
      resValue "string", "CodePushDeploymentKey", CODEPUSH_DEPLOYMENT_KEY_STAGING
      matchingFallbacks = ['release']
   }
}

같은 파일 defaultConfig 내부에 다음 코드 추가

android {
	...
	defaultConfig {
		...
		resValue 'string', "CODE_PUSH_APK_BUILD_TIME", String.format("\"%d\"", System.currentTimeMillis())
	}
	...
}

 

8. 프로젝트 설정

app.js에서 설정

import React from 'react';
import CodePush from 'react-native-code-push';

const App = ({}) => {
	return (
		...
	);
}

const codePushOptions = {
  checkFrequency: CodePush.CheckFrequency.ON_APP_START,
  updateDialog: { 
    title: '...', 
    optionalUpdateMessage: '...', 
    optionalInstallButtonLabel: '업데이트', 
    optionalIgnoreButtonLabel: '아니요.' 
  },
  installMode: CodePush.InstallMode.IMMEDIATE 
}

export default CodePush(codePushOptions)(App);

옵션 항목
CodePush.CheckFrequency.ON_APP_START: 앱을 첫 실행할 때마다
CodePush.CheckFrequency.ON_APP_RESUME: 앱을 잠시 나갔다가 다시 들어올 때 마다
(ex. 홈버튼을 눌렀다가 다시 앱 실행하는 경우)
CodePush.CheckFrequency.MANUAL: 수동지정(앱 코드에서 호출될 때마다)

 

installMode : 업데이트 실행할 시기를 선언

옵션 항목
CodePush.InstallMode.IMMEDIATE: 즉시 업데이트하고 다시 실행
CodePush.InstallMode.ON_NEXT_RESTART: 업데이트를 설치하려 하지만 강제로 앱을 재실행하진 않음. 앱이 자연스럽게 재실행되면 자동으로 업데이트를 실행한다.(자동 업데이트를 걸 때 좋음)
CodePush.InstallMode.ON_NEXT_RESUME: 업데이트를 실행하지만 앱 종료 후 사용자가 앱을 재실행할 때까지 앱이 자동으로 재실행되지 않는다.

 

updateDialog : 업데이트 팝업 뛰우는 설정

옵션 항목
title: "dialog 제목"
optionalUpdateMessage: "dialog에 띄울 메세지"
optionalInstallButtonLabel: "업데이트 실행버튼 라벨 => ex) '예'버튼"
optionalIgnoreButtonLabel: "업데이트 미실행버튼 라벨 => ex) '아니오'버튼"

설정을 안하려면 updateDialog : false 로 하면 됩니다.

 

9. 배포하기

appcenter codepush release-react -a {user name}/{앱 이름} -d {Production or Staging}

참고사이트

https://learn.microsoft.com/ko-kr/appcenter/distribution/codepush/cli

App Center CLI를 사용하여 CodePush 업데이트 릴리스 - Visual Studio App Center

여기서 배포 관련 명령어 살펴보면 됩니다.

 

10. 팁

디버그 모드에서는 확인이 어렵다보니 저같은 경우는

안드로이드는 apk 파일 추출 해서 설치해보고 코드 푸시한 다음 적용되는 지 확인하였습니다.

 

일일이 배포 명령어를 치기가 어렵다 보니 script화 시켜서 명령어 간소화 시키는 것을 추천합니다.

npm run codepush:android 
이런식으로 배포가 가능

 

타겟을 설정하는 것이 좋은데

appcenter codepush release-react -a {user name}/{앱 이름} -d Production --sourcemap-output --output-dir ./build -m -t '1.0.1'

> 1.0.1 버전만 코드푸시되게 설정한 부분

 

'1.0.1' 대신에 1.0으로 했을 경우

appcenter codepush release-react -a {user name}/{앱 이름} -d Production --sourcemap-output --output-dir ./build -m -t 1.0

1.0.X 해당하는 모든 버전이 코드푸시가 되어집니다.

타겟 버전을 정하는 것도 위 참고 사이트에서 확인 가능합니다.