티스토리 뷰

React Native

code push적용하기.

노명규 2022. 6. 20. 16:22

appcenter 세팅

  1. npm i -g appcenter-cli
    해당 프로젝트에 설치
  2. appcenter login
    - 웹 코드 붙여넣기
  3. appcenter profile list
    - 사용자 확인
  4. appcenter apps create -d {app-name-aos} -o android -p react-native
    appcenter apps create -d {app-name-ios} -o ios -p react-native
    - 앱센터에 앱 등록
    - 난 여기서 에러가 나서 https://appcenter.ms/ 에 직접 앱을 등록했다
  5. appcenter apps list
    - 등록된 앱 조회
  6. appcenter codepush deployment add -a {username/app-name-aos} Staging
    appcenter codepush deployment add -a {username/app-name-aos} Production
    appcenter codepush deployment add -a {username/app-name-ios} Staging
    appcenter codepush deployment add -a {username/app-name-ios} Production
    - 배포 할 버전 등록
  7. appcenter codepush deployment list -a {username/app-name-aos}
    appcenter codepush deployment list -a {username/app-name-ios}
    - 앱 상태 조회 
  8. appcenter codepush deployment list -a {username/app-name-aos} - k
    appcenter codepush deployment list -a {username/app-name-ios} - k
    - 앱 키 조회

 

react native code push 세팅

1. npm install --save react-native-code-push

2. 앱 루트 폴더에 적용

import codePush from 'react-native-code-push'
export default codePush(App)

 

 

ios code push 세팅

1. ios/app/Info.plist 

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

2. ios/app/AppDelegate.m

#import <CodePush/CodePush.h>

 

#if DEBUG

  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];

#else

  return [CodePush bundleURL];

//   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; //이걸 지우고 CodePush를 리턴하도록, 

#endif

 

3. Project > Info > Configurations 에서 + 를 눌러 Duplicate Release Configaturaion을 선택 후 Debug, Release 밑에 Staging을 하나 추가한다. 

 

4. Project > Build Settings 에서 +를 눌러 'Add User-defined Setting'을 선택 한 뒤 'MULTI_DEPLOYMENT_CONFIG'라는 이름으로 등록한 뒤 Release 와 Staging 에 각 다음 값을 준다
Release : $(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
Staging : $(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)

 

5. 다시 Project > Build Settings 에서 + 를 클릭하여 'Add User-Defined Settings'을 선택하고 'CODEPUSH_KEY' 라는 이름을 준다. Release 와 Staging 값에 각 appcenter codepush deployment list -a {username/app-name-ios} - k 명령어로 확인했던 배포 키를 입력한다.

 

 

6. Product > scheme > edit scheme > Build Configration을 Staging or Release로 바꾼 뒤 Debug executable을 비활성화 한다 // 이렇게 해야지 빌드 할때 번들까지 같이 설치돼서 npm server없이 확인 가능

 

 

7. 앱 빌드 후 js파일을 수정한 다음 

appcenter codepush release-react -a {username/app-name-ios} -d Staging

하면

Successfully released an update containing the .....

이라고 성공 메시지가 뜨고 

appcenter codepush deployment list -a {username/app-name-ios}

명령어를 입력하면

설치중임을 알리는 1 pending 뜬다.

잠시 후 다시 

appcenter codepush deployment list -a {username/app-name-ios}

완료

 

 

 

 

출처 - https://weiji.io/2021/05/24/react-native-codepush/