리액트 네이티브 코드 푸시(Code Push) 란, 그리고 코드 푸시 설정법

코드푸시란

react-native 혹은 cordova 로 개발한 앱을 번거로운 심사과정 없이 바로 업데이트 할 수 있도록 해주는 서비스이다.

어떻게 가능한 것일까?

리액트 네이티브 앱은 JS 파일과 이미지로 이루어져 있다. 이는 metro bundler 에 의해 번들링 된다. 이후 플랫폼에 적합한 바이너리 파일인 .ipa 혹은 .apk 파일로 배포된다. 일단 앱이 릴리즈되면, 코드를 변경할 때, 전체 바이너리를 다시 컴파일해야 한다. 컴파일된 바이너리는 당연히 까다로운 심사과정을 다시 거쳐야 한다.

코드푸시 서버는 코드 푸시 서버에 자바스크립트 파일과 이미지를 업데이트 함으로써, 즉시 앱을 업데이트하는 것을 가능하게 한다.

또한 코드 푸시는 유저에게 동작되는 버전을 제공하기 위해, 이전 버전의 업데이트를 유지하고 있다. 그래서 실수로 크래시가 있는 버전을 업데이트 하는 경우 자동으로 롤백이 가능하다.

단, 네이티브 코드를 업데이트 하는 경우엔, 당연히 코드푸시로는 불가능하다.

코드푸시 사용법

• 앱센터 가입
• 앱센터에서 앱 생성
• 아래 의존성 추가

npm i react-native-code-push
npm i appcenter appcenter-analytics appcenter-crashes
npm i -g appcenter-cli

• android/app/src/main/assets/appcenter-config.json 파일을 생성한다.
  • 내부에 앱센터에서 발급받은 app_secret 을 넣는다.

{
  "app_secret": "{Your app secret here}"
}

• res/values/strings.xml 내부에서 아래의 줄을 수정한다.

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>

• 앱 센터의 Distribue > CodePush 에 들어간 후, Create Standard... 을 클릭한 뒤에 instructions 를 보며 따라하기

• 위의 과정 중 Deployment Key 를 입력하는 부분이 있는데, 아래의 명령어로 얻을 수 있다.

appcenter login
appcenter codepush deployment list -a n00nietzsche-gmail.com/delivery-app -k

• 위 명령어의 결과로 Staging 과 Production 키가 나오는데, 배포의 스테이지별로 알맞은 키를 사용하면 된다.

    "codepush:android": "appcenter codepush release-react -a n00nietzsche/food-delivery-app-android -d Staging --sourcemap-output --output-dir ./build -m -t 1.0",
    "codepush:ios": "appcenter codepush release-react -a n00nietzsche/food-delivery-app-ios -d Staging --sourcemap-output --output-dir ./build -m -t 1.0",
    "bundle:android": "react-native bundle --assets-dest build/CodePush --bundle-output build/CodePush/index.android.bundle --dev false --entry-file index.js --platform android --sourcemap-output build/CodePush/index.android.bundle.map",
    "bundle:ios": "react-native bundle --assets-dest build/CodePush --bundle-output build/CodePush/main.jsbundle --dev false --entry-file index.js --platform ios --sourcemap-output build/CodePush/main.jsbundle.map",
    "aab:android": "npm ci && cd android && ./gradlew bundleRelease && cd .. && open android/app/build/outputs/bundle/release",
    "apk:android": "npm ci && cd android && ./gradlew assembleRelease && cd .. && open android/app/build/outputs/apk/release",
    "appcenter-android-key": "appcenter codepush deployment list -a n00nietzsche/food-delivery-app-android -k",
    "appcenter-ios-key": "appcenter codepush deployment list -a n00nietzsche/food-delivery-app-ios -k",
    "bump-patch": "npm version patch --no-git-tag-version && cd ios && bundle exec fastlane bump",
    "bump-minor": "npm version minor --no-git-tag-version && cd ios && bundle exec fastlane bump",
    "bump-major": "npm version major --no-git-tag-version && cd ios && bundle exec fastlane bump"

• 스크립트에 위의 명령어를 추가시키면, 쉽게 코드 푸시 관련 명령어를 사용할 수 있다.
• npm run codepush:android 가 출시 명령어이다.

코드 푸시 React Native 에 추가해야 할 코드

앱의 루트가 되는 파일 (App.tsx) 에 아래와 같은 코드를 추가해주면 된다.

• 옵션을 통해 앱을 껐다, 켜면 코드푸시가 적용될지 등을 설정할 수 있다.

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

const codePushOptions: CodePushOptions = {
  checkFrequency: CodePush.CheckFrequency.MANUAL,
  // 언제 업데이트를 체크하고 반영할지를 정한다.
  // ON_APP_RESUME은 Background에서 Foreground로 오는 것을 의미
  // ON_APP_START은 앱이 실행되는(켜지는) 순간을 의미
  installMode: CodePush.InstallMode.IMMEDIATE,
  mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,
  // 업데이트를 어떻게 설치할 것인지 (IMMEDIATE는 강제설치를 의미)
};

function App() {}

export default CodePush(codePushOptions)(App);

코드 푸시 주의점

• 앱스토어 심사 중에는 절대 코드 푸시를 넣으면 안된다.
• 버전을 시멘틱 버저닝 (Semantic Versioning) 에 잘 맞추어야 한다.
• 코드 푸시 타겟 버전을 변경한다면, 시멘틱 버저닝의 두번째 버전 (minor version) 까지만 명시하는 것이다.
  • 세번째 자리는 package.json 의 version 프로퍼티를 바꿔주면 된다.
• 코드 푸시는 세번째 버전 (patch version) 에 해당하는 내용이 바뀌었을 때 수행한다.
• 코드 푸시의 두번째 자리는 앱스토어에 새로 출시한 버전을 올릴 때 바뀌는 것이다.
  • 만일 출시할 때 package.json 의 version 프로퍼티를 같이바꾸지 않으면, 이전 버전의 코드 푸시가 적용되어 에러가 날 수 있다.

레퍼런스

https://www.npmjs.com/package/react-native-code-push#how-does-it-work