위코드를 수료하고 모비두(sauce live)에서 인턴으로 개발을 시작하고 있었다.
개발이 어느정도 진행이 되고, 백엔드 개발자가 말하기를 개발 실행 환경마다 다른 api를 호출해야한다. 라고..
개발 실행 환경은 개발 단계가 있을거고 test(qa) 단계, product(사용, 실제 서비스) 단계가 있을것이다.
환경 변수를 설정하는 이유는 위에 있지만 각 단계마다 다른 환경을 실행하기 위함이다.
백엔드 개발자의 요청과 왜 사용해야되는지에 대한 이해과 납득을 하고 환경 변수 설정을 하기위해 구글링을 했다.
설정하는 방법이 여러 가지 있었지만, package.json 파일에서 script에서 실행 명령어들을 정의 해놓는데,
여기서 dev, test, product별 실행 명령어를 정의하고 환경 변수를 정의했다.
"start:dev": "REACT_APP_CONFIG=dev"
"start:test": "REACT_APP_CONFIG=test"
"start:prod": "REACT_APP_CONFIG=prod"
그리고 env-config라는 파일을 만들어 그 파일에서 api, url들을 분기 처리 해놓고, export 해주었다.
const dev = {
dot: 'https://dev.yangseongho.co.kr',
}
const test = {
dot: 'https://test.yangseongho.co.kr',
}
const product = {
dot: 'https://www.yangseongho.co.kr'
}
const envVariable = process.env.REACT_APP_CONFIG;
const envConfig: any =
(envVariable && envVariable === "prod" && prod) ||
(envVariable && envVariable === "dev" && dev) ||
(envVariable && envVariable === "test" && test);
export default {
...envConfig
};
process.env.REACTAPPCONFIG 가 환경 변수이고, 변수에 담아 환경 변수가 현재 실행 환경가 일치하면
현재 실행 환경에 맞는 환경을 실행한다.
위와 같은 방식이다. 정답은 없을거고 내가 한 방법이 무조건 좋은것도 아닐 것이다.