React Native 클라이언트 SDK 시작

  • 아티클

중요

Visual Studio App Center는 2025년 3월 31일에 사용 중지될 예정입니다. Visual Studio App Center가 완전히 사용 중지될 때까지 계속 사용할 수 있지만 마이그레이션을 고려할 수 있는 몇 가지 권장 대안이 있습니다.

지원 타임라인 및 대안에 대해 자세히 알아보세요.

CodePush 계정을 설정하기 위한 범용 "시작" 지침을 따른 후에는 앱의 루트 디렉터리 내에서 다음 명령을 실행하여 React Native 앱에 CodePush 통합을 시작할 수 있습니다.

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

다른 모든 React Native 플러그 인과 마찬가지로 iOS 및 Android의 통합 환경은 다르므로 앱의 대상 플랫폼에 따라 설정 단계를 따릅니다. 두 플랫폼을 대상으로 하는 경우 각 플랫폼에 대해 별도의 CodePush 애플리케이션을 만드는 것이 좋습니다.

다른 프로젝트가 CodePush와 어떻게 통합되었는지 확인하려면 커뮤니티에서 제공하는 예제 앱을 참조하세요. 또한 CodePush + React Native 익숙해지려면 빌랄 부다니와 Deepak Sisodiya가 제작한 시작 비디오를 참조하세요.

중요

이 가이드에서는 명령을 사용하여 react-native init React Native 프로젝트를 초기화한 것으로 가정합니다. 2017년 3월부터 명령을 create-react-native-app 사용하여 React Native 프로젝트를 초기화할 수도 있습니다. 이 명령을 사용하는 경우 프로젝트의 홈 디렉터리에서 를 실행 npm run eject 하여 만든 것과 유사한 react-native init 프로젝트를 가져옵니다.

iOS 설정

CodePush 플러그 인이 있으면 React Native 앱의 Xcode 프로젝트에 통합하고 올바르게 구성해야 합니다.

React Native 0.60 버전 이상에 대한 플러그 인 설치 및 구성(iOS)

  1. 를 실행 cd ios && pod install && cd .. 하여 필요한 모든 CocoaPods 종속성을 설치합니다.

  2. 파일을 열고 AppDelegate.m CodePush 헤더에 대한 import 문을 추가합니다.

    #import <CodePush/CodePush.h>

  3. 프로덕션 릴리스에 대한 브리지의 원본 URL을 설정하는 다음 코드 줄을 찾습니다.

    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  4. 다음 줄로 바꿉 있습니다.

    return [CodePush bundleURL];

    이 변경은 항상 앱의 JS 번들의 최신 버전을 로드하도록 앱을 구성합니다. 첫 번째 시작 시 앱으로 컴파일된 파일에 해당합니다. 그러나 CodePush를 통해 업데이트가 푸시된 후에는 가장 최근에 설치된 업데이트의 위치가 반환됩니다.

    참고

    메서드는 bundleURL 앱의 JS 번들 이름이 이라고 main.jsbundle가정합니다. 다른 파일 이름을 사용하도록 앱을 구성한 경우 메서드(확장명을 사용 .jsbundle 한다고 가정함) 또는 bundleURLForResource:withExtension: 메서드를 대신 호출 bundleURLForResource: 하여 기본 동작을 덮어씁니다.

    일반적으로 CodePush를 사용하여 릴리스 빌드 내에서 JS 번들 위치를 resolve 합니다. 디버깅 여부에 따라 사전 프로세서 매크로를 사용하여 DEBUG 패키지 서버와 CodePush 사용 간에 동적으로 전환하는 것이 좋습니다. 이렇게 하면 디버그 시 Chrome 개발 도구, 라이브 다시 로드 등을 계속 사용하면서 프로덕션 환경에서 원하는 올바른 동작을 얻을 수 있습니다.

    sourceURLForBridge 메서드는 다음과 같습니다.

    - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}

  5. 에 배포 키를 Info.plist추가합니다. CodePush 런타임에 업데이트를 쿼리해야 하는 배포를 알리려면 앱의 Info.plist 파일을 열고 값이 이 앱을 구성하려는 배포의 키(예: 앱 배포 FooBar 의 키Staging)인 라는 CodePushDeploymentKey새 항목을 추가합니다. AppCenter dashboard 앱의 배포 UI로 이동하여 또는 CodePush CLI를 사용하여 실행appcenter codepush deployment list --app <ownerName>/<appName> -k(-k키가 기본적으로 표시되지 않으므로 플래그가 필요함)하고 사용하려는 배포에 해당하는 열 값을 Deployment Key 복사하여 이 값을 검색할 수 있습니다(아래 참조). 배포 이름(예: 스테이징)을 사용하는 것은 작동하지 않습니다. 해당 "식별 이름"은 CLI의 인증된 관리 사용용이며 앱 내에서 공용 사용을 위한 것이 아닙니다.

    목록의 배포 키

    CodePush 앱과 함께 만든 및 Production 배포를 효과적으로 사용하려면 앱의 Staging CodePush 사용을 프로덕션으로 실제로 이동하기 전에 아래의 다중 배포 테스트 문서를 참조하세요.

    참고

    다른 배포를 동적으로 사용해야 하는 경우 코드 푸시 옵션을 사용하여 JS 코드에서 배포 키를 재정의할 수도 있습니다.*

0.60(iOS)보다 낮은 React Native 플러그 인 설치

CodePush 플러그 인은 가능한 한 많은 개발자 기본 설정을 수용하기 위해 다음 세 가지 메커니즘을 통해 iOS 설치를 지원합니다.

  1. RNPM - React Native 패키지 관리자(RNPM)는 React Native 플러그 인에 가능한 가장 간단한 설치 환경을 제공하는 멋진 도구입니다. 이미 사용 중이거나 사용하려는 경우 이 방법을 사용하는 것이 좋습니다.

  2. CocoaPods - React Native 포함하는 네이티브 iOS 앱을 빌드하거나 CocoaPods를 사용하는 것을 선호하는 경우 플러그 인의 일부로 제공되는 Podspec 파일을 사용하는 것이 좋습니다.

  3. "수동" - 추가 도구에 의존하지 않거나 몇 가지 추가 설치 단계(일회성 작업)로 괜찮다면 이 방법을 사용합니다.

플러그 인 설치(iOS - RNPM)

  1. React Native rnpm link v0.27부터 는 이미 React Native CLI에 병합되었습니다. 다음을 실행합니다.

    react-native link react-native-code-push

    앱에서 v0.27보다 낮은 React Native 버전을 사용하는 경우 다음 명령을 실행합니다.

     rnpm link react-native-code-push

    참고

    RNPM이 아직 설치되어 있지 않은 경우 위의 명령을 실행 npm i -g rnpm 하여 설치할 수 있습니다. RNPM이 이미 설치되어 있는 경우 이 1단계 설치의 이점을 활용하려면 v1.9.0 이상이 있는지 확인합니다.

  2. 사용하려는 배포 키를 묻는 메시지가 표시됩니다. 아직 없는 경우 를 실행 appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys하여 이 값을 검색하거나 를 눌러 <ENTER>무시하도록 선택하고 나중에 추가할 수 있습니다. 시작하려면 CodePush 엔드 투 엔드를 테스트할 수 있도록 배포 키를 사용하는 Staging 것이 좋습니다.

플러그 인 설치(iOS - CocoaPods)

  1. NPM에서 모듈을 설치한 경로를 가리키는 React Native 및 CodePush 플러그 인 종속성을 Podfile에 추가합니다.

    # React Native requirements
pod 'React', :path => '../node_modules/react-native', :subspecs => [
   'Core',
   'CxxBridge', # Include this for RN >= 0.47
   'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
   'RCTText',
   'RCTNetwork',
   'RCTWebSocket', # Needed for debugging
   'RCTAnimation', # Needed for FlatList and animations running on native UI thread
   # Add any other subspecs you want to use in your project
]
# Explicitly include Yoga if you're using RN >= 0.42.0
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

# CodePush plugin dependency
pod 'CodePush', :path => '../node_modules/react-native-code-push'

    참고

    종속성에 대한 파일 경로는 앱의 Podfile 위치를 기준으로 해야 합니다.

    참고

    프로젝트의 JWT 라이브러리는 버전 3.0.x 이상이어야 합니다.

  2. pod install을 실행합니다.

참고

CodePush .podspec 는 Pod에 React 따라 달라지므로 앱이 빌드된 React Native 버전을 올바르게 사용할 수 있도록 하려면 React Native 통합 설명서에 설명된 대로 앱의 Podfile 종속성을 정의 React 해야 합니다.

플러그 인 설치(iOS - 수동)

  1. 앱의 Xcode 프로젝트 열기

  2. CodePush.xcodeproj 디렉터리 내에서 node_modules/react-native-code-push/ios 파일을 찾아(또는 node_modules/react-native-code-push =1.7.3-beta 설치의 경우<) Xcode의 Libraries 노드로 끌어옵니다.

    프로젝트에 CodePush 추가

  3. Xcode에서 프로젝트 노드를 선택하고 프로젝트 구성의 "빌드 단계" 탭을 선택합니다.

  4. 에서 Libraries/CodePush.xcodeproj/Products 프로젝트의 "빌드 단계" 구성의 "라이브러리와 이진 연결" 섹션으로 끌어 libCodePush.a 옵니다.

    빌드하는 동안 CodePush 연결

  5. "라이브러리와 이진 연결" 목록 아래에 있는 더하기 기호를 클릭하고 노드 아래에 있는 libz.tbd 라이브러리를 iOS 9.1 선택합니다.

    Libz 참조

    참고

    또는 원하는 경우 의 섹션에 -lz 있는 필드에 플래그 Other Linker Flags 를 Linking 추가할 수 Build Settings있습니다.

0.60(iOS)보다 낮은 React Native 플러그 인 구성

참고

RNPM을 사용했거나 react-native link 플러그 인을 자동으로 연결하는 경우 이러한 단계가 이미 완료되었으므로 이 섹션을 건너뛸 수 있습니다.

CodePush 플러그 인을 빌드/연결하도록 Xcode 프로젝트가 설정되면 CodePush 서버에 릴리스된 업데이트와 동기화를 담당하므로 JS 번들의 위치에 대해 CodePush를 검사 앱을 구성해야 합니다. 이렇게 하려면 다음 단계를 수행하세요.

  1. AppDelegate.m 파일을 열고 CodePush 헤더에 대한 import 문을 추가합니다.

    #import <CodePush/CodePush.h>

React Native 0.59 - 0.59.10의 경우:

  1. 프로덕션 릴리스에 대한 브리지의 원본 URL을 설정하는 다음 코드 줄을 찾습니다.

    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  2. 다음 줄로 바꿉 있습니다.

    return [CodePush bundleURL];

React Native 0.58 이하의 경우:

  1. 프로덕션 릴리스에 대한 앱 이진 파일에서 JS 번들을 로드하는 다음 코드 줄을 찾습니다.

    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  2. 다음 줄로 바꿉 있습니다.

    jsCodeLocation = [CodePush bundleURL];

이 변경은 항상 앱의 JS 번들의 최신 버전을 로드하도록 앱을 구성합니다. 첫 번째 시작 시 앱으로 컴파일된 파일에 해당합니다. 그러나 CodePush를 통해 업데이트가 푸시된 후에는 가장 최근에 설치된 업데이트의 위치가 반환됩니다.

참고

메서드는 bundleURL 앱의 JS 번들 이름이 이라고 main.jsbundle가정합니다. 다른 파일 이름을 사용하도록 앱을 구성한 경우 메서드(확장명을 사용 .jsbundle 한다고 가정함) 또는 bundleURLForResource:withExtension: 메서드를 대신 호출 bundleURLForResource: 하여 기본 동작을 덮어씁니다.

일반적으로 CodePush를 사용하여 릴리스 빌드 내에서 JS 번들 위치를 resolve 합니다. 디버깅 여부에 따라 사전 프로세서 매크로를 사용하여 DEBUG 패키지 서버와 CodePush 사용 간에 동적으로 전환하는 것이 좋습니다. 이렇게 하면 디버그 시 Chrome 개발 도구, 라이브 다시 로드 등을 계속 사용하면서 프로덕션 환경에서 원하는 올바른 동작을 얻을 수 있습니다.

React Native 0.59 - 0.59.10의 경우:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}

React Native 0.58 이하의 경우:

NSURL *jsCodeLocation;

#ifdef DEBUG
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
    jsCodeLocation = [CodePush bundleURL];
#endif

CodePush 런타임에 업데이트를 쿼리해야 하는 배포를 알리려면 프로젝트의 Info.plist 파일을 열고 값이 이 앱을 구성하려는 배포의 키(예: 앱 배포 FooBar 의 키Staging)인 라는 CodePushDeploymentKey새 항목을 추가합니다. CodePush CLI에서 를 실행하고 appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys 사용하려는 배포에 해당하는 열 값을 Deployment Key 복사하여 이 값을 검색할 수 있습니다(아래 참조). 배포 이름(예: Staging)을 사용하는 것은 작동하지 않습니다. 해당 "식별 이름"은 CLI의 인증된 관리 사용용이며 앱 내에서 공용 사용을 위한 것이 아닙니다.

스테이징 키

CodePush 앱과 함께 만든 및 Production 배포를 효과적으로 사용하려면 앱의 Staging CodePush 사용을 프로덕션으로 실제로 이동하기 전에 아래의 다중 배포 테스트 문서를 참조하세요.

HTTP 예외 도메인 구성(iOS)

CodePush 플러그 인은 다음 도메인에 대한 HTTPS 요청을 수행합니다.

  • codepush.appcenter.ms
  • codepush.blob.core.windows.net
  • codepushupdates.azureedge.net

이러한 도메인에 대한 기본 HTTP 보안 구성을 변경하려면 프로젝트의 Info.plist 파일 내에서 (ATS) 구성을 정의NSAppTransportSecurity합니다.

<plist version="1.0">
  <dict>
    <!-- ...other configs... -->

    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSExceptionDomains</key>
      <dict>
        <key>codepush.appcenter.ms</key>
        <dict><!-- read the ATS Apple Docs for available options --></dict>
      </dict>
    </dict>

    <!-- ...other configs... -->
  </dict>
</plist>

작업을 수행하기 전에 먼저 Apple 문서를 참조하세요 .

코드 서명 설정(iOS)

릴리스 중에 번들을 자체 서명하고 업데이트를 설치하기 전에 해당 서명을 확인할 수 있습니다. 코드 서명에 대한 자세한 내용은 관련 코드 푸시 설명서 섹션을 참조하세요.

번들 확인을 위해 공개 키를 구성하려면 공개 키 콘텐츠의 이름 CodePushPublicKey 및 문자열 값으로 에 레코드 Info.plist 를 추가해야 합니다. 예제:

<plist version="1.0">
  <dict>
    <!-- ...other configs... -->

    <key>CodePushPublicKey</key>
        <string>-----BEGIN PUBLIC KEY-----
MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANkWYydPuyOumR/sn2agNBVDnzyRpM16NAUpYPGxNgjSEp0etkDNgzzdzyvyl+OsAGBYF3jCxYOXozum+uV5hQECAwEAAQ==
-----END PUBLIC KEY-----</string>

    <!-- ...other configs... -->
  </dict>
</plist>

Android 설치

CodePush를 Android 프로젝트에 통합하려면 다음 단계를 수행합니다.

플러그 인 설치(Android)

React Native 0.60 버전 이상용 플러그 인 설치 및 구성(Android)

  1. 파일 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')

  2. android/app/build.gradle 파일에서 파일을 추가 빌드 작업 정의로 추가 codepush.gradle 합니다.

    ...
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...

  3. MainApplication.java 다음 변경 내용을 통해 CodePush를 사용하도록 (또는 MainApplicationReactNativeHost.java React Native 0.68 - 0.70) 파일을 업데이트합니다.

    ...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

  4. 에 배포 키를 추가합니다 strings.xml.

    CodePush 런타임에 업데이트를 쿼리해야 하는 배포를 알리려면 앱의 strings.xml 파일을 열고 이 앱을 구성하려는 배포의 키(예: Staging 앱 배포 FooBar 키)의 키인 라는 CodePushDeploymentKey새 문자열을 추가합니다. App Center CLI에서 를 실행하고 appcenter codepush deployment list -a <ownerName>/<appName> -k ( -k 기본적으로 키가 표시되지 않으므로 플래그가 필요함) 사용하려는 배포에 해당하는 열 값을 Key 복사하여 이 값을 검색할 수 있습니다(아래 참조). 배포 이름(예: 스테이징)을 사용하는 것은 작동하지 않습니다. "식별 이름"은 CLI의 인증된 관리 사용용이며 앱 내에서 공용 사용을 위한 것이 아닙니다.

    배포 목록

    CodePush 앱과 함께 만든 및 Production 배포를 효과적으로 사용하려면 앱의 Staging CodePush 사용을 프로덕션으로 실제로 이동하기 전에 아래의 다중 배포 테스트 문서를 참조하세요.

    strings.xml 파일은 다음과 같이 표시됩니다.

     <resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>

    참고

    다른 배포를 동적으로 사용해야 하는 경우 코드 푸시 옵션을 사용하여 JS 코드에서 배포 키를 재정의할 수도 있습니다.*

0.60보다 낮은 React Native 플러그 인 설치(Android)

CodePush 플러그 인은 가능한 한 많은 개발자 기본 설정을 수용하기 위해 다음 두 가지 메커니즘을 통해 Android 설치를 지원합니다.

  1. RNPM - React Native 패키지 관리자(RNPM)는 React Native 플러그 인에 가능한 가장 간단한 설치 환경을 제공하는 멋진 도구입니다. 이미 사용 중이거나 사용하려는 경우 이 방법을 사용하는 것이 좋습니다.

  2. "수동" - 추가 도구에 의존하지 않거나 몇 가지 추가 설치 단계(일회성 작업)로 괜찮다면 이 방법을 사용합니다.

참고

React Native 리포지토리의 코드 변경으로 인해 설치된 React Native 버전 범위가 0.29에서 0.32까지인 경우 수동 단계에 따라 올바르게 설정하는 것이 좋습니다.

플러그 인 설치(Android - RNPM)

  1. React Native rnpm link v0.27부터 는 이미 React Native CLI에 병합되었습니다. 다음을 실행합니다.

    react-native link react-native-code-push

    앱에서 v0.27보다 낮은 React Native 버전을 사용하는 경우 다음 명령을 실행합니다.

    rnpm link react-native-code-push

    참고

    RNPM이 아직 설치되어 있지 않은 경우 위의 명령을 실행 npm i -g rnpm 하여 설치할 수 있습니다.

  2. RNPM >=1.6.0을 사용하는 경우 사용하려는 배포 키를 묻는 메시지가 표시됩니다. 아직 없는 경우 를 실행 appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys하여 이 값을 검색하거나 를 눌러 <ENTER>무시하도록 선택하고 나중에 추가할 수 있습니다. 시작하려면 CodePush 엔드 투 엔드를 테스트할 수 있도록 배포 키를 사용하는 Staging 것이 좋습니다.

그리고 그것은 RNPM을 사용하여 설치를위한 것입니다! 플러그 인 구성 섹션으로 계속 진행하여 설정을 완료합니다.

플러그 인 설치(Android - 수동)

  1. 파일 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')

  2. android/app/build.gradle 파일에서 프로젝트를 컴파일 시간 종속성으로 추가 :react-native-code-push 합니다.

    ...
dependencies {
    ...
    compile project(':react-native-code-push')
}

  3. android/app/build.gradle 파일에서 파일을 추가 빌드 작업 정의로 추가 codepush.gradle 합니다.

    ...
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...

0.60보다 낮은 React Native 플러그 인 구성(Android)

참고

RNPM을 사용했거나 react-native link 플러그 인을 자동으로 연결하는 경우 이러한 단계가 이미 완료되었으므로 이 섹션을 건너뛸 수 있습니다.

플러그 인을 설치하고 Android Studio 프로젝트를 Gradle과 동기화한 후에는 현재 및 모든 이후 버전 관리를 "제어"하기 때문에 JS 번들의 위치에 대해 CodePush를 검사 앱을 구성해야 합니다. 가상 하드 디스크 파일에 대한 중요 정보를 제공하려면

React Native >= v0.29

CodePush를 React Native 애플리케이션에 통합하는 경우 다음 단계를 수행합니다.

다음 변경 내용을 MainApplication.java 통해 CodePush를 사용하도록 파일을 업데이트합니다.

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }

        @Override
        protected List<ReactPackage> getPackages() {
            // 3. Instantiate an instance of the CodePush runtime and add it to the list of
            // existing packages, specifying the right deployment key. If you don't already
            // have it, you can run "appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys" to retrieve your key.
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
            );
        }
    };
}

기존 네이티브 애플리케이션에 React Native 통합하는 경우 다음 단계를 수행합니다.

다음 변경 내용을 통해 CodePush를 사용하도록 업데이트 MyReactActivity.java (앱에서 다르게 이름을 지정할 수 있음) 파일:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MyReactActivity extends Activity {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        mReactInstanceManager = ReactInstanceManager.builder()
                // ...
                // Add CodePush package
                .addPackage(new CodePush("deployment-key-here", getApplicationContext(), BuildConfig.DEBUG))
                // Get the JS Bundle File via CodePush
                .setJSBundleFile(CodePush.getJSBundleFile())
                // ...

                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

    ...
}

React Native v0.19의 경우 - v0.28

다음 변경 내용을 통해 CodePush를 사용하도록 MainActivity.java 파일을 업데이트합니다.

...
// 1. Import the plugin class (if you used RNPM to install the plugin, this
// should already be done for you automatically so you can skip this step).
import com.microsoft.codepush.react.CodePush;

public class MainActivity extends ReactActivity {
    // 2. Override the getJSBundleFile method to let
    // the CodePush runtime determine where to get the JS
    // bundle location from on each app start
    @Override
    protected String getJSBundleFile() {
        return CodePush.getJSBundleFile();
    }

    @Override
    protected List<ReactPackage> getPackages() {
        // 3. Instantiate an instance of the CodePush runtime and add it to the list of
        // existing packages, specifying the right deployment key. If you don't already
        // have it, you can run "appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys" to retrieve your key.
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new CodePush("deployment-key-here", this, BuildConfig.DEBUG)
        );
    }

    ...
}

백그라운드 React 인스턴스

참고

이 섹션은 (예: 네이티브 푸시 알림 수신기 내에서) 없이 Activity React Native instance 명시적으로 시작하는 경우에만 필요합니다. 이러한 상황에서 CodePush는 React Native instance 찾는 방법을 설명해야 합니다.

React Native instance 업데이트/다시 시작하려면 백그라운드에서 instance 다시 시작하기 전에 CodePush를 로 구성 ReactInstanceHolder 해야 합니다. 이 작업은 구현에서 수행됩니다 Application .

React Native >= v0.29

다음 변경 내용을 MainApplication.java 통해 CodePush를 사용하도록 파일을 업데이트합니다.

...
// 1. Declare your ReactNativeHost to extend ReactInstanceHolder. ReactInstanceHolder is a subset of ReactNativeHost, so no additional implementation is needed.
import com.microsoft.codepush.react.ReactInstanceHolder;

public class MyReactNativeHost extends ReactNativeHost implements ReactInstanceHolder {
  // ... usual overrides
}

// 2. Provide your ReactNativeHost to CodePush.

public class MainApplication extends Application implements ReactApplication {

   private final MyReactNativeHost mReactNativeHost = new MyReactNativeHost(this);

   @Override
   public void onCreate() {
     CodePush.setReactInstanceHolder(mReactNativeHost);
     super.onCreate();
  }
}

React Native v0.19의 경우 - v0.28

v0.29 이전에는 React Native 추상화가 ReactNativeHost 제공되지 않았습니다. 백그라운드 instance 시작하는 경우 이제 를 구현ReactInstanceHolder해야 하는 고유한 를 빌드했을 수 있습니다. 완료되면 다음을 수행합니다.

// 1. Provide your ReactInstanceHolder to CodePush.

public class MainApplication extends Application {

   @Override
   public void onCreate() {
     // ... initialize your instance holder
     CodePush.setReactInstanceHolder(myInstanceHolder);
     super.onCreate();
  }
}

CodePush 앱과 함께 만든 및 Production 배포를 효과적으로 사용하려면 앱의 Staging CodePush 사용을 프로덕션으로 실제로 이동하기 전에 아래의 다중 배포 테스트 문서를 참조하세요.

코드 서명 설정(Android)

CLI 버전 2.1.0 부터 릴리스 중에 번들을 자체 서명하고 업데이트를 설치하기 전에 서명을 확인할 수 있습니다. 코드 서명에 대한 자세한 내용은 관련 코드 푸시 설명서 섹션을 참조하세요. 코드 서명에 공개 키를 사용하려면 다음 단계를 수행합니다.

에 CodePushPublicKey 문자열 항목을 추가합니다 /path_to_your_app/android/app/src/main/res/values/strings.xml. 다음과 같이 보일 수 있습니다.

<resources>
   <string name="app_name">my_app</string>
   <string name="CodePushPublicKey">-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtPSR9lkGzZ4FR0lxF+ZA
P6jJ8+Xi5L601BPN4QESoRVSrJM08roOCVrs4qoYqYJy3Of2cQWvNBEh8ti3FhHu
tiuLFpNdfzM4DjAw0Ti5hOTfTixqVBXTJPYpSjDh7K6tUvp9MV0l5q/Ps3se1vud
M1/X6g54lIX/QoEXTdMgR+SKXvlUIC13T7GkDHT6Z4RlwxkWkOmf2tGguRcEBL6j
ww7w/3g0kWILz7nNPtXyDhIB9WLH7MKSJWdVCZm+cAqabUfpCFo7sHiyHLnUxcVY
OTw3sz9ceaci7z2r8SZdsfjyjiDJrq69eWtvKVUpredy9HtyALtNuLjDITahdh8A
zwIDAQAB
-----END PUBLIC KEY-----</string>
</resources>

React Native <= v0.60의 CodePush 경우 다음 방법 중 하나를 사용하여 이 매개 변수를 사용하도록 instance 구성해야 합니다.

생성자 사용
new CodePush(
    "deployment-key",
    getApplicationContext(),
    BuildConfig.DEBUG,
    R.string.CodePushPublicKey)
작성기 사용
new CodePushBuilder("deployment-key-here",getApplicationContext())
   .setIsDebugMode(BuildConfig.DEBUG)
   .setPublicKeyResourceDescriptor(R.string.CodePushPublicKey)
   .build()

Windows 설치

CodePush 플러그 인을 획득한 후에는 React Native 앱의 Visual Studio 프로젝트에 통합하고 올바르게 구성해야 합니다. 이렇게 하려면 다음 단계를 따르세요.

React Native 버전 0.63.6 이상용 플러그 인 설치 및 구성(Windows)

플러그 인 설치(Windows-npx)

플러그 인이 다운로드되면 애플리케이션의 루트 디렉터리에서 를 실행 npx react-native autolink-windows 하여 애플리케이션의 Windows 솔루션 파일에 CodePush c++ 프로젝트를 자동으로 추가합니다.

플러그 인 구성(Windows)

  1. 에 windows/<app name> 있는 다음 파일을 에 있는 이 리포지토리 Examples/CodePushDemoAppCpp/windows/CodePushDemoAppCpp의 CodePushDemoAppCpp 예제 앱에 있는 파일로 바꿉니다.

    1. app.h
    2. app.cpp
    3. app.xaml

  2. 위의 파일에서 의 모든 발생을 CodePushDemoAppCpp 애플리케이션 이름으로 바꿉

  3. 에서 앱의 메서드 App.cpp맨 위에 있는 개체에 configMap 애플리케이션의 OnLaunched 앱 버전 및 배포 키를 입력합니다.

//...
void App::OnLaunched(activation::LaunchActivatedEventArgs const& e)
{
    winrt::Microsoft::CodePush::ReactNative::CodePushConfig::SetHost(Host());
    auto configMap{ winrt::single_threaded_map<hstring, hstring>() };
    configMap.Insert(L"appVersion", L"1.0.0");
    configMap.Insert(L"deploymentKey", L"<app deployment key>");
    winrt::Microsoft::CodePush::ReactNative::CodePushConfig::Init(configMap);
//...
}
//...

0.60보다 낮은 React Native 플러그 인 설치 및 구성(Windows)

플러그 인 설치(Windows)

  1. 앱 내에 있는 windows-legacy\<AppName>\<AppName>.sln Visual Studio 솔루션 열기

  2. 창에서 솔루션 노드를 마우스 오른쪽 단추로 Solution Explorer 클릭하고 메뉴 항목을 선택합니다 Add -> Existing Project... .

    프로젝트 추가

  3. 디렉터리로 node_modules\react-native-code-push\windows 이동하여 파일을 선택한 다음 OK

  4. 으로 Solution Explorer돌아가서 앱의 이름을 딴 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 메뉴 항목을 선택합니다 Add -> Reference... .

    참조 추가

  5. 왼쪽에서 Projects 탭을 선택하고 항목을 검사 CodePush 다음OK

    참조 추가 대화 상자

플러그 인 구성(Windows)

플러그 인을 설치한 후 현재 및 모든 이후 버전 관리를 "제어"하기 때문에 JS 번들의 위치에 대해 CodePush를 검사 앱을 구성해야 합니다. 이렇게 하려면 다음 변경 내용을 통해 CodePush를 사용하도록 파일을 업데이트 AppReactPage.cs 합니다.

...
// 1. Import the CodePush namespace
using CodePush.ReactNative;
...
class AppReactPage : ReactPage
{
    // 2. Declare a private instance variable for the CodePushModule instance.
    private CodePushReactPackage codePushReactPackage;

    // 3. Update the JavaScriptBundleFile property to initialize the CodePush runtime,
    // specifying the right deployment key, then use it to return the bundle URL from
    // CodePush instead of statically from the binary. If you don't already have your
    // deployment key, you can run "appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys" to retrieve it.
    public override string JavaScriptBundleFile
    {
        get
        {
            codePushReactPackage = new CodePushReactPackage("deployment-key-here", this);
            return codePushReactPackage.GetJavaScriptBundleFile();
        }
    }

    // 4. Add the codePushReactPackage instance to the list of existing packages.
    public override List<IReactPackage> Packages
    {
        get
        {
            return new List<IReactPackage>
            {
                new MainReactPackage(),
                ...
                codePushReactPackage
            };
        }
    }
    ...
}