[React Native] 코드푸시 적용하기

Published in

roubit.me

3 min readApr 6, 2022

React Native의 꽃이라 할 수 있는 코드푸시. 바로 적용해봅시다.
Docs: https://github.com/microsoft/react-native-code-push

0. 어떻게 동작하나?

React Native 앱은 메트로 번들러에 의해 함께 번들되고 플랫폼별 바이너리(예: .ipa 또는 .apk 파일)의 일부로 배포되는 JavaScript 파일 및 수반되는 이미지로 구성됩니다.
앱이 출시되면 JavaScript 코드(예: 버그 수정, 새로운 기능 추가) 또는 이미지 자산을 업데이트하려면 전체 바이너리를 다시 컴파일하고 재배포해야 합니다. 여기에는 스토어와 관련된 검토 시간도 포함됩니다.
CodePush 플러그인은 JavaScript 및 이미지를 CodePush 서버에 릴리스하는 업데이트와 동기화하여 최종 사용자에게 즉시 제품 개선 사항을 제공하는 데 도움이 됩니다. 이렇게 하면 앱에서 오프라인 모바일 경험의 이점을 얻을 수 있을 뿐만 아니라 업데이트가 제공되는 즉시 테스트용 로드 업데이트의 “웹과 같은” 민첩성을 얻을 수 있습니다. 윈윈입니다!
최종 사용자가 항상 작동하는 앱 버전을 갖도록 하기 위해 CodePush 플러그인은 이전 업데이트의 복사본을 유지 관리하므로 충돌이 포함된 업데이트를 실수로 푸시하는 경우 자동으로 롤백할 수 있습니다. 이렇게 하면 새로 발견한 릴리스 민첩성으로 인해 서버에서 롤백할 기회가 있기 전에 사용자가 차단되지 않는다는 것을 확신할 수 있습니다. 윈윈입니다!
참고: 기본 코드에 영향을 주는 제품 변경 사항(예: AppDelegate.m/MainActivity.java 파일 수정, 새 플러그인 추가)은 CodePush를 통해 배포할 수 없으므로 적절한 저장소를 통해 업데이트해야 합니다.

참고: https://github.com/microsoft/react-native-code-push#how-does-it-work 그대로 번역

설치

yarn add react-native-code-push

2. 등록

Docs: https://docs.microsoft.com/ko-kr/appcenter/distribution/codepush/cli

appcenter cli 설치 및 로그인이 되어있어야 한다. (Docs 참고)

// create app
appcenter apps create -d myapp-ios -o iOS -p React-Native
appcenter apps create -d myapp-android -o Android -p React-Native// register Staging & Production
appcenter codepush deployment add -a daheeahn/myapp-ios Staging
appcenter codepush deployment add -a daheeahn/myapp-ios Productionappcenter codepush deployment add -a daheeahn/myapp-android Staging
appcenter codepush deployment add -a daheeahn/myapp-android Production// check key
appcenter codepush deployment list -a daheeahn/myapp-android -k
appcenter codepush deployment list -a daheeahn/myapp-ios -k

잠깐, Staging과 Production이 무엇인가?

Staging: 디버그 빌드(app-debug.apk)용
Production: 프로덕션 릴리스(app-release.apk)용
-> 그러나 우리가 사용하기 나름이라고 한다.

3. 세팅 1

Android: https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-android.md

> https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-android.md#plugin-installation-and-configuration-for-react-native-060-version-and-above-android
이 부분만 보면 된다. (RN 0.60 이상)

iOS: https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-ios.md

> https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-ios.md#plugin-installation-and-configuration-for-react-native-060-version-and-above-ios

이 부분만 보면 된다. (RN 0.60 이상)

4. 세팅 2

import { AppRegistry } from 'react-native';
import codePush from 'react-native-code-push';
import App from './App';
import { name as appName } from './app.json';AppRegistry.registerComponent(appName, () => codePush({
    checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
    installMode: codePush.InstallMode.ON_NEXT_RESTART,
  })(App),
);

5. 코드푸시 해보기

세팅 끝! 생각보다 간단하다. 이제 직접 적용해보자.

appcenter codepush release-react -a owner/pipit-android -d Staging -t x.x.x
appcenter codepush release-react -a owner/pipit-ios -d Staging -t x.x.x

t 옵션: 버전 지정
이외에도 다양한 옵션이 있으면 최상단 Docs 참조!

참고

기존 번들은 종료한 후 코드푸시를 진행하자. 켜진 채로 배포하면 dev/production 꼬일수도.

마무리

코드푸시는 스토어에 배포를 하지 않고도 배포를 가능하게 해주는 RN의 주요 매력포인트 중 하나다!
다만 모든 유저가 꼭 동시에반영되어야 하는 기능은 배포하지 않는 것이 좋다. 어떤 유저는 코드푸시를 받을 수도 있고 어떤 유저는 아닐 수도 있기 때문이다.
적재적소에 코드푸시를 잘 활용해보자🌝

[React Native] 코드푸시 적용하기

Written by Dahee Ahn