Be my desk. _firebase .env 연결오류 / (auth/invalid-api-key)

오류발견

firebase 의 SDK 키를 .env 에 넣어서 보안처리를 하고자했다.
.env에 키를 담아 상수 선언하고 firebase.js 에서 받아와서 연결하려고 했는데,
invalid-api-key 오류가 났다.

---

n번째 시도 > 해결

알고보니, env 에 적은 SDK 키값 뒤에 , 를 붙였기 때문에
해당 키를 firebase.js 에서 제대로 인식하지 못해 생겼던 오류였다.

firebase.js 에서 .env 에 저장해둔 상수를 받아갈 때,
“” 와 , 까지 모두 적어둔 그대로 가져가기 때문에
firebase 키를 env에서 받아올 때는 키값 뒤에 , 를 쓰지 않도록 주의해야 한다.

---

React firebase 연결 코드 스니펫

src/shared/firebase.js

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

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,
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const dbService = getFirestore(app);

.env.local

REACT_APP_FIREBASE_API_KEY = "Your API_KEY"
REACT_APP_FIREBASE_AUTH_DOMAIN = "Your AUTH_DOMAIN"
REACT_APP_FIREBASE_PROJECT_ID = "Your PROJECT_ID"
REACT_APP_FIREBASE_STORAGE_BUCKET = "Your STORAGE_BUCKET"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = "Your MESSAGING_SENDER_ID"
REACT_APP_FIREBASE_APP_ID = "Your APP_ID"

---

env 설정 주의 사항

env 상수 네이밍

기본적으로 환경변수는 서버에서만 참조 할 수 있기 때문에
상수를 서버와 브라우저에서 모두 참조하고 싶다면
React 에서는 REACT_APP , Next.js 에서는 NEXT_PUBLIC 을 상수 네이밍 앞에 붙여주어야
서버와 브라우저 모두에서 참조가 가능하다. (서버에서만 참조할거면 상관없음)

env 파일 종류

###### .env 파일
# 가장 우선순위가 낮다. 모든 환경에서 공통으로 사용할 디폴트 키를 관리한다.
NEXT_PUBLIC_ANALYTICS_ID=default_analytics_id
NEXT_PUBLIC_API_KEY=default_api_key
NODE_VALUE=default_value  

###### .env.development 파일
# 개발환경(process.env.NODE_ENV === 'development')에서 사용할 키를 등록한다. 
# 개발환경일 경우, .env에 같은 환경변수가 있다면 덮어쓴다.
NEXT_PUBLIC_API_KEY=dev_api_key
NODE_VALUE=dev_value

###### .env.production 파일
# 배포/빌드환경(process.env.NODE_ENV === 'production')에서 사용할 키를 등록한다. 
# 배포환경일 경우, .env에 같은 환경변수가 있다면 덮어쓴다.
NEXT_PUBLIC_API_KEY=prod_api_key
NODE_VALUE=prod_value

###### .env.local 파일
# 모든 환경에서 최우선순위로 적용할 환경변수를 정의한다.
# 모든 .env.* 파일보다 우선순위가 높다.(같은 환경변수가 있다면 모두 덮어쓴다.)
NEXT_PUBLIC_API_KEY=local_api_key
NODE_VALUE=local_value