[React Native] React Native 환경 변수 설정 하기.

안녕하세요.

오늘은 React Native 환경 변수 설정하는 방법에 대해 적어볼까 합니다.

문서가 관리되지 않아 가독성도 나쁘고, TroubleShooting도 잘 적혀 있지 않아 직.접 찾아서 작성합니다.

---

설치

먼저 React Native Config 라이브러리를 설치합니다.

아래와 같이 터미널에 입력해주세요.

yarn add react-native-config

 

저는 Development(개발), Production(운영) 두 가지 환경으로 나누어 설정하려고합니다.

따라서 프로젝트 root 내에 env 라는 폴더를 생성하고, 그 안에 .env , .env,production 을 생성합니다.

 

iOS

먼저 iOS 부터 설정해보겠습니다.

 

1. Xcode를 실행한 후에 프로젝트 파일 오른쪽 클릭하여 Newfile → Configuration Settings File을 추가해줍니다. 이름은 "Config.xcconfig"로 저장합니다. 이름은 편하게 작성하셔도 상관 없습니다.

 

2. 이후 생성된 Config 파일 맨 아래에 아래와 같이 입력해줍니다.

#include? "tmp.xcconfig"

 

3. 프로젝트 Info에 아래 사진과 같이 Config 파일을 설정해줍니다.

 

4. Xcode 맨 상단에 Scheme(앱 이름)을 선택하여 Edit scheme... -> Build -> Pre-actions 내 +를 클릭하여 select New Run Script Action 선택하고 아래와 같이 입력합니다.

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

설정 후엔 info.plist에서도 Config 값을 사용할 수 있습니다. 예) $(ENV)

 

React Native Config는 일반적으로 .env 파일을 읽습니다.

하지만 React Native Config를 사용하는 것은 다양한 환경을 설정하기 위함임으로 아래와 같이 환경을 설정 할 수 있습니다.

 

1. Xcode 맨 상단에 Scheme(앱 이름)을 선택하여 Edit scheme를 선택합니다.
2. 하단에 있는 Duplicate Scheme를 선택하고, 이름을 작성합니다. 예) AppName-dev
3. 또 하단에 있는 "Shared" 가 체크되어 있는지 확인하여 스키마가 버전 관리 시스템에 추가되도록 합니다.
4. 이어 좌측 "Build" 메뉴를 펼처서 "Pre-actions"를 선택합니다.
5. 하단에 "+"를 선택 후 "New Run Script Action"를 선택합니다.
6. 아래와 같이 입력합니다.

cp "${PROJECT_DIR}/../env/.env" "${PROJECT_DIR}/../.env"  # replace .env for your file

이는 ./env 폴더에 있는 env파일을 복사하는 명령어입니다. 해당 라이브러리는 ios에서 root위치의 env를 읽어 환경변수 값으로 사용할 수 있게 해줍니다. 따라서 환경에 따라 해당 스크립트를 잘 설정해야합니다. 만약 production이라면 아래와 같이 변경할 수 있습니다.

cp "${PROJECT_DIR}/../env/.env.production" "${PROJECT_DIR}/../.env"  # replace .env for your file

⚠️ 주의사항
1. 해당 Script가 앞서 작성한 스크립트보다 순서가 먼저 와야 합니다.
2. "Pre-actions" 스크립트에 "Provide build settings from" 이 올바르게 설정 되어 있는지 확인하세요. 3. Scheme 마다 script가 올바른 env파일을 바라보고 있는지 확인이 필요합니다.

 

Android

안드로이드 같은 경우 안드로이 내부 환경 설정을 알아두시면 좋습니다.

일단 buildType과 환경을 분리하여 생각 해야하는데 buildType은 debug, release와 같은 일반적으로 빌드하는 방식을 말하며, 환경은 Develop, Production 같이 환경에 따른 변수를 나눠둔 것을 말합니다.

 

우선 android/app/build.gradle 파일을 열어 아래와 같이 입력합니다.

// android/app/build.gradle
apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"

// 여기서부터 작성하시면 됩니다.
project.ext.envConfigFiles = [
    developmentdebug: "env/.env",
    developmentrelease: "env/.env",
    productiondebug: "env/.env.production",
    productionrelease: "env/.env.production",
]

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

...

빌드와 환경을 연결하는 Map을 정의한 것으로, 소문자로 된 build cases를 사용합니다.

소문자를 사용하는 것 외에도 buildFlavor.startsWith로 매칭이 이루어집니다. 따라서 case 작성시 유의하세요.

 

buildType이 debug와 release로 정의 되어 있죠? debug 일때 어떻게 빌드 될 건지 설정할 수 있습니다.

bundle 또는 apk를 추출할 때 영향을 받습니다. signing 설정도 이곳에서 할 수 있습니다.

// android/app/build.gradle

...
android { 
  ...
  buildTypes {
    debug {
      ...
    }
    release {
      ...
    }
  }
}

 

buildTypes 아래 이어서 아래와 같이 입력합니다.

// android/app/build.gradle

...
android { 
  ...
  buildTypes {
    ...
  }
// 여기서 부터 입력
 flavorDimensions += "env"
    productFlavors {
        development {
            dimension "env"
            applicationIdSuffix ".dev"
            versionNameSuffix "-dev"
        }
        production {
            dimension "env"
        }
    }
}

flavor는 buildType과 함께 다양한 제품 다양한 버전을 만들기 위해 설정에 맛(조미료)를 뿌리는 것이다라고 할 수 있겠습니다.

 

flavor에 간략하게 설명하자면,

flavorDimensions "env" 은 차원이라고 부르는데 그룹핑한다고 생각하면 좋을거 같습니다. 

•  dimension은 소속차원을 표시합니다.
•  applicationIdSuffix는 applicationId에 .dev를 붙여줍니다. com.myapp.dev
•  versionNameSuffix는 version에 -dev를 붙여 줍니다.  예  1.1.0-dev

자세한 설정은 아래 문서를 참조하세요.

빌드 변형 구성  |  Android Studio  |  Android Developers

⚠️ 주의사항
만약 applicationIdSuffix 또는 applicationId  같은 속성을 사용한다면, AndroidManifest.xml에 표시된 패키지명(<manifest package="...">)과 다른 이름으로 설정이 되기 때문에 아래와 같이 설정을 해주셔야합니다.

// android/app/build.gradle

defaultConfig {
    ...
    resValue "string", "build_config_package", "패키지명"
}

 

이대로 설정하고 나면, 안드로이드 스튜디오에서는 빌드가 안되는 문제가 발생합니다.

missing .env  라는 경고가 발생하는데, 기본적으로 root 내 .env를 참조하는 문제로 발생합니다.

우리가 상단에 설정한 project.ext.envConfigFiles 위에 아래와 같이 추가합니다.

// android/app/build.gradle

...

project.ext.defaultEnvFile = "env/.env" // 기본적으로 해당경로의 env를 참조합니다.

 project.ext.envConfigFiles = [...]

 

번외. 

"앱 이름을 환경에 따라 변경하고 싶어요." 하는 분이 계시겠죠?

먼저 env 파일 내에 APP_NAME이라는 변수로 앱 이름을 작성했다면, AndroidManifest.xml 파일을 열어주세요.

// android/app/src/main/AndroidManifest.xml

// 기존
...
  android:label="@string/app_name"
...

// 수정
...
  android:label="@string/APP_NAME"
...

AndroidManifest.xml 내 android:label 을 변경해줍니다. 이후 clean build 하고, 실행하면 앱 이름이 환경에 따라 변경됩니다.

 

기타 발생하는 문제는 아래 문서를 참조해주세요.

GitHub - lugg/react-native-config: Bring some 12 factor love to your mobile apps!

 

 

package.json 설정하기

편안한 실행 환경을 구성합니다.

  "scripts": {
	"ios:dev": "react-native run-ios --scheme AppName --simulator 'iPhone 15 Pro'",
	"ios:pro": "react-native run-ios --scheme AppName-Dev --simulator 'iPhone 15 Pro'",
	"android:dev": "react-native run-android --mode=developmentdebug --appIdSuffix=dev",
	"android:pro": "react-native run-android --mode=productionrelease",
}

ios 스크립트 내 --scheme는 설정한 대로 수정하여 작성해주세요.

android:dev 에 --appIdSuffix는 위 안드로이드 주의사항과 관련되어 있습니다. 만약 기입하지 않으면 아래와 같은 에러를 접할 수 있습니다.

Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.appname/.MainActivity }
Error type 3
Error: Activity class {com.appname/com.appname.MainActivity} does not exist.

 

---

설정은 여기까지입니다. 수고하셨습니다.

만약 잘 되지 않는다면 댓글로 남겨주세요! 감사합니다.