[TIL] React 환경 변수 설정

에러

vite를 사용해 react 개발을 진행하는 과정에서 firebase API키를 보관하기 위해 .env파일에 키를 보관하는 과정에서 Uncaught ReferenceError: process is not defined에러가 발생

CRA

1. .env 파일을 생성
2. REACT_APP_apiKey처럼 접두사로 REACT_APP를 추가, 따옴표 사용 불가
3. process.env를 추가한 변수를 호출process.env.REACT_APP_apiKey

REACT_APP_apiKey = 1234
process.env.REACT_APP_apiKey

VITE

1. .env 파일을 생성
2. VITE_apiKey처럼 접두사로 VITE_를 추가, 따옴표를 감싸도 괜찮음
3. import.meta.env.를 추가한 변수를 호출import.meta.env.REACT_APP_apiKey

VITE_apiKey = 1234 // 변수 설정
import.meta.env.REACT_APP_apiKey // 변수 호출

firebase config

1. cmd를 통해 firebase config에 api를 설정

firebase functions:config:set someservice.apikey="YOUR_API_KEY"

2. functions/index.js

const apiKey = functions.config().someservice.apikey

를 통해 사용 가능하다.