react-native-config

• 공식 깃헙 : https://github.com/luggit/react-native-config#extra-step-for-android

• 참고링크:
• https://velog.io/@reveloper-1311/DB-Node.js에서-환경변수-사용하기dotenv
• https://velog.io/@ricale/React-Native-빌드-환경-분리

사용목적

• 깃헙에 공개적으로 표시되면 안되는 내용들을 별도로 관리하기 위함.

• dotenv로 작성된 .env 파일을 다루기 위함.

• .env.dev, .env.stg, .env.prd 등 여러가지 환경별로 달라져야하는 env 상황을 고려할 수 있도록 되어있어서 react-native-dotenv보다 선호함.

멀티 env 환경 관련 소스코드 : https://github.com/luggit/react-native-config/blob/master/android/dotenv.gradle

기본 사용법

.env 파일 생성

# env 파일을 생성한다.
# 파일명 예시 : .env,  .env.dev, .env.stg, .env.prd

# 변수명 = 값(string only) 형식으로 값을 채운다.

CURRENT_SERVER = 서버종류
GRAPHQL_API_URL =  링크주소
ALGORITHM_GRAPHQL_API_URL = 링크주소
AMPLITUDE_API_KEY = 키값

코드 사용 (RN)

import Config from "react-native-config";

Config.CURRENT_SERVER; // 서버종류
Config.GRAPHQL_API_URL; // 링크주소

설치

• RN 0.60 이후로는 autolinking 가능해서 매뉴얼 링킹은 생략함.

$ yarn add react-native-config

안드로이드 추가 설정

multi env 파일 지원 설정

• ENVFILE 값에 따라 env 파일을 참조할 수 있게 하려는 설정임.
• 예시) ENVFILE=.env.dev npx react-native run-android

• 나는 이거 때문에 react-native-dotenv 쓰다가 라이브러리 갈아탔음

파일경로 : android/app/build.gradle

// 두번째 줄에 apply 구문을 추가한다.
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

추가 suffix 설정 (옵셔널)

파일경로 : android/app/build.gradle

defaultConfig {
    ...
    resValue "string", "build_config_package", "YOUR_PACKAGE_NAME_IN_ANDROIDMANIFEST_XML"
}

네이티브에서의 사용법

안드로이드

안드로이드 네이티브 코드에서 .env 참조하기

public HttpURLConnection getApiClient() {
    URL url = new URL(BuildConfig.API_URL);
    // ...
}

안드로이드 gradle 파일에서 .env 참조하기

근데 .env에 있는 모든 값은 string 이므로, 필요에 따라 타입 캐스팅 해서 써야함.

defaultConfig {
    applicationId project.env.get("APP_ID")
}

iOS

// import header
#import "ReactNativeConfig.h"

// then read individual keys like:
NSString *apiUrl = [ReactNativeConfig envFor:@"API_URL"];

// or just fetch the whole config
NSDictionary *config = [ReactNativeConfig env];

.env 파일 선택해서 실행하기

• react-native-config의 장점!

• .env.dev, .env.stg, .env.prd 등등 원하는 .env 선택해서 시작하는 방법!

디버그앱 실행

$ ENVFILE=.env.dev npx react-native run-ios           # bash, zsh
$ ENVFILE=.env.stg npx react-native run-android
$ ENVFILE=.env.prd npx react-native run-android
$ ENVFILE=.env.whatever npx react-native run-ios

안드로이드 배포용 앱 빌드 커맨드 예시

$ cd android && ENVFILE=.env.staging ./gradlew assembleRelease
$ cd android && ENVFILE=.env.prd ./gradlew bundleRelease

project.ext.envConfigFiles = [
    debug: ".env.development",
    release: ".env.production",
    anothercustombuild: ".env",
]

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

트러블슈팅

ENVFILE을 변경해도 계속 이전 것으로 읽는 경우

node_modules/reat-naitve-config/android/dotenv.gradle

def loadDotEnv(flavor = getCurrentFlavor()) {

	def envFile = project.hasProperty("defaultEnvFile") ? project.defaultEnvFile : ".env"
	println("1 Reading env from: $envFile")
	if (System.env['ENVFILE']) {
	    envFile = System.env['ENVFILE'] // 이게 gradle daemone에서 캐싱되어서 그럼.
	    println("2 Reading env from: $envFile")
	} else if (System.getProperty('ENVFILE')) {
	    envFile = System.getProperty('ENVFILE')
	    println("3 Reading env from: $envFile")
	} else if (project.hasProperty("envConfigFiles")) {
	    // use startsWith because sometimes the task is "generateDebugSources", so we want to match "debug"
	    project.ext.envConfigFiles.any { pair ->
	        if (flavor.startsWith(pair.key.toLowerCase())) {
	            envFile = pair.value
	            println("4 Reading env from: $envFile")
	            return true
	        }
	    }
	}

...

> Configure project :app
1 Reading env from: .env
2 Reading env from: .env.dev
Reading env from: .env.dev

해결방법

• 참고 :
  Environment Variables keeps reading from .env

  Github

  Environment Variables keeps reading from .env

  Updated

  Mar 27, 2023

  

$ cd android && ./gradlew --stop

이후 다시 명령어 실행해보자!