5분 만에 반응 네이티브 앱을 Codepush-fy! 🚀

코드푸시란?

Codepush는 반응 네이티브(또는 코르도바) 앱을 업데이트할 때 스토어 리뷰를 우회할 수 있는 멋진 도구입니다.

앱 번들의 클라우드 스토리지처럼 작동합니다. 모든 것을 설정하고 앱을 시장에 게시한 후에는 출시될 때마다 앱이 새 버전과 업데이트가 있는지 확인할 수 있습니다.

react-native 또는 cordova로 만든 iOS, Android 및 Windows 앱을 지원합니다.

자바스크립트 번들(RN 앱인 경우)만 업데이트하므로 자산 또는 네이티브 코드를 포함한 일부 업데이트로 인해 앱이 충돌하고 이전 버전으로 롤백될 수 있다고 합니다.

그러나 이 도구를 약 4개월 동안 사용하는 동안 그런 사고는 한 번도 발생하지 않았습니다. 따라서 기본 모듈을 추가하거나 js 외부 항목을 코딩하지 않는 한 걱정할 필요가 없습니다.

어떻게 사용할 수 있습니까?

1. Appcenter-cli 설치

yarn global add appcenter-cli

or

npm i -g appcenter-cli

2. Appcenter에 앱 및 배포 트랙을 추가합니다.

먼저 appcenter-cli 를 사용하여 appcenter에 로그인해야 합니다.

appcenter login # browser will open up. after you login to appcenter, you'll get auth code to type in terminal

이제 appcenter에 앱(실제 애플리케이션이 아니라 앱 번들의 원격 저장소라고 생각하세요)을 생성해야 합니다.

# change appname and os as you want
appcenter apps create -d {appname} -o {os}(Android/iOS) -p React-Native

프로덕션에서는 각각 appname-ios, appname-android라는 두 개의 앱을 만듭니다. 그런 다음 앱의 배포 트랙을 추가할 수 있습니다. 원격 앱 번들 저장소의 분기로 간주하십시오. 여러 트랙을 만들고 서로 다른 업데이트 스트림을 별도로 제어할 수 있습니다.

appcenter codepush deployment add -a {username/appname} {trackname}

이렇게 하면 터미널에 배포 키가 표시됩니다. 당신은 이것을 필요로 할 것입니다, 그것을 복사합니다. 실수로 터미널을 지웠다면 이 명령어로 다시 얻을 수 있습니다.

appcenter codepush deployment list -a {username/appname} -k

3. 앱에 codepush를 추가합니다.

반응 네이티브 프로젝트에 codepush 종속성을 추가합니다.

yarn add react-native-code-push

iOS 설정

iOS에 대한 기본 종속성 추가

react-native 프로젝트의 루트 디렉토리에서.

cd ios && pod install && cd ..

편집 AppDelegate.m .

codepush용 가져오기 헤더.

#import "AppDelegate.h"

#import <CodePush/CodePush.h> // codepush add this line

#import <React/RCTBridge.h>
...

그리고 react-native가 소스 번들을 읽기 위해 사용하는 url을 변경합니다.

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];  
    // change the line above to the below
    return [CodePush bundleURL];
  #endif
}

편집 Info.plist

이제 codepush 배포 키와 http 예외 도메인을 Info.plist 에 추가해야 합니다.

먼저 배포 키를 설정하여 액세스할 원격 저장소를 앱에 알려야 합니다. 키CodePushDeploymentKey를 Info.plist에 추가하고 이에 대한 값을 설정합니다. 위에서 복사한 키입니다.

<plist version="1.0">
<dict>
  ...
    <key>CodePushDeploymentKey</key>
    <string>mydeploymentkey</string>
  ...
</plist>

그리고 앱 번들을 다운로드하려면 HTTPS 네트워크 액세스를 허용해야 합니다.

<plist version="1.0">
  <dict>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>codepush.appcenter.ms</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>
  ...
  </dict>
</plist>

마지막으로 Info.plist는 아래와 같으며 앱의 iOS 부분은 코드 푸시할 준비가 되었습니다.

<plist version="1.0">
  <dict>
  ...
  <key>CodePushDeploymentKey</key>
  <string>mydeploymentkey</string>
  ...
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>codepush.appcenter.ms</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>
  ...
  </dict>
</plist>

안드로이드 설정

codepush.gradle를 android/app/build.gradle에 추가

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

편집 MainApplication.java .

...
// 1. import codepush package
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. override getJSBundleFile 
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

strings.xml에 배포 키 추가

다시 같은 키.

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

4. 실제로 앱을 코드푸시합니다.

네이티브 측의 원격 저장소에 액세스하도록 앱 설정을 완료했습니다. 이제 반응 네이티브 코드에 버전을 확인하고 자체적으로 업데이트하도록 지시해야 합니다.

많은 시나리오와 옵션이 있을 수 있지만 가장 쉬운 방법을 설명하겠습니다.

// Consider it's your root Component
import React from 'react'
import codePush from 'react-native-code-push'

const App = () => (
  <AwesomeWrapper>
    <AwesomeContent />
  </AwesomeWrapper>
)

// set options for codepush.
const codePushOptions = {
  checkFrequency: codePush.CheckFrequency.ON_APP_START,
  installMode: codePush.InstallMode.IMMEDIATE,
}

// wrap your root component with codepush and let this to be registered in index.js
export default codepush(codePushOptions)(App)

이 경우 checkFrequency , installMode 옵션을 설정하고 루트 구성 요소만 래핑했습니다. 그러나 버전 확인을 트리거하고 codepush.sync() 를 사용하여 수동으로 업데이트할 수 있습니다. 자세한 내용은 codepush api 에서 읽을 수 있습니다.

5. 코드를 푸시하세요!

모든 설정이 완료되었습니다. 이 명령으로 새 앱 번들을 배포할 수 있습니다.

appcenter codepush release-react -a {username/appname} -d {trackname}
# you should do this at the root directory of your react-native project
# because it read and run commands from your package.json