리액트 - .env 환경 변수 파일 관리하기

리액트 전체 링크

 

참고

- RESTful API로 파일 읽기

 

리액트를 개발할 때, 특정 정보는 github에 업로드 해서는 안되는 경우가 있다.

(RESTful API를 위해 발급 받은 token 등)

 

아래의 token을 React에서 사용하다가 github에 업로드하면 보안에 좋지 않다.

const token = "gh....................2mW61k"

 

 

.env 파일로 환경 변수를 관리하면 위의 상황을 해결할 수 있다.

그러나, github에 업로드만 되지 않을 뿐, 배포를 하게 될 경우는 토큰이 노출된다.

따라서 실제 환경에서는 서버를 이용해 토큰을 얻어야 한다.

---

.env 파일 생성

 

먼저 React App의 루트에 .env 파일을 생성한다.

 

그리고 commit / push가 되지 않도록 .gitignore에 .env를 추가한다.

---

환경 변수 만들기

 

.env에 환경 변수를 만들어보자.

 

이때 변수 이름은 REACT_APP_ 으로 시작해야 리액트가 알 수 있다.

그리고 문자열을 할당할 때 쓰는 ' 나 " 를 사용하지 않으며, 변수 끝에 세미 콜론 ; 도 추가하지 않는다.

 

예를 들면, RESTful API를 사용하기 위해 발급 받은 토큰을 아래와 같이 만들 수 있다.

 

.env의 값은 변경하더라도 즉시 적용되지 않는다. 반드시 빌드를 해야 한다.

$ npm run build

 

빌드가 완료되었다면 리액트 코드 어디에서든 아래와 같이 환경 변수를 불러올 수 있다.

const token = process.env.REACT_APP_MY_TOKEN;