RN - CODE PUSH [ Android ]

CODE PUSH

앱의 JavaScript 코드나 리소스(예: 이미지, 스타일 등)를 스토어 앱 업데이트를 통하지 않고 유저의 앱에 바로 업데이트하는 기능

⚠️ 네이티브를 통한 코드는 코드푸쉬가 불가능하며 JS 또는 자산만 코드푸쉬가 가능하다.

code push 과정 요약

1. 프로젝트의 JavaScript 코드나 리소스(예: 이미지, 스타일 등)를 변경

2. AppCenter에 업데이트 배포

3. 기존 앱 실행시, 앱은 AppCenter 서버와 통신하여 새로운 업데이트가 있는지 확인

4. 새로운 업데이트가 있을 경우, 앱은 백그라운드에서 자동으로 해당 업데이트 파일을 다운

5. 다운로드가 완료되면, 앱은 그 즉시 또는 사용자가 앱을 다시 시작할 때(선택 가능) 해당 업데이트를 적용

   1. 기본적으로 재실행 될 때 업데이트하지만 아래와 같은 옵션으로 앱의 재시작 없이도 업데이트된 내용을 반영할 수 있다
      installMode: CodePush.InstallMode.IMMEDIATE

6. 업데이트가 성공적으로 적용되면 해덩 버전 실행

[ ANDROID ]

1. 앱센터 홈페이지 접속

2. 엡센터에 내 앱 등록

   

3. 프로젝트에 관련 패키지 다운로드

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

4. appcenter-config.json 파일 생성

//파일 위치: android/app/src/main/assets/
{   app_secret: "{Your app secret here}" }

5. 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>
<string moduleConfig="true" name="CodePushDeploymentKey">요기는 본인 키</string>

6. settings.gradle 수정

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

7. android/app/build.gradle 수정

   1. KEY는 android/gradle.properties에 보관한다

   2. KEY를 모를경우 터미널에 아래와 같이 명령하면 찾을수 있고
      appcenter codepush deployment list -a <ownerName>/<appName> -k
      
      위 명령어로 반환되는 값이 없을경우 appcenter에서
      “본인앱 선택/Distribute/CodePush”내 [Create standard deployments]버튼을 눌러 생성해준 후 재시도

//android/app/build.gradle 
...
android {
    ...
    buildTypes {
        
      releaseStaging {
          ...
          resValue "string", "CodePushDeploymentKey",<STAGING_KEY>
          matchingFallbacks = ['release']
          ...
      }
      release {
          ...
          resValue "string", "CodePushDeploymentKey",<PRODUCTION_KEY>
          ...
      }
    }
    
}
...
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

8. MainApplication.java 수정

...
import com.microsoft.codepush.react.CodePush;
...
new DefaultReactNativeHost(this) {
...
//이블럭 최하단에 아래 구문 추가
    @Override
    protected String getJSBundleFile() {
      return CodePush.getJSBundleFile();
    }
//
}

9. App.tsx를 CodePush로 감싸주기

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

...
...
...
export default CodePush(App);

10. 테스트

    1. 위 프로세스가 끝났다면 APK 추출 후 디바이스에 설치

    2. 파일 수정 후 아래 명령어로 appcenter 업데이트

    appcenter codepush release-react -a 오너이름/앱이름 -d Production
    or     
    appcenter codepush release-react -a 오너이름/앱이름 -d Staging     

    1. 디바이스에 설치한 앱이 수정되었는지 확인

    **약 2~3분정도 소요되는 것으로 보임