본 게시글은 개인 공부를 하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇♂️
1. 개 요
이번에 팀 프로젝트를 하면서 우리가 만든 게시글을 서버에 저장하고 불러오기 위해
Firebase를 사용하였는데 API key 코드를 깃에 올리지 않는 방법이 필요했다.
처음에는 API key를 담고 있는 코드만 제외할까도 생각했지만, 혼자 작업하는 것이 아니라,
팀으로 코드 공유가 필요한 상황이었기에 여러 방법을 고민하다 내가 해결한 방법을 공유해 본다.
2. env 파일 생성
프로젝트 최상단 경로에 .env 을 생성하여 Firebase에서 발급받은 API key를 코드를 옮긴다.
※ your-api-key를 지우고 숨겨야 할 API key를 작성하면 된다.
// .env
...
REACT_APP_FIREBASE_API_KEY='<your-api-key>'
...
3. Firebase 코드 수정
.env 파일 안에 작성한 API key를 불러오기 위해서는 process.env.<작성한 Name>으로 불러와야 한다.
// firebase.js
const firebaseConfig = {
...
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
...
};
4. gitignore 코드 추가
// .gitignore
...
.env
...
위 내용은 이미 간단한 구글링을 통해서 찾을 수 있는 방법이지만, 나와 같은 문제를
고민하는 분들에게 도움이 되고자 내가 해결했던 방법을 이렇게 짧게 나마 기록을 남겨본다.
5. 번외
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
};
...