빌드 환경별 환경변수 설정 (react-native-config)

🛠️ 빌드 환경 구분

일반적인 개발환경과 빌드타입 구분은 다음과 같다.

개발환경

• dev (개발)
• stage (QA)
• prod (운영)

빌드모드

• debug (디버깅용)
• release (배포용)

빌드환경은 개발환경과 빌드모드를 결합한 각 환경으로 구분된다. 위와 같은 구분이라면 총 6가지 빌드 환경이 가능.

devDebug : dev (개발) + debug 모드
stageDebug : stage (QA) + debug 모드
prodDebug : prod (운영) + debug 모드
devRelease : dev (개발) + release 모드
stageRelease : stage (QA) + release 모드
prodRelease : prod (운영) + release 모드

🚀 React Native Config 설치

npm install react-native-config
cd ios && pod install # iOS 추가 설정

📁 환경별 .env 파일 생성

• 최상위에 개발 환경별로 .env 파일 생성 (.env.development, .env.staging, .env.production)

🤖 Android 설정

1. android/app/build.gradle 수정

apply plugin: "com.android.application"

// 각 빌드 환경에서 사용할 env 파일 정의
project.ext.envConfigFiles = [
    devDebug: ".env.development",
    stageRelease: ".env.staging",
    prodRelease: ".env.production",
    anothercustombuild: ".env",
]

// dotenv.gradle을 적용하여 위 env 파일 설정을 처리
apply from: project(':react-native-config').projectDir.getPath() + '/dotenv.gradle'

android {
    ...
     defaultConfig {
     	...
        // 환경 변수를 BuildConfig에 포함
        resValue 'string', "build_config_package", "com.poin.app" 
    flavorDimensions "version"
    productFlavors {
        develop {
        }
        stage {
        }
        product {
        }
    }
}

💡 apply from: project(':react-native-config').projectDir.getPath() + '/dotenv.gradle'가 각 env 파일 정의 후에 적용되어야 하므로 project.ext.envConfigFiles = ... 뒤에 위치해야 한다..!

💡 resValue로 여러 설정을 할 경우 각 설정을 분리해서 호출해야 한다. 한 번에 하나의 key-value 쌍 하나만 설정 가능 (타입, 키, 값 3개의 인자만 받음)

ex)

defaultConfig {
		...
    	resValue 'string', "CODE_PUSH_APK_BUILD_TIME", String.format("\"%d\"", System.currentTimeMillis())
        resValue 'string', "build_config_package", "com.poin.app" 

2. settings.gradle 수정

• react-native-config 모듈 안드로이드 프로젝트에 추가

include ':react-native-config'
project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')

✨ iOS 설정

1. Configuration Settings File 생성

2. 생성한 Config 파일에 아래 소스 추가

#include? "tmp.xcconfig"

3. Configuration Setting 파일 설정

• info > Configurations에서 Debug/Release 모드에 각각 Configuration Setting 파일 적용 (Config 선택)

4. 개발 환경별 Scheme 설정

1) dev, stage, prod 각 scheme 생성

2) 각 scheme의run script 설정

• Product > Scheme > Edit Scheme > Build > Pre-actions > New Run Script Action > 아래 소스 추가

 cp "${PROJECT_DIR}/../.env.development" "${PROJECT_DIR}/../.env"
echo ".env.development" > /tmp/envfile

"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"