💥 문제 : Firebase 연결 시 API Key 오류
.env.local 파일을 생성하여 API Key와 필요한 값들을 저장해둔 상태이다.
REACT_APP_FIREBASE_API_KEY=firebase_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=firebase_auth_domain
REACT_APP_FIREBASE_DB_URL=firebase_db_url
REACT_APP_FIREBASE_PROJECT_ID=firebase_project_id
REACT_APP_CLOUDINARY_PRESET=cloudinary_preset
REACT_APP_CLOUDINARY_URL=cloudinary_url하지만 vercel 배포를 진행하다가 배포 사이트에 아래와 같은 firebase error가 발생했다.
.env.local 파일이 최상단 폴더에 위치해있는지, API Key를 잘못 작성했는지 재차 확인했지만 문제가 없었다.
생각해보니 뭔가 빠트린 느낌이 들어서 vercel 사이트에 가보니..
환경변수 등록을 안해줘서 유효하지 않다고 에러가 발생하는 것이었다.
💡 해결방법
Vercel에서 환경 변수를 따로 등록해줘야 배포된 사이트가 제대로 동작할 수 있기 때문에 설정에서 환경변수 등록 메뉴를 클릭하여 .env.local에 작성한 내용을 추가해주면 된다.
환경변수를 추가해주면 아래로 스크롤 내리면 등록된 것을 확인할 수 있다.
그런 다음 redeploy 해주면 처음에 발생한 에러가 사라진다 !
✅ vercel로 배포할 경우,
환경변수 적용했는지 꼭 체크하기 !
Junior Frontend Developer