My Boundary As Much As I Experienced

react-native-config를 환경 별로 설정해보자 본문

FrontEnd/React Native

react-native-config를 환경 별로 설정해보자

Bumang 2024. 11. 1. 15:50

react-native-config 설정을 하게 된 배경

조금 충격적인 이야기겠지만 내가 입사할 당시 앤트타임은 환경 변수 없이

API주소며 여러 인증서 값들이 하드코딩되어 있었다...

 

난 이걸 react-native-config를 이용해서 마스킹하였고,

또한 debug/release 빌드 시 각기 환경에 맞는 api-key로 들어가게 하였다.

 

 

 

1. .env파일 생성하기

.env

루트단에 .env파일을 생성하였다. 그러나 이 env파일은 iOS빌드 시 마다 값이 바뀐다.

테스트로 빌드하면 테스트 값으로, 상용으로 빌드하면 상용 값으로 계속 스위칭 된다.

BASE_URL=https://...
TOPIC_ALL_USERS=...
GOOGLE_KEY=...

 

그리고 env폴더를 만들어서 테스트/상용 서버에 각기 넣어줄 환경변수를 작성했는데,

이곳이 gradle빌드할 때 혹은 XCode 빌드할 때 참조하는 실제 파일들이다.

 

env/.env.production

BASE_URL=... // 상용 BASE URL
TOPIC_ALL_USERS=...// 상용 토픽
GOOGLE_KEY=... // 상용 web client id

 

env/.env.development

BASE_URL=... // 테스트 BASE URL
TOPIC_ALL_USERS=... // 테스트용 FCM 토픽
GOOGLE_KEY=... // 테스트용 web client id

 

 

iOS 설정

1. 새 config 파일 생성

iOS설정 방법을 알아보겠디. XCode에서 새 config파일을 생성한다.

파일 유형들이 되게 많아서 우측 상단 검색창에 Config라고 검색하는 것이 좋다.

 

Config 파일 생성 후 - 클릭 - 내용에 아래 코드를 추가한다.

#include? "tmp.xcconfig"

 

3. 프로젝트 info - Configuration 수정하기

 

https://velog.io/@chloedev/RN