평생 공부만 해야할듯

이전 글에 CodePush 설정을하여 실시간 배포를 진행해봤습니다.

https://gigas-blog.tistory.com/270?category=1037450 

하지만 테스터에게 제공할 때에도 실시간 배포가 되야하는데요.

Production 이나 Staging 하나로 배포 키가 고정되어 있다면 매번 앱을 다시 빌드해야할겁니다.

AppCenter에서는 Staging으로 테스터에게 배포하고 문제가 없다면 Production으로 배포하는걸 권장하고 있죠.

이번 글에서 위의 상황에 맞게 배포할 수 있도록 다중 배포 키를 등록하도록 하겠습니다.

* React Native 0.60 이상을 기준으로 작성하였습니다. *

# Android 설정

app 수준의 build.gradle 파일을 열어줍니다.

android { buildTypes {} } 위치를 찾아 빌드 유형에 대한 항목을 정의합니다.

resValue에 각 항목에 맞는 배포 키를 넣어줍니다.

Staging은 명명규칙때문에 releaseStaging으로 작성해줍니다.

그냥 staging으로 작성한다면 Bundle 생성시 buildTypes에서 보여지지 않습니다.

android {
    ...
    buildTypes {
        debug {
            ...
            // Note: CodePush updates shouldn't be tested in Debug mode as they're overriden by the RN packager. However, because CodePush checks for updates in all modes, we must supply a key.
            resValue "string", "CodePushDeploymentKey", '""'
            ...
        }
        releaseStaging {
            ...
            resValue "string", "CodePushDeploymentKey", '"<INSERT_STAGING_KEY>"'
            // Note: It's a good idea to provide matchingFallbacks for the new buildType you create to prevent build issues
            // Add the following line if not already there
            matchingFallbacks = ['release']
            ...
        }
        release {
            ...
            resValue "string", "CodePushDeploymentKey", '"<INSERT_PRODUCTION_KEY>"'
            ...
        }
    }
    ...
}

# Android 에서 hermes를 사용하고 있다면 staging빌드시 충돌로 앱이 종료됩니다 #

# 아래처럼 releaseStagingImplementation 라인을 추가해줘야 정상적으로 앱이 실행됩니다. #

if (enableHermes) {
    ...
    releaseStagingImplementation files(hermesPath + "hermes-release.aar")
} else {
    implementation jscFlavor
}

기존에 작성했던 strings.xml에서 작성했던 'CodePushDeploymentKey' 항목은 제거해줍니다.

기존에 CodePush 설정이 되어있지 않았다면 해당 항목은 없으니 패스해도 됩니다.

잘 따라 오셨다면 build.gradle에서 'Sync Now'를 클릭해 줍니다.

정상적으로 Sync가 되었다면 상단 메뉴 'Build'항목에서 'Generate Signed Bundle / APK...'메뉴를 클릭합니다.

서명을 하고 다음으로 넘어가면 정상적으로 releaseStaging 타입이 생긴것을 확인할 수 있습니다.

기본 debug 모드에서는 배포키가 없으며, 배포시 release, staging모드로 각 모드에 맞는 배포키로  빌드할 수 있습니다.

Release, Staging 말고도 원하는대로 커스텀이 가능하며, 용도에 맞는 모드로 배포해보세요.

회사에서 Mac Book을 많이 사용합니다.

동료들도 다같이 M1 Chip Mac Book 으로 변경하였는데 Hub가 부족하여 알아보던중 SKY 비트 X7 이라는 제품을 알게되었습니다.

대량 구매를 하고 나서 모두들 전력 부족함 없이 키보드, 마우스, 모니터 연결까지 잘 되어 만족하고 있었습니다.

그러던 중 Mac OS가 Meonterey로 업데이트 되었는데요.

업데이트 직후 키보드, 마우스, 모니터가 먹통이 되는 현상 발생했습니다.

Apple 정품 허브는 문제없이 되었는데, Windows OS에서도 문제가 발생하여 소프트웨어 업데이트를 필요로 한다고 합니다.

내용을 찾기 힘들기에 이 글에서 SKY 비트 X7 드라이브를 업데이트 방법을 소개하려고 합니다.

1. 파일 다운로드

# 드라이브 업데이트는 Windows OS 환경에서만 가능합니다. #

SKY 카페에서 EP9631G_PD3_111111751_HYD.bin, 소프트웨어 DL _ 실행 프로그램.exe 파일을 다운받습니다.

https://cafe.naver.com/skycampus/1613

2. exe 파일 실행

다운로드 받은 파일 중 '소프트웨어 DL _ 실행 프로그램.exe' 파일을 더블클릭하여 실행합니다.

3. USB 연결

프로그램이 정상적으로 실행되었다면 A to C 타입의 케이블로 SKY Biit X7 C단자에 연결합니다.

정상적으로 연결이 되었다면 '소프트웨어 DL _ 실행 프로그램.exe' 를 실행했던 화면에서 'Connected bin file version is xx' 이라는 문구가 보여집니다.

4. bin 파일 실행

실행된 프로그램에서 M 아이콘을 클릭하여 EP9631G_PD3_111111751_HYD.bin 파일을 선택해 줍니다.

선택 즉시 Update Main Chip Procedure 알림창이 뜨게 되는데 '예(Y)' 버튼을 클릭합니다.

아래처럼 자동으로 펌웨어 파일을 다운로드 합니다.

정상적으로 업데이트가 진행되고 아래 Progress에 'Updating Main Chip Finish, Please check LED' 문구가 보여집니다.

SKY Biit X7 기기에서 파란불이 나온다면 문제가 없는겁니다.

이렇게 업데이트를 하고나면 기존에 연결이 되지 않았던 키보드, 마우스, 모니터가 정상적으로 출력이 됩니다.

고장났다고 생각하지 말고 소프트웨어 업데이트로 HUB의 생명을 연장시켜 주세요!

공식 홈페이지 입니다.

https://docs.microsoft.com/ko-kr/appcenter/distribution/codepush/rn-get-started

CodePush 를 사용하기 위해 아래의 명령어를 입력하여 의존성을 추가합니다.

ReactNative 루트 경로에서 아래와 같은 명령어를 입력합니다.

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

1. CocoaPods dependencies 설치

아래 명령어를 실행하여 CocoaPods dependencies를 설치 합니다.

cd ios && pod install && cd ..

2. AppDelegete.m 헤더 추가

AppDelegete.m 파일에서 아래 헤더 파일을 import 합니다.

#ifdef FB_SONARKIT_ENABLED 라인 위에 아래의 헤더파일을 추가합니다.

#import <CodePush/CodePush.h>

3. sourceURLForBridge 수정

Release 모드에서 원본 URL을 설정하는 코드를 찾습니다.

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

위에 코드를 아래 코드로 변경합니다.

CodePush bundleURL로 변경함으로써 최신 버전의 앱 JS 번들을 로드합니다.

return [CodePush bundleURL];

sourceURLForBridge 함수 코드는 아래와 같습니다.

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

4. Info.plist 설정

CodePushDeploymentKey를 추가 합니다.

<key>CodePushDeploymentKey</key>
<string>DeploymentKey</string>

이와같은 설정으로 CodePush를 사용할 수 있는 기본적인 설정이 되었습니다.