React 환경변수 개발/배포 env파일 분리 (+typescript)

환경변수를 .env.development / .env.production 으로 나누면 React는 CRA 명령어에 따라 적용되는 .env파일이 달라진다

(적용되는 파일의 우선순위가 달라지는 것)

 

npm run start => .env.development 적용

npm run build => .env.production 적용

npm run test => .env.test 적용

cross-env 모듈 설치

$ npm i cross-env

환경변수 적용 전에는 하드코딩된 코드를 사용해서 

로컬에서 실행하거나 빌드를 할 때는 매번 바꿔줘야 했다

const instance = axios.create({
    // URL: "http://127.0.0.1:8000/api/v1/",  // 개발환경
    URL: "https://myproject.com/api/v1/",	  // 배포환경
    withCredentials: true,
})

.env.development 파일과 .env.production 파일을 생성한 뒤 환경 변수를 각각 적용해주면

npm run start 시에는 http://127.0.0.1:8000/api/v1/ 가

npm run build 시에는 http://myproject.com/api/v1/ 이 들어가게 된다

const instance = axios.create({
    URL: process.env.REACT_APP_HOST,
    withCredentials: true, //세션id 
})


# .env.development
REACT_APP_HOST=http://127.0.0.1:8000/api/v1/

# .env.production
REACT_APP_HOST=https://myproject.com/api/v1/

'REACT_APP_변수이름' 과 같이 REACT_APP_을 꼭 붙여주어야 하고

코드 안에서 사용할 때는 process.env.REACT_APP_변수이름 형식으로 쓰면된다

 

 

 

+) TypeScript Error가 발생하는 경우

REACT_APP_ENV 가 undefined 라는 내용의 에러...

변수 타입을 몰라서 typescript가 뭐라 한다면 

react-app-env.d.ts 파일에 해당 변수의 타입을 선언해 주면 된다.

 

# react-app-env.d.ts

/// <reference types="react-scripts" />


declare namespace NodeJS {
    interface ProcessEnv {
        REACT_APP_HOST: string;
    }
}

이러면 에러도 사라지고 자동완성도 쓸 수 있다.

 

---

 

.env파일 추가하고 설정 다 해줬으면 ⭐서버 재시작⭐