[10주차] 리액트 : .env 와 .gitignore가 포함된 프로젝트 Vercel로 배포하기

 

API를 이용한 프로젝트를 하다보면, API key를 .env에 저장하게 된다.

 

.env 만드는 법 (환경변수)

1. root 스코프에 .env 또는 .env.local 의 이름으로 파일을 하나 만든다.
2. 아래 형식으로 키와 ""로 감싸진 value(키 값)을 넣는다.

REACT_APP_FB_API_KEY="skjfksjfljkjkljfs"
REACT_APP_FB_AUTH_DOMAIN="skjfksjfljkjkljfs"
REACT_APP_PROJECT_ID="skjfksjfljkjkljfs"
REACT_APP_STORAGE_BUCKET="skjfksjfljkjkljfs"
REACT_APP_MESSAGING_SENDER_ID="skjfksjfljkjkljfs"
REACT_APP_APP_ID="skjfksjfljkjkljfs"
REACT_APP_MEASUREMENT_ID="skjfksjfljkjkljfs"​

 

 

프로젝트를 github에 올릴 때, API key가 노출되면 안되기 때문에 .gitignore 파일을 따로 만들어 github에 올라가지 않는 파일들을 적어놓는다.

.gitignore 만드는법

1. root 스코프에 .gitignore의 이름으로 파일을 만든다.
2. 아래 형식으로 작성한다

.env.development.local
.env.test.local
.env.production.local​

 

 

 

이제 프로젝트를 github에 성공적으로 올린 후, vercel로 배포하면? 아래처럼 에러가 생긴다.

FirebaseError: Firebase: Error (auth/invalid-api-key).

 

 

에러를 해결하려면

1.  vercel project -> setting -> environment variable -> api key명과 value 값 추가해주기

2. gitignore에서 .env 관련 코드를 맨 위로 올리고 -> 앞에 '/' 붙여주기

/.env.local
/.env.development.local
/.env.test.local
/.env.production.local

 

---

 

참고

 

 

[React] vercel 배포 시 FirebaseError: Firebase: Error (auth/invalid-api-key). 오류 해결하기