[React-Native] android CodePush 시작하기

앞선 app center sdk가 정상적으로 설치되어 있다는 전제하에 진행합니다. 먼저 app center sdk 설치 관련 글을 참고하세요.

android CodePush 가이드
- 1. [React-Native] android App Center SDK 등록하기
- 2. [React-Native] android CodePush 시작하기 (현재 글)
- 3. [React-Native] android CodePush 를 통해 업데이트 진행하기

 

react-native-code-push 설치

react-native 프로젝트에 필요한 프로젝트를 설치합니다. npm 으로 설치 시 에러가 나면 yarn으로 시도해 보세요.

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

 

App Center CLI 설치

맥, 리눅스 사용자일 경우 sudo 권한으로 설치를 진행해 주세요.

sudo npm install -g appcenter-cli

 

Android 설정

코드를 몇 가지 파일에 추가해야 합니다.

React Native 0.60 version 이상을 전제로 설정을 진행합니다.

android/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')

android/app/build.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();
        }
        
    };
}

 

String.xml에 Deployment key 추가하기

[ 터미널에서 app center 로그인 ]

이후 팝업되는 브라우저에서 토큰 값을 복사하여 로그인을 완료합니다.

appcenter login

 

[ Deployment key 조회 ]

아래와 같은 명령을 터미널에 실행하여  deployment key를 확인합니다. 소유자이름과 앱이름은 app center 에 등록한 계정의 소유자이름 (app center 처음 1회 로그인 시 입력했던 이름), app center에 등록한 앱의 이름입니다.

예) TaeGyeongLee, TestApp_Android

appcenter codepush deployment list -a 소유자이름/앱이름 -k

┌────────────┬───────────────────────────────────────┐
│ Name       │ Key                                   │
├────────────┼───────────────────────────────────────┤
│ Staging    │ 비밀 ㅎ 							
├────────────┼───────────────────────────────────────┤
│ Production │ 비밀 ㅎ									
└────────────┴───────────────────────────────────────┘

 

[ String.xml 내용 추가 ]

이때, Staging deployment key 를 복사하여 String.xml 에 아래와 같이 추가합니다. Staging과 Production 배포에 관한 차이, 이해는 나중에 따로 글로 서술하도록 하겠습니다.

<string moduleConfig="true" name="CodePushDeploymentKey">Staging의 DeploymentKey</string>

 

[ codepush 최상단 파일에 선언 ]

이제 codepush가 업데이트할 범위를 지정해야 합니다. 최상단 루트 디렉토리에 있는 App.tsx 를 아래와 같이 수정해 주세요. 아래와 같이 코드를 작성할 경우 일반적으로 앱이 매번 실행될 때마다 codepush를 통해 업데이트를 진행하게 됩니다. 만약 업데이트 방식을 커스텀(예: 특정 버튼을 눌러 업데이트)하고 싶다면 이 글을 참고해 주세요.

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

function App(): JSX.Element {
  return (
   ...
  );
}

export default CodePush(App);

 

빌드 및 배포

이제 안드로이드에 관한 code push 세팅이 완료되었습니다. codepush 셋팅이 적용된 프로젝트를 이전과 같이 빌드 후 구글 플레이스토어에 배포해 주세요. 빌드 및 배포는 이 글을 참고해 주세요.

거의 다 왔습니다. 다음 글엔 codepush 가 적용된 어플리케이션을 수정하여 배포하는 과정을 서술하겠습니다.

 

출처

Get Started with the React Native Client SDK - Visual Studio App Center