React Native: iOS Info.plist에 .env 환경변수 사용하기 # xcode # Info.plist # $(변수)

React Native 프로젝트에 상단에서 이용중인 .env파일의 변수를 iOS 앱 빌드시 이용하고자 한다.

 

react-native-config 설치

npm install react-native-config
# or
yarn add react-native-config

 

 

pod 설치

cd ios && pod install

 

 

Xcode에 빌드시 실행될 script를 작성하자

아래와 같이 프로젝트를 선택 -> Build Phases -> Run Script에 script를 삽입한다.

 

Script 내용

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

. "${SRCROOT}/tmp.xcconfig"

PLIST="${SRCROOT}/${INFOPLIST_FILE}"

/usr/libexec/PlistBuddy -c "Clear dict" "$PLIST"

printenv | while IFS='=' read -r key value
do
  if [ -n "$key" ]; then
    val=$(printenv "$key" | sed 's/\$()\//\//g')
    /usr/libexec/PlistBuddy -c "Add :$key string $val" "$PLIST" 2>/dev/null || \
    /usr/libexec/PlistBuddy -c "Set :$key $val" "$PLIST"
  fi
done

 

 

* 위 설정을 해준후 app을 실행하면 ios/tmp.xcconfig가 추가가 되는데, 여기서 끝나는게 아니라 생성된 tmp.xcconfig 파일에서 변수값을 불러서 Info.plist 등에서 $(변수) 와 같은 방식으로 사용하려면 tmp.xcconfig를 설정에서 추가해줘야 한다. (일종의 namespace에서 인식이 되도록 추가)

  XCode의 버전마다 조금씩 GUI가 다른데, 내가 사용하는 버전에서는

왼쪽 툴바창 프로젝트 우클릭 > New File from Template > Configuration Settings File 을 선택하여 설정파일을 만든다.

 

파일명은 Default로 Config가 써져있는데 다른거를 건들지 않고 그대로 생성했다.

그러면 ios/Config.xcconfig가 주석처리된 글만 적힌채로 생성 되는데, 아래의 설정을 추가한다.

#include? "tmp.xcconfig"

 

그리고 Debug와 Release일 때 모두 Config.xcconfig의 설정을 따를수 있도록 XCode에서 설정을 추가해준다.

Debug > 프로젝트명 옆의 Based on Configuration File 탭의 각 항목을 누르면 여러 설정파일이 나오는데 방금 수정해준 Config.xcconfig를 선택해준다.

Release 역시 마찬가지로 똑같이 한다.

 

* .gitignore에 .env의 변수값을 담을 tmp.xcconfig 추가하기

 

위와 같이 설정을 하면 Info.plist 등에서 $(변수) 의 방식으로 .env의 환경변수를 읽을 수 있다.

 

참조 블로그:

https://velog.io/@ddowoo/react-native-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-.env-react-native-config

https://k-taeyang.tistory.com/92