[React Native] react-native-config로 환경변수(.env) 유동적으로 관리하기!

 

사용자에게 앱을 배포하기 위한 환경으로는 여러 케이스가 있지만,

어떠한 경우든 develop(개발 서버), production(운영 서버) 로 나누어 작업하는게 원칙이다.

 

또한 API URL이나 Key 등 개발자 또는 팀만이 알아야 하는, 오픈소스에 올리면 안되는 정보들을 관리하는 env(환경 변수 파일)는

거의 모든 앱,웹 개발 환경에서 사용되고 있다.

 

그렇다면 prod 서버와 dev 서버 등 여러 환경을 배포할 때 일어날 수 있는 수많은 휴먼 리스크를 방지하고

근본적으로 서버 환경을 변경할 때마다 env파일을 일일이 수정하는 번거로움을 최소화하려면,

각 서버 환경에 사용되는 env파일을 각각 작성해두고 개발자가 "개발 서버를 보고싶어!" 또는 "운영 서버를 보고싶어!" 할 때

자동적으로 해당 env 스크립트를 바라보게 하면 된다.

 

이를 해결하기 위해서는 react-native-dotenv 혹은 react-native-config 라이브러리가 존재하는데,

dotenv 라이브러리같은 경우에 다중 환경 빌드 지원에 이슈가 있다고 하여 react-native-config를 선택하여 진행해보자.

 

https://github.com/lugg/react-native-config

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

---

📚 Installation

npm i react-native-config
cd ios && pod install

---

 

⚒️ Setting

 

💪 env 파일 생성하기

(project root)/.env

(project root)/env/.env.development (개발환경)

(project root)/env/.env.production (운영환경)

 

env 파일명은 알아보기 쉽게 지어주면 된다👍

 

🟡 iOS 설정하기

1. Configuration Settings 파일 생성

XCode > Project명 우클릭 > New file... 클릭 > Configuration Settings FIle 선택 후 Next

파일 되게 많으니까 config로 검색해서 찾으세요!

 

 

이후 생성된 파일에 위 이미지대로 코드 한줄을 추가해준다.

#include? "tmp.xcconfig"

 

2. 생성된 Config 파일 설정

PROJECT > Info > Configurations에 Debug, Release 부분에 Config 적용

 

3. Scheme 생성

XCode > Product > New Scheme...

name은 자유롭게~

 

Development와 Production 두개 다 생성해주어야 한다.

 

4. Xcode > Product > Scheme > Edit Scheme

3 에서 생성한 스키마에 RunScript를 작성해주자.

Build > Pre-actions에 + 버튼을 클릭하여 아래 스크립트를 작성해주면 된다.

 

 

Run Script 파일

# Type a script or drag a script file from your workspace to insert its path.
cp "${PROJECT_DIR}/../env/.env.development" "${PROJECT_DIR}/../.env"

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

 

 

Production의 경우에도 똑같이 추가해주고 development 부분만 production으로 바꾸어 작성해주면 된다.

 

5. package.json 수정

 

npm run ios 명령어를 통해 빌드한다면 현재 디렉토리에 있는 .env 파일을 읽어오게 되는데

package.json 에 아래 빌드 명령어를 추가하여 빌드할 때 개발자가 원하는 환경을 자동적으로 가져오게 해주자.

    "ios:dev": "react-native run-ios --scheme Development",
    "ios:prod": "react-native run-ios --scheme Production"

 

XCode > Run 으로 빌드한다면,

헤더에 스키마를 수동으로 바꿔주고 Run 해주면 원하는 환경에 맞게 알아서 .env 파일이 변경된다 👍

 

🟠 Android 설정하기

1. android/app/build.gradle 수정

 

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

+ project.ext.envConfigFiles = [
+     developdebug: "env/.env.development",
+     developrelease: "env/.env.development", 
+     productdebug: "env/.env.production",    
+     productrelease: "env/.env.production",
+     anothercustombuild: ".env",
+ ]
...

android {
        ...
+        flavorDimensions "version"
+        productFlavors {
+            develop {
+            }
+            product {
+            }
+        }
		...
}

 

❗ developdebug, develorelease 처럼 상세하게 적어주지 않으면 앱을 빌드할 때
'Task installDevelopdebug is ambiguous in project ':app'. Candidates ...' 와 같은 에러가 나니 자세히 적어주자!

 

2. package.json 수정

"android:dev": "react-native run-android --variant=develop",
"android:prod": "react-native run-android --variant=product",

 

iOS 설정 > 5. 항목과 동일.

 

설정 끝! 🙆‍♂️