[React] Vite에서 환경변수 사용하기

카카오 로그인 구현 중 .env 파일에 key를 넣고 process.env.VITE_KAKAO_CLIENT_ID를 했으나 에러가 떴다.

process.env를 사용할 수 없어서 찾아보니 Vite를 사용할 경우 CRA과는 다르게 사용해야한다는 것이다.

 

CRA는 환경변수 이름이 REACT_APP_으로 시작해야했다면

Vite는 환경변수 이름이 VITE_로 시작해야 한다.

 

.env

VITE_FRONTEND_BASE_URL = "http://localhost:5173/"
VITE_KAKAO_CLIENT_ID = 
VITE_KAKAO_JS_SDK_KEY =

그리고 Vite는 문자열에 ""큰따옴표 사용이 가능하다.

 

const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${
  import.meta.env.VITE_KAKAO_CLIENT_ID
}&redirect_uri=${import.meta.env.VITE_FRONTEND_BASE_URL}&response_type=code`;

 

실제로 사용할 때 import.meta.env.환경변수이름 이렇게 사용해야 한다.