Code Push 적용기 in React Native 0.74 - (2) 이제 Code Push를 연결해보자

App Center 연동은 끝났고, 이제는 Code Push를 해보자.

저번 글에서는 App Center의 연동을 끝냈다.
이번 글에서는 Code Push 패키지를 설치하고 배포까지 하는 과정을 작성해보고자 한다.

참고로 작성자는 Window OS에서 개발을 진행하고 있다.
따라서 iOS 내용은 제외되어 있으며, 여기선 Android 내용만 다룬다.

또한, 작성일 기준으로 최신 버전인 React Native 0.74.1에서는 Code Push가 호환되지 않는 이슈가 있는 듯 하다.
(한동안 0.74.1 버전에서 적용하도록 실험해봤으나, 아래의 이슈가 발생하고 있으며 이건 호환성 문제로 보여지고 있다.)
궁금한 사람들은 여기를 누르면, 관련 이슈를 볼 수 있다.
따라서 여기서는 React Native 0.73.8에서 진행한 내용을 다루고 있으니, 자신이 개발중인 버전과 참고하여 읽길 바란다.

자, 그러면 Code Push 세팅을 해보자.

Code Push를 이용하려면 우선 Code Push 패키지를 설치해야 한다. 아래의 커멘드를 입력해 Code Push를 설치해주자.

// npm으로 설치
npm install react-native-code-push

// yarn으로 설치
yarn add react-native-code-push

설치가 완료됐다면, (프로젝트 폴더명)\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\build.gradle에 다음 내용을 추가해주자.

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

여기까지 완료됐다면, MainApplication.kt 파일을 찾아서 일부 코드를 추가해줘야 한다.
React Native 0.73 버전부터는 위에 보이다시피 Kotlin으로 코드가 되어있다. (그 전까지는 Java 파일로 되어있다.)
그래서 자신이 보는 파일이 .kt가 맞는지 확인하고, 맞다면 아래의 내용대로 해주면 된다.

// 먼저 플러그인을 배치해준다.
import com.microsoft.codepush.react.CodePush

// 아래의 클래스 내  DefaultReactNativeHost 오브젝트에 일부 코드를 추가해주자.
class MainApplication : Application(), ReactApplication {

override val reactNativeHost: ReactNativeHost =
    object : DefaultReactNativeHost(this) {
        ...
        // 아래의 코드를 추가해주자.
        override fun getJSBundleFile(): String {
            return CodePush.getJSBundleFile() 
        }

    };
}

위의 과정까지 완료가 됐다면 (프로젝트 폴더명)\android\app\src\main\res\values\strings.xml에 다음과 같은 내용을 추가한다.

<string moduleConfig="true" name="CodePushDeploymentKey">(App Center에서 받을 수 있는 배포 키)</string>

배포 키를 확인할 수 있는 방법은 아래의 커멘드를 입력해서 확인할 수 있다.

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

ownerName과 appName을 모르겠다면 Code Push를 연동하려는 App Center의 URL을 확인해보자.

https://appcenter.ms/users/<ownerName>/apps/<appName>

배포 키가 없다면 배포 키를 생성해줘야 하는데, 커멘드로 생성하는 방법과 App Center에서 직접 만드는 방법이 있다.

1) App Center에서 직접 만드는 방법

App Center 화면 -> Distribute -> Code Push -> Create Standard deployments 를 눌러 배포 버전들을 생성한다.

그러면 기본적으로 Staging과 Production, 이렇게 두 개의 배포 버전이 생성되는 것을 확인할 수 있다.

이제 VSCode로 돌아가 커멘드를 다시 입력하면 두 배포 버전의 배포 키가 생성되는 것을 확인할 수 있다.
이 생성된 키를 아까 (프로젝트 폴더명)\android\app\src\main\res\values\strings.xml에 배포 키 넣는 부분에 배치하면 된다.

2) 커멘드로 직접 생성하는 방법

아래와 같이 커멘드를 입력해주자.

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

deployName은 Staging, Production 등 위 내용에서 봤던 배포 버전을 가리킨다.
만들고자 하는 deployname을 적은 뒤 생성하면 key를 발급해준다.
이 생성된 키를 아까 (프로젝트 폴더명)\android\app\src\main\res\values\strings.xml에 배포 키 넣는 부분에 배치하면 된다.

이제 App.tsx의 App 함수를 CodePush 함수로 감싸주고 저장해주자.

import React from 'react';
import Naviagation from './src/routes';
import CodePush from 'react-native-code-push';

function App() {
  return <Naviagation />;
}

export default CodePush(App);

여기까지 했으면 이제 남은 건 배포하는 것이다.
배포 전 Metro를 실행시키고 에뮬레이터 등에서 앱을 빌드해 실행해보자.
잘 된다면, 이제 마지막으로 아래의 커멘드를 입력해서 Code Push 버전을 배포하면 연결이 완료된다.

appcenter codepush release-react -a <ownerName>/<appName> -d <deployName>

위의 이미지처럼 Successfully released라고 나온다면 Code Push 배포가 완료된 것이다.

이제 App Center로 돌아가 Code Push 메뉴를 확인해보자.
아래처럼 버전이 추가됐다면 Code Push 연결 작업이 모두 완료된 것이다.

이렇게 Code Push 연결 작업을 완료해봤다.
0.74 버전에서의 Code Push 호환 문제는 추후 해결 방법이 있다면 별도의 글로 작성하도록 하겠다.
Code Push를 적용하는 데에 애먹는 분들에게 이 글이 조금이나마 도움이 될 수 있기를 바란다.

Trouble Shooting

Metro 실행 후, run Android로 에뮬레이터 실행을 시도해봤으나 codepush.gradle 파일을 찾을 수 없다는 이슈가 있었다.

왜 못 찾는지 의아하게 생각하다가, 나중에 유남주 님께서 알려주신 덕분에 codepush.gradle 파일을 찾는 경로가 잘못되어 있다는 것을 알게 됐다.
공식 문서에서 준 내용대로 가져와서 발생한 문제인데, 혹시 위의 이슈가 발생했다면, (프로젝트 폴더명)\android\build.gradle에 추가했단 apply 부분에 경로가 잘못되진 않았는지 확인해보자.