React 실무 개발 환경/배포 환경 설정 (.env)

 

[react] 실무 개발 환경/배포 환경 설정(.env)

이분의 글을 읽고 할수있었다.

 

env를 쓰는이유는 개발환경과 배포환경을 가져가는 이점도 크지만 가장 큰이유는 유저들한테 보여지면 안되는 정보를

환경변수로 선언해서 쓰기 위함이라 생각한다.

예를 들면 DB의 접속 정보라던지 API의 URL이라던지 유저에게 노출시키지 말아야 할 부분은 생각보다 많다.

 

env의 여러가지 종류가 있지만 간단하게 env만 만들어서 사용하겠다.

package.json파일과 같은경로에 파일을 만들어준다.

REACT_APP_API_URL_TODOS = 내용
REACT_APP_API_URL_COMMENTS = 내용
REACT_APP_MOD = "production"

REACT_APP_ 까지는 지켜줘야 하는 규칙이고 뒤 부터 변수명을 정한다고 보면 된다.

 

 

 

{process.env.REACT_APP_API_URL_TODOS}

npm start같이 서버를 돌렸을때 리액트가 env파일 찾아 읽기 때문에 process.env에 담겨있다.

따로 import할 필요없이 바로 사용 가능하다.

 

 

만약 undefined가 뜬다면 package.json에서 설정을 해줘야한다.

 

env-cmd

env-cmd 라이브러리를 설치하고

 

 

package.json

{
  "scripts": {
    "test": "env-cmd -f .env"
  }
}

package.json에서 이런식 으로 설정해주면 된다.

 

 

 

const store = configureStore({
    reducer: {
        members,
        contents,
    },
    //배포 모드일때 리덕스 데브툴 사용 안함
    devTools: process.env.REACT_APP_MOD !== 'production'
});

configureStore로 store생성할때 devTools 사용여부를 설정 할수 있다.