Day 3 - 클론 코딩 시작

파이어베이스 비밀키 숨기기

---

1.파이어베이스 비밀키 숨기기

day 2에서 작성한 아래의 코드 firebaseConfig에서 보안상의 문제로 키값을 감춰야함.

import firebase from "firebase/app";
 
const firebaseConfig = {
  ..생략..
};
 
export default firebase.initializeApp(firebaseConfig);

 

 

How?

.env 파일 생성

.env 파일에 비밀키 변수 등록

비밀키가 필요할 때 참조하도록 하기

.env파일 업로드만 하지 않는다면 노출을 방지할 수 있음

 

1).env파일로 환경 변수 설정하기

.env파일을 package.json 루트에 생성하기 (반드시 점 포함)

2).env파일 숨기기

.env파일은 깃허브에 업로드 되지 않도록 설정해야함

.gitignore 파일을 이용하면 된다. .env 추가하면 된다.

# misc
.DS_Store
#.env추가
.env 
.env.local
.env.development.local
.env.test.local
.env.production.local

 

3)friebaseConfig.js에 환경변수 적용하기

firebase.js에 쌩으로 적혀있던 키값들을 .env 파일에 적어둔 변수로 변경한다.

process.env는 .env 파일을 읽어 해당 변수를 사용한다는 의미이므로 꼭 붙여야함.

*완벽한 보안은 아니지만 github 업로드를 방지하는것만으로도 위협을 줄일 수있음.

 

+오늘 오류가 나서 확인해보니 appId에서 변수값 앞에 process.env.를 붙이지 않아 에러발생.

참조할 수 없는 변수라 에러가 났다.

import firebase from "firebase/compat/app";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID
};

export default firebase.initializeApp(firebaseConfig);