- 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: 디버그 빌드(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
이 부분만 보면 된다. (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의 주요 매력포인트 중 하나다!
다만 모든 유저가 꼭 동시에반영되어야 하는 기능은 배포하지 않는 것이 좋다. 어떤 유저는 코드푸시를 받을 수도 있고 어떤 유저는 아닐 수도 있기 때문이다.
적재적소에 코드푸시를 잘 활용해보자🌝