react .env활용하여 API키 등 환경 변수 관리하기, firebase 예제

react. env 활용하여 API 키 등 환경 변수 관리하기

간단해 보이고 내용도 많은 이걸 정리하는 이유는 내가 멍청한 삽질을 했고, 혹여나 누가 보거나 미래의 내가 또 이런 어이없는 실수를 저지르지 않기 위함이다.

.env를 사용하는 이유!

개발을 진행하면서 서버 포트 혹은 firebase API 키 등 다양한 key를 관리하게 될 것이다. 이걸 git에 올린다면 어떤 일이 벌어질 까?

git을 보고 나도 그 API에 요청을 보낼 수 있을 것이다. 필요한 정보가 다 있기 때문에....
특히 firebase는 많이 사용하면 비용이 발생하는데, API 키를 모두 알고 있다면 내가 그 데이터 베이스에 접근하는 건 어렵지 않을 것이다.

나는 물론 이 사실을 알고 있었지만 .env에 사실을 알지 못했고, 처음에는 그 파일만 git에 올리지 않았다. 그러다 병합이나 다른 브런치로 이동하기 위해 어쩔 수 없이 commit을 해야 했고, key를 지우고 올리는 방식을 선택했다. (지금 보면 멍청한 짓)
이 방법이 너무 귀찮아서 결국에는 그냥 git에 올리고 플젝을 마무리한 후 firebase를 지우는 선택을 했다.

이번 프로젝트를 진행하면서 이전 경험이 너무 귀찮고 이번 프로젝트는 길게 open을 할 예정이기 때문에 어떤 방법이 있는지 검색을 했고, .env를 알게 됐다.

사용방법

너무나 간단하다
root 경로 즉, src 내가 아닌 프로젝트 폴더 내 src와 동일한 선상에 .env파일을 만든다.
그리고 필요한 API 키를 작성한다.

REACT_APP_FIREBASE_APIKEY=...
REACT_APP_FIREBASE_AUTH_DOMAIN=..
REACT_APP_FIREBASE_PROJECTID=...
REACT_APP_FIREBASE_STORAGEBUCKET=...
...

작성할 때 react를 사용한다면 앞에는 REACT_APP는 고정이다. 이렇게 작성해야 파일이 읽어 변수를 가져올 수 있다. 또한 띄어쓰기는 사용하지 말고 =다음에 ""문자열 표시는 생략이 가능하다.작성해도 상관없다. 문자열로 작성하고 console.log을 찍어보니 ""가 두 번 찍히더라.... 뭐 js파일이 아니다 보니 문자열, 숫자열 개념이 있는지도 모르겠다.

사용을 할 때에는

export  const  firebaseConfig = {
apiKey:  process.env.REACT_APP_FIREBASE_APIKEY,
authDomain:  process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId:  process.env.REACT_APP_FIREBASE_PROJECTID,
storageBucket:  process.env.REACT_APP_FIREBASE_STORAGEBUCKET,
messagingSenderId:  process.env.REACT_APP_FIREBASE_MESSAGINGSENDERID,
appId:  process.env.REACT_APP_FIREBASE_APPID,
};

process.env. 뒤에 API 키를 작성하여 사용할 수 있다.

또한. gitignore 파일에 .env를 추가해야한다.
.env를 추가하지 않는다면 커밋이 되기 때문에 따로 작성한 의미가 사라진다.....

// 프로젝트 폴더 > .gitignore
.env //.env.local , .env.d.ts 등이 있을 수 있다.

주의사항

1. 우선 CRA(create-react-app)으로 설치한 경우 자동으로 패키지가 설치되어 사용할 수 있고 없다면 dotenv을 설치하자
2. 프로젝트를 종료했다 재 실행해야 적용된다. console.log나 텍스트에 입력을 해보고 사용하면 연결이 잘 됐는지 확인 할 수 있다.

내가 한 삽질

생김새에 이상함을 느끼고 제대로 작성해보지 않음
다른 블로그를 찾았을 때 .env파일을 입력하는 것을 보면 아이콘이 생기거나 이쁘게 작성되는 반면에 나는 그냥 파일 그림이고 메모장에 작성하는 느낌을 받았다.
그래서 나는 이게 동작하지 않는다고 생각했고, console을 찍어봐도 undefined만 나와서 잘못됐다고 생각했다.

물론 프로젝트 종료했다가 하는 방법도 했다
하지만 여기서 멍청하다는 생각이 들었는데, 3가지 상황이 겹쳐 제대로 안된다고 생각했다.

1. .env를 작성하고 프로젝트를 껐다 켜서 연결도 했지만 ignore에 작성하지 않아 커밋 파일에 존재했다.
2. .env를 작성하고 ignore에 적었기 때문에 커밋은 안됐지만, 프로젝트 종료를 하지 않아 연결이 안 됐다고 생각했다.
3. 파일명이 잘못된 건지 의심이 들어 .env , .env.d.ts로 만들어 놓고 ignore에 .env만 막아놨기 때문에 커밋이 가능했다.

 

많은 교훈 얻어가는 삽질이었다. 생김새에 의심을 하지 말고 문서에 나와있는 대로 모든 걸 따라 해 보자. 대충 흐름 파악했다고 막 했다가 안되면 다시 천천히 작성해보자

 

---

220704 . 추가

 

.env 파일 종류

React에서 .env에 파일 종류는 env , env.local, env.development , env.test, env.production이 있다. (제일 처음 .은 생략하고 작성)

 

각각의 기능

.env: 기본
.env.local: test환경 외에 모든 환경에서 로드됨
.env.development: 개발환경 /npm start로 실행할 떄
.env.test: 테스트 환경 / npm test로 실행할 떄
.env.production: 배포 환경 / npm run build로 실행 할 때

 

아직까지 나는 각 단계별로 나눠야 하는 이유는 잘 모르겠지만, 단계에 따라 API키를 나눠서 사용하는 것이라면 이해할 수 있다. 지금 생각으로는 혼자 테스트할 때에는 .env.devlopment에 API키를 작성하는 방식 등이 있을 것 같다.