코드푸시 10분컷 시작

먼저, appcenter 사이트 들어가서 회원가입을 해야합니다.

appcenter-cli 설치

> yarn global add appcenter-cli

code-push-cli 설치

> yarn global add code-push-cli

아래과정에서 로그인시 알아서 사이트가 켜지고 임시키값이 뜹니다. 복사하여 로그인하시면 됩니다.

코드 푸시 로그인

> code-push register

appcenter 로그인

> appcenter login

앱 등록 하기

여기서 Production key값이 뜨는데 따로 저장해놓으면 편합니다.

> code-push app add <안드로이드앱이름> android react-native
> code-push app add <애플앱이름> ios react-native

앱 리스트 확인하기

> code-push app list

안드로이드 설정

app/build.gradle 마지막 줄

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

MainApplication.java

import com.microsoft.codepush.react.CodePush; //요놈은 상단에 추가

protected String getJSMainModuleName() {
  return "index";
} 
// 아래 4줄 추가
@Override
protected String getJSBundleFile() {
  return CodePush.getJSBundleFile();
}

strings.xml 중간부분에

<string moduleConfig="true" name="CodePushDeploymentKey">android Production key 적으면 됩니다.</string>

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

-android 설정 끝-

애플 설정

AppDelegate.m 상단

#import <CodePush/CodePush.h>

AppDelegate.m 거의 맨 아래 두번째줄(리턴줄) 지우기.

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

아래 코드로 대체합니다.

return [CodePush bundleURL];

info.plist는 중간부분에

<key>CodePushDeploymentKey</key>
<string>애플 Production key넣으셈</string>

-ios 설정 끝-

react-native 설정

react-native-code-push 다운로드 후 pod install

npm i --save react-native-code-push
cd ios && pod install && cd ..

Code_Push.js

import { PureComponent } from "react";
import codePush from "react-native-code-push";

export const codePushOptions = {
  installMode: codePush.InstallMode.IMMEDIATE,
  checkFrequency: codePush.CheckFrequency.MANUAL,
  mandatoryInstallMode: codePush.InstallMode.ON_NEXT_RESTART,
  updateDialog: false,
};

export class LikeAPP extends PureComponent {
  componentDidMount() {
    codePush.sync(codePushOptions);
    codePush.notifyAppReady();
  }
  render() {
    return null;
  }
}

const LikeTMP = codePush(codePushOptions)(LikeAPP);

module.exports = LikeTMP;

그리고 저의 경우는 앱 실행 초입 loading에 넣었습니다.

// loading component
return (
      <Splash>
        <Code_Push />
        <Loading />
      </Splash>

앱 실행시 <Code_Push />을 태우면 되는 것 같습니다.

-ReactNative 설정 끝-

코드푸시하기

터미널에서
( appcenter와 code-push로그인은 되어있어야함 )

appcenter codepush release-react -a 앱센터사이트유저네임/등록한안드앱이름 -d Production
appcenter codepush release-react -a 앱센터사이트유저네임/등록한애플앱이름 -d Production

겪은 이슈 사항

• 잘 안된다 싶으면 code-push랑 appcenter 둘다 로그인 했는지 다시 체크하자
• production 앱을 폰에 빌드하여 테스트하면 코드푸시 번들을 내려받아서 내가 테스트하고자 수정한 내용이 반영이 안됩니다. 그럴 때는 codepush를 끄고 빌드하면 됩니다.
• 잘못된 내용있으면 남겨주세요!
• 읽어주셔서 감사합니다!