Firebase for React-Admin

리액트 어드민을 이용하면 몇분...아니 몇시간만에 빠르게 그럭저럭 쓸 수 있는 형태의 CRUD 관리자페이지를 생성할 수 있는데 그때 도움이 되는것이 Auth와 Database를 한큐에 제공해주는 구글의 파이어베이스(firebase)이다. npm에는 그 연결을 더욱 빠르게 해주는 React-admin-firebase 이 있다.

import {
  FirebaseAuthProvider,
  FirebaseDataProvider,
  FirebaseRealTimeSaga
} from 'react-admin-firebase';
 
const config = {
  apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
  authDomain: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
  databaseURL: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
  projectId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
  storageBucket: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
  messagingSenderId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
};

위 코드의 const config 값들은

파이어베이스 콘솔에서 프로젝트 생성 후 설정메뉴에서 웹앱(또는 네이티브앱)을 등록하는 과정에서 생성되는 코드블럭을 그대로 복사해서 넣으면 된다.

다만 이대로 깃헙이나 깃랩의 공개 원격 저장소에 푸시해버리면 api 키가 그대로 노출되고만다. 만약 이미 Api-Key가 원격저장소에 노출되었다면 지금이라도 리셋을 통해 커밋된 내역을 지우는걸 추천한다. (요새는 github에서 경고를 날려준다. )

dotenv 사용하기

어쨌든 해결책은 dotenv(.env)를 이용하는것이다. 우선 로컬에서는 프로젝트 root의 package.json과 동일한 경로에 .env.local 파일을 생성하고 이 값들을 이렇게 적어준다음

.gitignore에 우리의 소중한 값들이 담겨있는 .env.local이 git에의해 관리되지 않도록 등록하는걸 잊지말자. 그 다음에는 config.js파일을 만들고 해당 변수를 필요로하는 app.js와 같은 곳에서 import해서 사용하면 된다.

const config = {
    apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATA_BASEURL,
    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,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENTID
}

export default config;

배포단계에서는 .env 파일을 생성하고 거기에 넣어주면 된다. netlify같은 서비스를 이용해 배포한다면 Build&Deploy 항목에 Environment메뉴가 있으니 여기에서 손쉽게 값을 주입할 수 있다.