RN - CODE PUSH [ iOS ]

CODE PUSH

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

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

code push 과정 요약

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

2. AppCenter에 업데이트 배포

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

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

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

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

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

[ iOS ]

1. 앱센터 홈페이지 접속

2. 엡센터에 내 앱 등록

   

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

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

   cd ios && pod install

4. info.plist 수정
   project.pbxproj에 각각 변수화 해서 사용한다

   <key>CodePushDeploymentKey</key>
   <string>${CODEPUSH_KEY}</string>

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

5. AppDelegate.mm수정

#import <CodePush/CodePush.h>
...
...
//[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
//위 코드를 검색해 아래로 바꿔준다
return [CodePush bundleURL];

6. CODEPUSH_KEY를 전역변수로 연결

   1. XCode 열기

   2. 본인 프로젝트 > Project > info > Configurations 내 + 버튼을 클릭
      ‘Duplicate Release Configuration’을 선택하고 새로 추가된 설정의 이름을 Staging이라고 수정한다

      

   3. 본인 프로젝트 > Project > Build Settings내 상단 + 버튼 클릭

      

      Add User-Defined Setting을 클릭해 “ MULTI_DEPLOYMENT_CONFIG ” 와 같은 이름으로 생성해주고,
      생성된 테이블 내의 Release에는 아래와 같이
      “$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)”
      Staging는 아래와 같이 넣어준다
      “$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)”

      

   4. 다시 +버튼을 눌러 Add User-Defined Settings을 클릭해 이번에는 “CODEPUSH_KEY”라고 선언해주고, 테이블 내 Release와 Staging에 각각 부여받은 키를 넣어준다.

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

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

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

8. 테스트

   1. 디바이스에 릴리즈버전 올린후 코드수정하여 아래 명령어로 앱센터 업데이트

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

   2. 디바이스에 설치된 앱에 반영되었는지 확인