DEV Community: Jacob Park

Codepush-fy your react-native app in 5 minutes! 🚀

Jacob Park — Wed, 23 Sep 2020 06:13:17 +0000

What is codepush?

Codepush is awesome tool that makes it possible to bypass store review when updating react-native(or cordova) apps.

It works like cloud storage of app bundle. After you set everything up and publish your app to the market, on every launch your app can check if there's a new version and updates itself.

It supports iOS, android and windows apps created with react-native or cordova.

They say it updates only javascript bundle(when it's RN app), so some updates including assets or native code might cause apps to crash and roll back to older version.

But while using this tool for about four months, no such accident has ever happened. So unless you add native modules or code some out-of-js stuff, you don't have to worry about it.

How can I use it?

1. Install Appcenter-cli

yarn global add appcenter-cli

or

npm i -g appcenter-cli

2. Add your app and deployment track to Appcenter.

First, you should login to appcenter using appcenter-cli.

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

Now you need to create an app ( not real application, just think this as remote repository of app bundle ) to appcenter.

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

In production, I create two apps named appname-ios, appname-android each. After this, you can add deployment track of your app. Consider it as a branch of your remote app bundle repository. You can create multiple tracks and control those different update streams seperately.

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

When you do this, you'll get a deployment key on your terminal. You will need this, copy it. If you cleared your terminal by accident, you can re-gain it by this command.

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

3. Add codepush to your app.

Add codepush dependency on your react-native project.

yarn add react-native-code-push

Setting up iOS

Add native dependency for iOS

At your root directory of the react-native project.

cd ios && pod install && cd ..

Edit AppDelegate.m.

Import header for codepush.

#import "AppDelegate.h"

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

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

And change url that react-native uses to read source bundle.

- (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
}

Edit Info.plist

Now you should add codepush deployment key and http exception domain to Info.plist.

First you should notify your app to which remote repository to access by setting deployment key. Add key CodePushDeploymentKey to your Info.plist and set value for this. The key that you've copied above.

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

And you should allow HTTPS network access to download app bundle.

<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>

Finally, your Info.plist will be like below and iOS part of your app is ready to codepush.

<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>

Setting up Android

Add codepush.gradleto android/app/build.gradle

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

Edit 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();
        }
    };
}

Add deployment key to strings.xml

The same key again.

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

4. Actually codepush-fy your app.

You've finished setting your app to access to remote repository on the native side. Now you should tell your react-native code to check version and update itself.

There could be so many scenarios and options, but I'll explain the easiest one.

// 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)

In this case, I set checkFrequency, installMode options and just wrapped the root component. But you can trigger version check and update manually with codepush.sync(). You can read about details at codepush api.

5. Push your code!

All settings are done. You can deploy new app bundle with this command.

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

codepush로 react native 앱 심사 없이 업데이트 하기

Jacob Park — Wed, 23 Sep 2020 02:37:37 +0000

원문

codepush란?

codepush는 react native 혹은 cordova 로 개발한 앱을 번거로운 심사과정 없이 바로 업데이트 할 수 있도록 해주는 서비스입니다. 네이티브 코드라는 막으로 감싸져있는 내부의 코드 번들을 원격 저장소에 업로드 해두고, 로컬 디바이스의 앱 번들과 비교해 차이가 있으면 다시 다운로드 받아 업데이트 하는 형태인 듯 합니다.

현재 ios (7+), android (4.1+), windows등의 운영체제를 지원하고 있으며, react native 기준으로 v0.14부터 v0.63까지 각각에 맞는 코드푸시 버젼으로 지원하고 있습니다. 또한 공식문서에 따르면 자바스크립트 코드가 아닌 이미지나 동영상등의 애셋을 업데이트 하는데에 제약이 있고, 따라서 이를 소스로 사용하는 Video나 SliderIOS 같은 특정 컴포넌트의 업데이트는 지원하지 않는다고 합니다.

허나 4달 정도 직접 사용해 본 결과 자바스크립트 번들을 통째로 업데이트 할 수 있기 때문에 네이티브 코드를 추가로 작성한다거나 하는 부분이 아니면 업데이트에서 제한을 거의 느낄 수 없었습니다.

세팅하기

1. AppCenter CLI 설치하기

yarn global add appcenter-cli

or

npm i -g appcenter-cli

2. Appcenter에 앱과 배포트랙 등록하기

우선 appcenter-cli로 로그인을 합니다.

appcenter login # 웹 브라우저가 켜지면 앱센터에 로그인해서 키를 복사한 후 커맨드라인에 붙여넣으면 됩니다.

이제 appcenter에 내 앱을 생성하고, 배포트랙을 설정해야합니다. 직접 appcentr 대시보드에 접속해서 진행해도 되지만, cli로는 명령어 한줄로 해결할 수 있으니 활용해봅시다.

# appname 과 os 부분을 본인 프로젝트에 맞게 수정해주셔야 합니다.
appcenter apps create -d {appname} -o {os}(Android/iOS) -p React-Native

실제 프로젝트에서는 appname-ios, appname-android로 앱 두개를 등록하고 관리하는 형태로 사용하고 있습니다. 이제 각 앱마다 배포트랙을 생성해줍시다.

# 배포트랙은 말 그대로 배포를 하는 트랙입니다.
# 여러개로 설정해서 관리하는 경우도 있다고 하는데 아직 그렇게 깊게 경험해보지는 못했습니다.
# 만약 appcenter 대시보드를 이용하면 기본적으로 Staging 그리고 Production 트랙이 생성됩니다.
# 마지막에 살펴볼 배포과정에서 트랙 이름을 생략하면 Staging으로 배포를 시도합니다.
appcenter codepush deployment add -a {username/appname} {trackname}

이때 터미널에 배포 키가 보여집니다. 나중에 설정에 사용해야하니 복사해둡시다. 혹시나 놓쳤다면 다음 명령어로 다시 확인할 수 있습니다.

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

3. 프로젝트에 codepush 설치하기

react native 프로젝트에 codepush 디펜던시를 추가합니다.

yarn add react-native-code-push

iOS Setup

디펜던시 설치

react native 프로젝트 루트 디렉토리 기준으로 다음 명령어로 네이티브 디펜던시 설치를 진행합니다.

cd ios && pod install && cd ..

AppDelegate.m 수정하기

우선 헤더를 import 해줍니다.

#import "AppDelegate.h"

#import <CodePush/CodePush.h> // codepush 헤더 추가

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

그리고 react native가 내부적으로 소스 번들을 불러오는 url을 변경해줍니다.

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

Info.plist 수정하기

이제 Info.plist에 코드푸시 배포 키와 HTTP 예외 도메인을 설정해줍시다.

우선 codepush 원격 저장소의 어떤앱에 접근할지 알려주기 위해 Info.plist에 아까 확인했던 codepush 배포키를 CodePushDeploymentKey 키의 값으로 추가합니다.

이 키는 code-push deployment ls <appName> -k 명령어로 다시 확인할 수 있습니다.

<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 의 형태는 다음과 같습니다.

<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>

Android 셋업

android/app/build.gradle에 codepush.gradle를 추가합니다.

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

MainApplication.java를 업데이트합니다.

...
// 1. codepush 패키지를 import 합니다.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. getJSBundleFile method 를 오버라이드 합니다.
        @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. 실제로 프로젝트에 codepush 적용하기

codepush 세팅이 끝났으니, 실제로 내 앱이 자바스크립트 번들을 원격 저장소에서 받아와서 업데이트 할 수 있도록 코드를 작성해야 합니다. 여러가지 옵션을 설정할 수 있지만 우선 가장 간단한 형태만 알아보겠습니다.

// 최상위 컴포넌트라고 가정합니다.
import React from 'react'
import codePush from 'react-native-code-push'

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

// 각종 codepush 관련 옵션을 설정하고
const codePushOptions = {
  checkFrequency: codePush.CheckFrequency.ON_APP_START,
  installMode: codePush.InstallMode.IMMEDIATE,
}

// 최상위 컴포넌트를 codepush 래퍼로 감싸서 export 시키고, 해당 컴포넌트를 앱에 등록시킵니다.
export default codepush(codePushOptions)(App)

위의 예제는 버젼 체크를 하는 케이스와 업데이트 하는 형태를 고정해두는 형태이지만, codepush.sync 함수로 동적으로 트리거 할수도 있습니다. 자세한 내용은 codepush api에서 확인할 수 있습니다.

5. 배포하기

앱이 세팅되고, appcenter 로그인이 된 상태에서 다음 명령어로 배포할 수 있습니다. 당연한 얘기일 수 있으나, react native 프로젝트 루트 디렉토리에서 진행해야 package.json을 제대로 읽어서 배포를 수행할 수 있습니다.

appcenter codepush release-react -a {username/appname} -d {trackname}