React Native Firebase Dev 환경 분리하기

React Native Firebase Dev 환경 분리하기

이번 프로젝트에서 개발환경을 설정 중

dev 환경과 prod 환경을 분리하기로 결정을 하여 Front, Back 모두 분리를 시작했습니다.

API Endpoint와 그 외 다른 설정들은 env를 통해 관리가 가능 했지만

firebase 설정 파일의 경우 어떻게 분리를 해야 하지? 하여 이번 포스트를 작성하게 되었습니다.

 

---

Firebase dev 모드 추가하기

가장 먼저 Firebase 설정에서 앱 추가를 통해 dev 환경에서 사용될 iOS, Android 프로젝트 추가가 필요 합니다.

기존의 환경 분리 이전의 Firebase setting이 완료 되어있음을 가정하고
프로젝트를 추가하는 방식에 대해서는 따로 설명을 하지 않도록 하겠습니다.

 

---

iOS dev 환경 분리하기

iOS의 경우 개발 환경 분리를 하는 방법이 다양 합니다.

이 포스트에서는 Build Phases 단계에 빌드 환경에 따라 다르게 설정된 Path의 파일을 읽어

Root 경로의 파일을 새로 만드는 방식을 사용 하도록 하겠습니다.

1. 파일 추가하기

앞에서 만들어진 GoogleService-Info.plist 를 가지고 이제 Prod 환경과 Dev 환경을 분리해줄 차례 입니다.

 

 

위와 같은 구조로 Prod와 Dev 환경을 분리해서 추가를 시켜주면 됩니다. (경로는 root 기준)

다만 추가하실 때 주의하실 점은 아래의 사진과 같이 Copy나 Add to targets 설정을 꺼줘야 합니다.

앞서 말씀드린 것과 같이 Build Phases 단계에서 파일을 새로 만들 예정이니 꺼주도록 합시다.

 

2. Build Phases 추가하기

 

이제 복사를 하기 위해서 위 사진과 같이 새로운 빌드 스크립트를 추가시켜 줍니다.

이름은 Set Up Firebase 라고 설정을 하고

위치는 Copy Bundle Resources전에 복사가 되게 추가 시켜 줍니다.

# Type a script or drag a script file from your workspace to insert its path.
# Name of the resource we're selectively copying
GOOGLESERVICE_INFO_PLIST=GoogleService-Info.plist

# Get references to dev and prod versions of the GoogleService-Info.plist
# NOTE: These should only live on the file system and should NOT be part of the target (since we'll be adding them to the target manually)
GOOGLESERVICE_INFO_DEV=${PROJECT_DIR}/${TARGET_NAME}/Firebase/Dev/${GOOGLESERVICE_INFO_PLIST}
GOOGLESERVICE_INFO_PROD=${PROJECT_DIR}/${TARGET_NAME}/Firebase/Prod/${GOOGLESERVICE_INFO_PLIST}

# Make sure the dev version of GoogleService-Info.plist exists
echo "Looking for ${GOOGLESERVICE_INFO_PLIST} in ${GOOGLESERVICE_INFO_DEV}"
if [ ! -f $GOOGLESERVICE_INFO_DEV ]
then
    echo "No Development GoogleService-Info.plist found. Please ensure it's in the proper directory."
    exit 1
fi

# Make sure the prod version of GoogleService-Info.plist exists
echo "Looking for ${GOOGLESERVICE_INFO_PLIST} in ${GOOGLESERVICE_INFO_PROD}"
if [ ! -f $GOOGLESERVICE_INFO_PROD ]
then
    echo "No Production GoogleService-Info.plist found. Please ensure it's in the proper directory."
    exit 1
fi

# Get a reference to the destination location for the GoogleService-Info.plist
PLIST_DESTINATION=${BUILT_PRODUCTS_DIR}/${PRODUCT_NAME}.app
echo "Will copy ${GOOGLESERVICE_INFO_PLIST} to final destination: ${PLIST_DESTINATION}"

# Copy over the prod GoogleService-Info.plist for Release builds
if [ "${CONFIGURATION}" == "Release" ]
then
    echo "Using ${GOOGLESERVICE_INFO_PROD}"
    cp "${GOOGLESERVICE_INFO_PROD}" "${PLIST_DESTINATION}"
else
    echo "Using ${GOOGLESERVICE_INFO_DEV}"
    cp "${GOOGLESERVICE_INFO_DEV}" "${PLIST_DESTINATION}"
fi

3. 프로젝트 이름 변경하기

추후 휴대폰에 직접 설치 했을 때 이름을 구분하기 위해서

Build Settings 부분에서 APP_DISPLAY_NAME을 설정하고 원하는 이름으로 설정해 줍니다.

 

 

또한 Info 부분의 Bundle display name 또한 $(APP_DISPLAY_NAME)으로 설정해 줍니다.

 

4. eas.json 수정(expo 사용)

expo를 사용하고 있다면 eas.json의 설정을 통해 각각의 빌드 setting의 세분화가 가능합니다.

만약 eas-update를 통한 code-push 기능을 사용하고 있다면 channel과 buildConfiguration의 조합으로

다양한 환경의 테스트가 가능합니다.

{
  "cli": {
    "version": ">= 5.2.0"
  },
  "build": {
    "development": {
      "channel": "dev",
      "distribution": "internal",
      "android": {
        "gradleCommand": ":app:assembleDebug"
      },
      "ios": {
        "buildConfiguration": "Debug"
      },
      "env": {

      }
    },
    "preview": {
      "channel": "dev",
      "distribution": "internal",
      "developmentClient": true,
      "ios": {
        "buildConfiguration": "Debug"
      },
      "env": {

      }
    },
    "production": {
      "channel": "production",
      "autoIncrement": true,
      "env": {

      },
      "ios": {
        "buildConfiguration": "Release"
      }
    }
  },
  "submit": {
    "production": {}
  }
}

5. 빌드 후 배포

그럼 만든 파일을 어떻게 배포해야 좋을까요?

Firebase를 사용 한다면 App Distribution 기능을 이용해 Dev 환경의 빌드 배포가 가능 합니다.

 

 

다만 ios의 경우 테스트 기기에 대한 Apple UDID 추가가 필요하니 이 부분은 Apple 개발자 페이지에서

따로 추가를 해주도록 합니다.

---

Android Dev 환경 분리하기

Google 서비스 Gradle 플러그인 | Google Play services | Google for Developers

Google 서비스 Gradle 플러그인  |  Google Play services  |  Google for Developers

 

Android의 경우에는 공식문서 자체에서도 다수의 개발 환경에서 개발을 하는 방법에 대해서 나와있습니다.

iOS와는 다르게 매우 간단 합니다. 

1. 파일 추가하기

각각의 google-services.json 파일을 다음과 같은 경로에 추가 시켜주면 끝 입니다.

 

(project root)/app/src/debug/google-services.json

(project root)/app/src/release/google-services.json

2. eas.json 수정(expo 사용)

앞서 iOS 설정에서 eas.json을 수정함을 가정하여 이 부분은 건너뛰도록 하겠습니다.

만약 필요하다면 iOS 쪽의 설정의 봐주세요!

3. 빌드 후 배포

iOS와 동일하게 App Distribution을 통해 배포를 진행 하면 됩니다.

그 외

만약 Github Action이나 젠킨스를 이용하여 CI, CD를 사용하고 있다면

Firebase CLI를 통한 App Distribution의 자동 배포 또한 가능 합니다.

이 부분에 대해서는 공식문서의 링크를 남겨 두도록 하겠습니다.

 

Firebase CLI를 사용하여 테스터에 Android 앱 배포 | Firebase App Distribution

Firebase CLI를 사용하여 테스터에 Android 앱 배포  |  Firebase App Distribution

---

마치면서

이렇게 React Native 환경에서 iOS, Android 환경에서 Dev 환경을 분리하는 방법에 대해 알아보았습니다.

Native의 빌드 프로세스에 대해서는 아직 좀 생소한 부분이 있어서 조금 헤멘거 같네요

다만 사용자에게 전달될 앱을 좀 더 안전하게 테스트 하기 위해서는 이러한 노력이 아깝지 않지 않을까? 라고 생각합니다 😃