Code Push란? 앱을 개발하고 배포하려면 빌드→ 스토어에 업로드 → 심사 통과 라는 절차가 필요한데 code-push를 적용하면 명령어 하나로 실제 배포된 앱에 변경사항이 위와 같은 많은 절차가 필요없이 적용된다.(javascript 한정) 작동원리? HOC(Higher Order Component) 방식으로 (ex. Codepush(App)) Codepush앱이 우리의 앱을 감싸고 변화를 감지하여 자신들의 클라우드 서버로 전송하여 업데이트 해주는 방식 이라는 것만 여러가지 검색 결과를 토대로 얻게 되었는데 더 자세한 설명은 찾지못함.. 적용하게 된배경 이번에 가벼운 학습지 앱을 개발하게 되었는데 배포 후 자잘한 수정사항이 발생되었을 때 재배포를 하게 되면 최소1~2일을 기다려야 하는 이슈를 해결하기 위해 추가하게 되었고 설치와 사용법에 대해서 직접 경험한 내용을 토대로적어보면 1. AppCenter 설치 yarn global add appcenter-cli 2. AppCenter Login appcenter login //브라우저가 열리고 이메일 입력하면 토큰을 주는데 터미널에 입력하면 완료 appcenter profile list // 로그인 확인 3. App등록 appcenter apps create -d myapp-aos -o android -p react-native appcenter apps list // 등록된 앱 확인 4. 배포 단계등록 appcenter codepush deployment add -a username/myapp-aos Staging appcenter codepush deployment add -a username/myapp-aos Production appcenter codepush deployment add -a username/myapp-ios Staging appcenter codepush deployment add -a username/myapp-ios Production appcenter codepush deployment list -a username/myapp-aos // 배포 목록 확인 appcenter codepush deployment list -a username/myapp-aos -k // 배포 키 확인 5. CodePush설치 yarn add react-native-code-push cd ios && pod install 6. CodePush설정 import codePush from 'react-native-code-push' ... export default codePush(App) IOS ~/ios/yourapp/info.plist ... CodePushDeploymentKey $(CODEPUSH_KEY) ... AppDelegate.m #import return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"] 을 찾아서 return [CodePush bundleURL] 로 변경 Xcode ⇒ project ⇒ ⇒ Info 탭⇒ + 버튼클릭 Staging으로 생성 Build Settings 탭으로이동 Multi_Deployment_Config 생성 release: $(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) staging: $(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME) CODEPUSH_KEY 생성 후 Staging과 Production(Release) 키입력 appcenter codepush deployment list -a / -k 키확인 Android ~android/app/src/main/java/com/myapp/MainApplication.java import com.microsoft.codepush.react.CodePush ... new ReactNativeHost(this) ( ... @Override protected String getJSBundleFile() ( return CodePush.getJSBundleFile() ) ) ... import com.microsoft.codepush.react.CodePush ... ~android/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') ~android/app/build.gradle android ( ... buildTypes ( debug ( ... // Note: CodePush updates should not be tested in Debug mode as they are overriden by the RN packager. However, because CodePush checks for updates in all modes, we must supply a key. resValue "string", "CodePushDeploymentKey", '""' ... ) releaseStaging ( ... resValue "string", "CodePushDeploymentKey", '""' // Note: It is a good idea to provide matchingFallbacks for the new buildType you create to prevent build issues // Add the following line if not already there matchingFallbacks = ['release'] ... ) release ( ... resValue "string", "CodePushDeploymentKey", '""' ... ) ) ... ) if (enableHermes) (//hermes 사용시 ... releaseStagingImplementation files(hermesPath + "hermes-release.aar") ) ... *주의* apply from: "../../node_modules/react-native/react.gradle" <= 밑에 추가해야 함 apply from: "../../node_modules/react-native-code-push/android/codepush.gradle" 위와 같이 debug, staging, release로 나누어서 배포하는 설정은 **Multi-Deployment Testing 를 토대로 설정했으니참조 기본설정을 했었다면 strings.xml 에 deployment key가 설정되어 있을 텐데 삭제해야함!! 배포 appcenter codepush release-react -a username/myapp-ios -d Staging appcenter codepush rollback -a / Production --target-release v34 //롤백 appcenter codepush deployment history -a / //히스토리 명령어 종류가 많고 너무 길어서 package.json scripts에추가 *예시 list 명령어 뒤에 -k 붙히면 deployment key 확인가능 사용법 import codePush from 'react-native-code-push' ... useEffect(() => ( codePush.sync() ),[]) ... export default (codePush(App)) 코드푸시를 설치하고 프로덕션 환경에서 처음으로 배포를 시도하였는데 놀랍게도 워딩변경 & 아이콘 변경 작업이 순식간에 반영되었다.. 하지만 배포 후 앱을 시작 → 종료 → 시작 하여야 업데이트가 적용이 되어서 처음 시작 할 때 바로 적용 되지 않는 부분이 이상해서 검색을하였고 위와 같이 코드푸시의 기본 설정이 첫 시작에는 업데이트를 체크한 후 다음 재시작 시 업데이트를 설치하도록 되어 있다는 걸알았고 앱을 장기간 끄지 않고 백그라운드로 왔다갔다 하는 유저들에겐 맞지 않는 설정이라 조금 더 알아보았고 codePush(( checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, installMode: codePush.InstallMode.ON_NEXT_RESUME, // ON_NEXT_SUSPEND => 백그라운드로 넘어 갈 때 minimumBackgroundDuration: 30*60 // 30 minutes )) 위와 같이 설정하면 앱이 백그라운드에서 돌아올 때 마다 체크하여 업데이트를진행한다. minimumBackgroundDuration: 백그라운드 최소 유지시간이며 정한 시간이 지나야 업데이트진행 ( checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, installMode: codePush.InstallMode.IMMEDIATE, ) 즉시 업데이트설정 ( checkFrequency: codePush.CheckFrequency.MANUAL, ) 조건을 만들고 해당할 때만 업데이트 할 수 있는로직 Codepush API https://docs.microsoft.com/ko-kr/appcenter/distribution/codepush/rn-api-ref https://github.com/microsoft/react-native-code-push/blob/master/docs/api-js.md Reference https://docs.microsoft.com/en-us/appcenter/quickstarts/ https://manurana.medium.com/codepush-update-strategies-for-a-react-native-app-6c0d2acd4f4c https://weiji.io/2021/05/24/react-native-codepush/

React-Native CodePush 적용기

댓글 0개