RN) CodePush로 앱 심사없이 간단한 업데이트하기

코드 푸시란?

iOS/Android 심사를 거치지 않고 앱에 변경사항을 배포할 수 있는 기능이다.

특히 RN의 JavaScript 및 이미지 리소스를 원격으로 업데이트해주는거라 보면 된다.

 

 

 

 

 

왜 쓰게 됐나? (내가 업데이트 해야됐던 것)

최근 ANTTIME의 SHOP페이지 UI가 전면 개편되었다.

(살 수 있는 항목이 늘었고, 아이템 잔량을 체크할 수 있게 되었고,

긴 스크롤로 아이템들을 나열했던 방식을 탭으로 정리하였다.)

 

그런데 바뀐 Daily Free Box UI가 Clickable하지 않아보인다는 내부 의견이 나왔고,

이 영역에 액션버튼을 달아주는 UI 패치를 진행하게 되었다.

 

이렇게 광고보고 무료로 얻을 수 있다는 것을 강조해주며,

광고 10번 다 채웠을 시 24H Miner를 수령하세요가 나오고,

수령 후에는 disable이 되는 버튼을 달았다.

 

그런데 이걸 위해 새로운 버전 배포를 하는 것은 너무 번거로워보여

코드푸시를 이번 기회에 경험해보기로 했다.

 

 

설치법

1. 터미널에서 appcenter-cli를 설치

npm install -g appcenter-cli

 

 

2. 앱센터에 계정을 만들고 새 앱을 추가해주기

https://appcenter.ms/

Visual Studio App Center | iOS, Android, Xamarin & React Native

 

• 위 링크로 앱센터에 접속한다.
• 새로운 앱을 생성하고 플랫폼을 "React Native"로 선택한다.
• iOS와 Android에 대해 각각 별도로 앱을 생성해주자.

 

안드로이드/iOS 앱을 둘 다 깔아줬다.

 

3. 리액트네이티브 코드 푸시 라이브러리 설치

npm install react-native-code-push

 

pod install도 잊지말자.

cd ios
pod install

 

 

4.iOS 설정: AppDelegate.m 파일에 다음을 추가하여 CodePush를 초기화하기.

Swift로 짜인 부분이지만 대강 Debug모드일 때와 Release모드일 때를 분기처리해주는건 틀림없다.

Release모드일때만 코드푸시를 활성화해준다.

#import <CodePush/CodePush.h>

// 이 부분에서 CodePushBundleURL을 추가
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [CodePush bundleURL];
#endif
}

 

 

5. Android 설정: android/app/src/main/java/[your-app-name]/MainApplication.java에 다음 코드를 추가.

import com.microsoft.codepush.react.CodePush;

// override getJSBundleFile 메서드에 CodePush 관련 코드를 추가합니다.
@Override
protected String getJSBundleFile() {
    return CodePush.getJSBundleFile();
}

 

그리고 build.gradle 파일에서 다음과 같이 CodePush 키를 추가한다.

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

 

 

6. CodePush 배포 설정

AppCenter에서 생성한 앱에 대한 Deployment Key를 앱에 설정해야 한다.

Deployment Key는 AppCenter에서 각 플랫폼에 대해 제공된다. 이를 CodePush 초기화 시 사용한다.

기본적으로 아래와 같이 CodePush 옵션을 설정해놓고 사용해야되는거 같다.

import CodePush from "react-native-code-push";

// CodePush 옵션을 설정.
let codePushOptions = { checkFrequency: CodePush.CheckFrequency.ON_APP_START };

class App extends Component {
  render() {
    return (
      <YourRootComponent />
    );
  }
}

// CodePush를 적용.
App = CodePush(codePushOptions)(App);

export default App;

 

그러나 선임이 짠 코드에서는 코드푸시 설정은 생략하고

react-native-iap(In App Purchase) 설정으로 랩핑하여 제공하고 있었다.

인앱구매 쪽 로직은 아직 까본 적이 없어 모르겠다...

import CodePush from "react-native-code-push";
import { withIAPContext } from 'react-native-iap';

...

export default CodePush(withIAPContext(App));

export default App;

 

7. CodePush 실행

ownerName/appName은 AppCenter에서 가져왔던 내용과 동일하다.

deployName은 Staging 혹은 Production으로 설정하자.

 

그리고 RN을 이용해서 개발하는 경우 거의 안드/iOS 동시개발일테니

<앱이름>에 android/ios 용으로 2번 배포해주면 된다.

appcenter codepush release-react -a <유저이름>/<앱이름> -d <deploymentName>

 

 

Staging 환경이란?

• Staging은 테스트용 배포를 위해 사용하는 환경이다.
• 내부 개발자나 테스트 담당자가 앱 업데이트를 검토하고 문제를 발견하기 위한 용도로 사용된다.

Production 환경

• Production은 실제 앱 사용자에게 배포되는 환경이다.
• Staging에서 충분히 테스트된 후에 Production으로 배포하는 것이 안전하다고 한다.

 

 

혹시 코드 푸시한 코드가 잘못됐으면 어쩌나?

배포 히스토리 확인 cli

appcenter codepush deployment history -a 유저이름/앱이름 <Staging or Production>

 

롤백 명령어 cli

appcenter codepush rollback -a 유저이름/앱이름 <Staging or Production>

 

위의 것들로 바로 푸시 전 상태로 롤백할 수 있다.

코드 푸시 후에 만약 이상이 있다면 바로 칠 준비를 하자..

 

 

Production이 없다고 에러가 뜬다면?

appCenter에 다 가입하고 앱설정도 잘 해줬는데 이런 에러가 뜨는가?

혹시 새로운 컴퓨터에서 작업한다면 아래 cli를 입력해서 새롭게 Production 환경을 세팅해주면 된다.

(선임이 세팅은 다 해놨는데 내 컴퓨터에 없었어서 찾게됐다.)

appcenter codepush deployment add -a 유저이름/앱이름 Production

 

 

이렇게 코드푸시를 다 잘 해주면 아래처럼 코드푸시가 잘 됐다고 나온다.

 

앱센터에도 로그가 남는다.

 

 

 

 

 

 

참고자료:

https://medium.com/@katramesh91/what-is-codepush-3f4639d54be1

https://velog.io/@ddowoo/react-native-CodePush-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

https://musma.github.io/2021/12/28/codepush1.html

https://rajanmaharjan.medium.com/get-started-with-wonderful-technology-d838aafdc2d3