React-Native CodePush 알아보기!

CodePush란?

---

코드 푸쉬는 MS에서 만든 오픈소스로서 앱을 심사없이도(앱 스토어 릴리즈없이)
실시간 업데이트를 가능하게 해주는 모듈입니다.
리액트 네이티브에서는 네이티브 코드와 설정이 아닌
JS단의 코드와 assets(이미지, 폰트등..)의 요소들을
앱 심사없이 바로 업데이트 할 수 있습니다.

단, 네이티브 영역의 코드가 변경되어야 한다면, 코드 푸쉬를 사용해서는 안됩니다.
네이티브단을 수정했음에도 코드 푸시를 하는 순간 앱은 아마도 비정상 종료될 것입니다.
(다시 패키징하는 방법으로 심사를 통해 배포해야합니다.)

가급적, 단순 로직 변경 및 문자열 변경, api 소스코드 변경정도의 js수정시에만
코드푸시를 사용하고, 라이브러리의 추가/삭제등..
네이티브의 설정이 변경되는 경우에는 코드푸시보다는 다시 apk 혹은 ipa를 추출하여
심사를 받는 것이 좋습니다.

CodePush 사용법

---

사용법에 대해서 사전에 미리 말하자면,
저는 React-Native에서만 Code-push를 통한 update를 이용해본 경험이 있으므로,
Meteor라던지 다른 환경에서의 Code-push는 이와 다를 수 있습니다.

(1) appcenter-cli 설치

$ npm install -g appcenter-cli

(2) react-native-code-push 설치

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

(3) Appcenter 가입 후 앱 등록을 합니다.

만약 moong2라는 앱이 있다면 Android와 iOS 두개의 코드푸시를 만들텐데
moong2-ios, moong2-aos 요런식으로 뒤에 os를 달아주는 것이 좋습니다.
(왜냐하면 같은 이름으로 프로젝트를 생성못할 뿐더러 헷갈릴수 있기 때문입니다..!)

앱등록이 끝나면 앱의 distribute -> codepush로 이동합니다.
그러면 친절하게(?) 영어로 절차를 설명해주는데요!
절차대로 수행해줍니다.

(4) 절차의 첫번째인 SDK등록, iOS/Android Native 영역 설정해주기 : 하단 링크 참고
(https://docs.microsoft.com/ko-kr/appcenter/distribution/codepush/rn-get-started)

등록하는 과정에서 각각 배포키를 받는데 (staging, production)
이는 굉장히 소중한 것이므로 별도로 기록을 해두는 것이 좋습니다.
private.pem도 잘 보관해놓는 것이 좋습니다.

staging과 production을 어떻게 운영할 것인지는 개발자 본인의 마음이겠지만,
저의 경우 staging은 DEV환경, Production은 LIVE환경으로 나누어서
개발단에서는 staging 릴리즈로 테스트하고, 문제가 없을 경우
Production으로 옮겨서 배포하였습니다.

(5) react-native에 코드를 추가해줍니다.

import codePush from 'react-native-code-push';

const codePushOptions = {
  checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
  // 언제 업데이트를 체크하고 반영할지를 정한다.
  // ON_APP_RESUME은 Background에서 Foreground로 오는 것을 의미
  // ON_APP_START은 앱이 실행되는(켜지는) 순간을 의미
  updateDialog: false,
  // 업데이트를 할지 안할지 여부에 대한 노출 (잠수함 패치의 경우 false)
  installMode: codePush.InstallMode.IMMEDIATE
  // 업데이트를 어떻게 설치할 것인지 (IMMEDIATE는 강제설치를 의미)
};

// Wrap your root component with the codePush higher-order component:
App = codePush(codePushOptions)(App);

이렇게 하면 코드푸시 사용준비가 끝납니다.

(6) 코드푸시 배포

// production 배포시 

$ appcenter codepush release-react -a {ORGANIZER || USERNAME}/{APP_NAME} -d Production -k ~/private.pem

이렇게 배포를 하고 앱을 들어가보면
크게 달라진 것은 없지만 ON_APP_START일 경우,
앱 실행후 코드푸시 서버로부터 정보를 받아
업데이트가 필요한 경우 업데이트를 받습니다.

업데이트를 받고나면 앱이 재기동되고, 바로 코드푸시가 반영됩니다.

코드 푸시 사용후 느낀점

---

과거 라이브배포 단계에서 android는 잘 반영이 되었지만
iOS는 코드사이닝 문제로 애를 먹었었습니다.
그래도 문제가 해결되자 단순히 RN단 코드를 변경하는 것에 한해서
평소 3일정도 소요되는 업데이트 심사없이
앱에 코드를 반영시킬수 있다는 것이 매우 매력적이고 황홀했습니다.
하지만 코드푸시가 모든 것을 해결해 주진 못합니다.
앱스토어 업데이트와 코드푸시를 적재적소에 잘 활용해야 좋을 것 같습니다.