평생 공부만 해야할듯

#1 번글에서 CodePush 라이브러리를 추가 했습니다.

https://gigas-blog.tistory.com/270

네이티브에서의 설정을 마쳤으니 이번글에서는 ReactNative Plugin을 사용해보도록 하겠습니다.

https://docs.microsoft.com/ko-kr/appcenter/distribution/codepush/rn-plugin

# 간단한 사용 방법

간단하게 CodePush 설정을 한다면 아래와 같이 진행합니다.

기본 옵션으로는 앱 시작시 업데이트를 확인합니다. 업데이트가 완료되면 다음번에 앱 실행시 자동으로 다운로드되고 설치 됩니다. 만약 Required Update 옵션이 켜져 있다면 즉시 설치됩니다.

1. codePush로 래핑

App 컴포넌트를 codePush로 랩핑합니다.

이렇게 한줄만 추가해주면 기본적인 옵션으로 codePush가 동작됩니다.

import React from 'react'
import { View, Text } from 'react-native'
import codePush from 'react-native-code-push'

const App = () => {
    return (
        <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        }}>
            <Text>App</Text>
        </View>
    )
}

export default codePush(App)

2. ES7 데코레이터 구문

두번째로는 @codePush 구문을 추가로 위와같은 동작을 합니다.

import React from 'react'
import { View, Text } from 'react-native'
import codePush from 'react-native-code-push'

@codePush
const App = () => {
    return (
        <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        }}>
            <Text>App</Text>
        </View>
    )
}

export default App

# CodePush Option

CodePush에는 다양한 옵션이 있습니다. 

https://docs.microsoft.com/ko-kr/appcenter/distribution/codepush/rn-api-ref

- CheckFrequency

이 옵션은 AppCenter 서버와 동기화할 시기를 지정합니다.

1. codePush.CheckFrequency.ON_APP_START (0)

앱 프로세스가 시작될 때마다 업데이트를 확인합니다.

(기본옵션으로 일반적으로 많이 사용합니다.)

2. codePush.CheckFrequency.ON_APP_RESUME (1)

앱이 백그라운드에서 포그라운드로 진입시 업데이트를 확인합니다.

(보통 이 옵션은 사용자가 사용중에 갑자기 업데이트를 하기 때문에 잘 사용하지 않습니다.)

3. codePush.CheckFrequency.MANUAL (2)

업데이트에 대한 자동 확인을 사용하지 않도록 설정합니다. 별도로 codePush.sync()를 호출하여 업데이트를 확인합니다.

(별도 업데이트 체크를 하고 Custom Dialog, Progress를 제어 할때 사용합니다.)

- InstallMode

업데이트가 설치되고 앱에 적용할 시기를 지정합니다.

1. codePush.InstallMode.IMMEDIATE (0)

업데이트가 완료되면 즉시 앱을 다시 시작합니다.

2. codePush.InstallMode.ON_NEXT_RESTART (1) 

업데이트가 완료되고 다음에 앱을 시작할 때 업데이트가 적용됩니다.

3. codePush.InstallMode.ON_NEXT_RESUME (2)

업데이트가 완료되고 백그라운드에서 포그라운드로 진입시 업데이트가 적용됩니다.

4. codePush.InstallMode.ON_NEXT_SUSPEND (3)

백그라운드에 있는 동안에만 업데이트를 설치합니다.

minimumBackgroundDuration 옵션으로 몇 초 후에만 설치할 것을 지정합니다. (기본값 0)

- updateDialog

updateDialog와 Custom Dialog는 별도의 글로 작성할 예정입니다.

ReactNative 코드에서 CodePush Option은 아래와 같이 넣을 수 있습니다.

import React from 'react'
import { View, Text } from 'react-native'
import codePush from 'react-native-code-push'

const App = () => {
    return (
        <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        }}>
            <Text>CodePush</Text>
        </View>
    )
}

const codePushOptions = {
	// 옵션 적용 범위
    codePush.CheckFrequency.ON_APP_START,
    codePush.InstallMode.IMMEDIATE,
    ...
}

export default codePush(codePushOptions)(App)

간단하게 CodePush Plugin 사용방법을 알아보았습니다.

ReactNative의 장점은 CodePush 로 앱을 심사없이 없데이트 할 수 있다는 것 인데요.

지금부터 CodePush 설정을 진행해보려고 합니다.

1. AppCenter 계정만들기

AppCenter 회원가입을 진행합니다.

GitHub계정이나 , Google, Facebook 계정으로도 등록이 가능합니다.

https://appcenter.ms/

2. 설치

CodePush 명령을 사용하려면 appcenter-cli를 설치해야 합니다.

아래의 명령어를 통해 설치를 진행합니다.

npm install -g appcenter-cli

CodePush라는 샘플 프로젝트를 만들어보겠습니다.

npx react-native init CodePush

생성된 프로젝트로 진입합니다.

cd CodePush/

CodePush 프로젝트에서 아래의 명령어를 통해 depenency를 추가 합니다.

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

3. AppCenter 로그인

appcenter-cli를 사용하여 AppCenter와 연동을 합니다.

appcenter login

아래처럼 별도의 브라우저가 띄워지면서 인증토큰을 보여줍니다.

아래의 'Enter your token from the browser:' 란에 token을 붙여넣습니다.

유효한 token을 입력하였다면 아래와같이성공 메시지가 출력됩니다.

Logged in as bonjin

4. AppCenter App등록

AppCenter에 App을 등록하겠습니다.

android, ios 를 구분하여 등록을 하면 되고 예시는 아래와 같습니다.

appcenter apps create -d <appDisplayName> -o <operatingSystem>  -p <platform>

각 앱 이름 뒤에 ios, android 를 붙여주어 구분하는게 좋기 때문에 CodePush-iOS라는 이름으로 생성해보겠습니다.

appcenter apps create -d CodePush-Android -o Android -p React-Native
appcenter apps create -d CodePush-iOS -o iOS -p React-Native

정상적으로 App등록이 되었다면 아래처럼 등록정보를 출력해줍니다.

여기서 Owner ID, Name 항목을 활용하여 배포키를 만들어줍니다.

기존 CodePush 앱은 자동으로 Staging, Production 키를 만들어 주었지만 AppCenter에서는 직접 생성을 해줘야 합니다.

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

아래 명령어를 통해 키를 발급받습니다.

appcenter codepush deployment add -a bonjin/CodePush-iOS Staging
appcenter codepush deployment add -a bonjin/CodePush-iOS Production

등록된 키는 code-push-cli를 통해 확인이 가능합니다.

# appcenter 명령어로 확인하는 방법은 찾고 업데이트 하겠습니다 #

code-push deployment ls CodePush-iOS -k

AppCenter에 등록된 앱을 확인합니다.

appcenter apps list