React Native에서 CodePush로 OTA 업데이트 구현하기

React Native에서 CodePush를 사용해 Over-The-Air(OTA) 업데이트를 구현하는 방법에 대해 알아보겠습니다. 이 가이드는 OTA 업데이트의 개념, CodePush 설정 및 설치, 앱 통합, 업데이트 배포와 테스트까지 단계별로 설명합니다.

 

Over-The-Air(OTA) 업데이트란?

OTA(Over-The-Air) 업데이트는 사용자가 직접 앱 스토어에 들어가 업데이트하지 않아도 앱의 일부 또는 전체를 최신 상태로 유지할 수 있도록 하는 기술입니다. React Native와 같은 하이브리드 앱에서는 OTA 업데이트가 특히 유용한데, 코드 변경이 즉시 배포되며 사용자는 새 기능이나 버그 수정 사항을 빠르게 적용받을 수 있습니다.

 

OTA 업데이트를 사용하면 앱 스토어 검토 과정을 건너뛰어 빠르게 새로운 기능을 적용할 수 있습니다. 특히 긴급한 버그 수정이 필요한 경우, OTA 업데이트는 빠른 대응을 가능하게 합니다. 이를 통해 개발 팀은 앱의 유지보수를 더욱 원활하게 하고, 사용자에게 향상된 경험을 제공합니다.

 

CodePush 소개

CodePush는 Microsoft에서 제공하는 클라우드 기반 서비스로, React Native 앱에 OTA 업데이트 기능을 추가할 수 있도록 돕습니다. CodePush를 사용하면 JavaScript 코드, 이미지, 스타일 등의 업데이트를 스토어를 거치지 않고도 사용자에게 배포할 수 있습니다.

 

CodePush의 가장 큰 장점은, 앱의 자바스크립트 코드를 실시간으로 변경할 수 있다는 것입니다. 이는 앱의 기능 업데이트나 간단한 버그 수정이 필요한 경우, 사용자가 앱 스토어에서 다시 다운로드할 필요 없이 즉시 적용할 수 있게 해줍니다.

 

CodePush 설정 및 설치

CodePush를 설정하려면 먼저 react-native-code-push 패키지를 설치해야 합니다. 다음은 React Native 프로젝트에 CodePush를 설치하고 설정하는 방법입니다.

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

 

설치 후, CodePush를 Android와 iOS 프로젝트에 링크합니다. React Native의 최신 버전에서는 react-native link 명령어 대신 autolinking이 기본적으로 작동합니다. 하지만 수동으로 프로젝트 파일을 수정해야 할 수도 있습니다.

Android 설정

MainApplication.java 설정

먼저 Android의 MainApplication.java 파일을 열고, CodePush를 사용하도록 설정해야 합니다. getJSBundleFile 메서드를 다음과 같이 수정합니다.

import com.microsoft.codepush.react.CodePush;

@Override
protected String getJSBundleFile() {
	return CodePush.getJSBundleFile();
}

 

getJSBundleFile은 CodePush에서 제공하는 번들을 사용해 앱을 실행하도록 합니다.

CodePush 패키지 등록

MainApplication.java의 getPackages 메서드에 CodePush 패키지를 추가합니다. 아래와 같은 형식으로 추가해야 합니다.

@Override
protected List<ReactPackage> getPackages() {
	return Arrays.<ReactPackage>asList(
		new MainReactPackage(),
		new CodePush(BuildConfig.CODEPUSH_KEY, getApplicationContext(), BuildConfig.DEBUG)
	);
}

 

여기서 BuildConfig.CODEPUSH_KEY는 CodePush의 배포 키로, 앱 등록 후 CodePush 대시보드에서 확인할 수 있습니다.

iOS 설정

CodePush 패키지 설치

먼저 react-native-code-push를 설치한 후, 프로젝트의 iOS 파일에서 설정을 진행합니다.

Xcode에서 설정 추가

Xcode에서 프로젝트를 열고, AppDelegate.m 파일을 수정해야 합니다. CodePush 번들을 사용하는 설정을 추가합니다.

#import <CodePush/CodePush.h>

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
	#ifdef DEBUG
		return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
	#else
		return [CodePush bundleURL];
	#endif
}

 

이 설정은 개발 모드에서는 기존의 번들 파일을 사용하고, 프로덕션 모드에서는 CodePush 번들 파일을 사용하도록 설정하는 코드입니다.

 

CodePush와 앱 통합하기

이제 CodePush를 앱과 통합하는 단계입니다. 앱의 주요 컴포넌트에 CodePush를 연결하고, 앱이 실행될 때 업데이트가 자동으로 확인되도록 설정할 수 있습니다.

 

아래 예제는 CodePush와 React Native 앱을 통합하는 코드입니다.

import CodePush from "react-native-code-push";
import React from "react";
import { View, Text } from "react-native";

let codePushOptions = { checkFrequency: CodePush.CheckFrequency.ON_APP_START };

class App extends React.Component {
	render() {
		return (
			<View>
				<Text>CodePush Example</Text>
			</View>
		);
	}
}

export default CodePush(codePushOptions)(App);

 

이 코드에서 CodePush() 함수는 앱을 감싸며, 앱이 시작될 때마다 업데이트를 확인하도록 설정합니다. checkFrequency 옵션을 통해 업데이트 확인 주기를 설정할 수 있습니다.

 

업데이트 배포 및 테스트

CodePush를 사용해 업데이트를 배포하려면, 먼저 개발 환경에 CodePush CLI(Command Line Interface)를 설치해야 합니다. 이 CLI는 업데이트 패키지를 빌드하고 CodePush 서버로 배포하는 데 필요합니다.

 

먼저, 로컬 개발 환경(개발자 컴퓨터)에 CodePush CLI를 설치합니다.

npm install -g code-push-cli

 

설치가 완료되면, CLI를 사용해 CodePush 계정에 로그인합니다. CodePush는 Microsoft 계정과 연동되므로, 로그인 과정에서 Microsoft 계정 자격증명을 입력해야 합니다.

code-push login

 

로그인이 완료되면 앱을 등록합니다. 이 과정에서 앱 이름과 해당 플랫폼(Android 또는 iOS)을 명시해야 합니다.

code-push app add [appName] [platform]

 

다음으로, 프로젝트의 업데이트 파일을 CodePush 서버로 배포해야 합니다. 이때, 여러분의 React Native 프로젝트 경로로 이동한 후, 아래 명령어를 사용하여 업데이트를 배포합니다.

code-push release-react [appName] [platform]

 

이 명령어는 프로젝트의 JavaScript 파일과 리소스를 빌드하여 CodePush 서버에 업로드합니다. 서버로 업로드된 업데이트는 CodePush에 연결된 사용자의 디바이스에 OTA 방식으로 전송됩니다.

CodePush 대시보드 접근 방법

업데이트 상태를 모니터링하거나 관리하려면 CodePush 대시보드를 활용해야 합니다. 이 대시보드는 Microsoft의 App Center에서 제공되며, https://appcenter.ms에서 로그인 후 접근할 수 있습니다. 이곳에서 업데이트 배포 내역, 성공 여부, 다운로드된 디바이스 수 등의 정보를 확인할 수 있습니다.

서버 설치 및 관리에 대한 설명

CodePush는 별도의 서버를 설치하거나 관리할 필요가 없는 클라우드 기반 서비스입니다. 따라서 개발자는 Microsoft App Center와 CodePush CLI만 사용하여 업데이트를 관리하면 됩니다. 다시 말해, 여러분이 따로 서버를 설치하거나 유지보수할 필요가 없으며, 업데이트 패키지 생성과 배포는 CLI 명령어로 충분합니다.

 

코드와 설정 예시

다음은 CodePush와 통합된 앱의 업데이트 적용 방법을 보여주는 예시입니다. 이 코드는 앱이 실행될 때마다 업데이트를 확인하고 적용하는 로직을 포함하고 있습니다.

import React from "react";
import { View, Text, Button } from "react-native";
import CodePush from "react-native-code-push";

class App extends React.Component {
	onButtonPress = () => {
		CodePush.sync({
			updateDialog: true,
			installMode: CodePush.InstallMode.IMMEDIATE,
		});
	};

	render() {
		return (
			<View>
				<Text>CodePush OTA 업데이트 예시</Text>
				<Button title="업데이트 확인" onPress={this.onButtonPress} />
			</View>
		);
	}
}

export default CodePush(App);

 

이 예제에서는 버튼을 눌렀을 때 CodePush가 업데이트를 확인하고 즉시 설치하는 기능을 구현했습니다. sync() 메서드는 업데이트 적용 방식을 세부적으로 설정할 수 있습니다.

 

주의사항

CodePush를 사용할 때는 몇 가지 주의사항이 있습니다. 첫째, CodePush를 통해 변경할 수 있는 것은 JavaScript 코드와 리소스(이미지, 스타일 등)에 한정됩니다. 네이티브 코드의 변경이 필요한 경우, 여전히 앱 스토어를 통한 업데이트가 필요합니다.

 

둘째, 민감한 정보를 포함한 업데이트는 OTA로 배포하지 않도록 주의해야 합니다. CodePush를 사용해 배포된 업데이트는 네트워크를 통해 전송되기 때문에 보안에 민감한 코드는 포함하지 않는 것이 좋습니다.

 

또한, 업데이트 전후의 호환성을 항상 테스트해야 합니다. 업데이트가 잘못 배포될 경우 사용자가 앱을 사용할 수 없게 되는 상황이 발생할 수 있으므로, 철저한 테스트가 중요합니다.

 

마무리하며

React Native에서 CodePush를 사용하여 OTA 업데이트를 구현하면 앱의 유지보수와 기능 배포가 훨씬 원활해집니다. 긴급한 버그 수정이나 소규모 업데이트를 빠르게 배포할 수 있다는 점에서 CodePush는 강력한 도구입니다. 다만, 네이티브 코드 수정이 필요한 경우에는 여전히 앱 스토어를 통한 업데이트가 필요하다는 점을 염두에 두어야 합니다.

 

CodePush를 이용한 OTA 업데이트를 통해 사용자는 최신 기능을 즉시 경험할 수 있고, 개발자는 업데이트 배포의 유연성을 얻을 수 있습니다. React Native 개발의 효율성을 높이기 위한 방안으로 CodePush 도입도 고려해보면 좋을 것 같습니다.