[React] API key 숨기기

해당 글은 프론트엔드를 공부하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇‍♂️

이번에 팀 프로젝트를 하면서 우리가 만든 게시글을 서버에 저장하고 불러오기 위해
Firebase 플랫폼을 사용하였는데 API key 코드를 깃에 올리지 않는 방법이 필요했다.

처음에는 API key를 담고 있는 코드만 제외할까도 생각했지만, 혼자 작업하는 것이 아니라,
팀으로 코드 공유가 필요한 상황이었기에 여러 방법을 고민하다 내가 해결한 방법을 공유해 본다.

.env 파일 생성

프로젝트 최상단 경로에 .env 을 생성하여 Firebase에서 발급받은 API key를 코드를 옮긴다.
(※your-api-key를 지우고 숨겨야 할 API key를 작성하면 된다.)

// .env
...
REACT_APP_FIREBASE_API_KEY='<your-api-key>'
...

Firebase 코드 수정

.env 파일 안에 작성한 API key를 불러오기 위해서는 process.env.<작성한 Name>으로 불러와야 한다.

// firebase.js
const firebaseConfig = {
...
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
...
};

.gitignore 코드 추가

마지막으로 .env 파일을 GitHub에 올리지 .env 파일 경로 코드를 추가한다.

// .gitignore
...
.env
...

위 내용은 이미 간단한 구글링을 통해서 찾을 수 있는 방법이지만, 나와 같은 문제를
고민하는 분들에게 도움이 되고자 내가 해결했던 방법을 이렇게 짧게 나마 기록을 남겨본다.

(번외)
Firebase는 API key 뿐만 아니라 다른 코드도 숨겨야 할 수 있어서
내가 사용했던 코드 양식을 참고할 수 있도록 아래와 같이 공유해 본다.

// firebase.js
...
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};
...