React Native
Expo - 환경변수 사용
크런키스틱
2023. 4. 14. 14:07
728x90
expo에서 환경변수를 사용하는 방법은 간단하다.
기본으로 제공하는 기능을 설치해서 사용하면 된다.
1. 설치
npx expo install expo-constants
2. 환경변수 파일 생성
프로젝트 root 위치에 environment.ts 파일을 생성한다.
import Constants from "expo-constants";
const ENV: any = {
dev: {
apiUrl: "https://~",
},
staging: {
apiUrl: "https://~",
},
prod: {
apiUrl: "https://~",
},
};
const getEnvVars = (env = Constants?.manifest?.releaseChannel) => {
if (__DEV__) {
return ENV.dev;
} else if (env === "staging") {
return ENV.staging;
} else if (env === "prod") {
return ENV.prod;
} else {
return ENV.prod;
}
};
export default getEnvVars;
위와 같이 세가지 경우를 나누는데 이는 추후 어플을 빌드할 때 release channel을 의미한다.
- dev : 개발모드
- staging : 실제 운영 환경과 동일한 환경, 운영 이전에 기능 이외의 부분(성능, 보안 등)을 테스트하기 위한 환경
- production : 실제 배포
__DEV__는 개발 모드일 때 무조건 true 값인 변수로, 그 외는 release channel에 맞게 조건을 주면 된다.
본인의 경우, 어플을 빌드할 때, 해당 release channel을 맞추지 않는 실수를 했다. 이로 인해, 빌드는 성공했지만 막상 어플을 실행해보면 splash 화면만 보여지고 바로 종료되는 버그를 마주쳐 고생을 했었다. 이를 해결하기 위해서는 추후에 설명할 eas build 파일에서 release channel을 맞춰주거나, 혹은 env의 값이 무조건 있게끔 return 해주면 된다.
3. 사용
설정한 환경 변수는 사용하고자 하는 파일 상단에 import해서 사용하면 된다.
import getEnvVars from '../environment';
const { apiUrl } = getEnvVars();
기본적인 expo 환경 구성은 여기까지이고, 다음 포스트부터 navigation을 시작으로 어플 기능 구현에 대해 알아본다.
728x90