문제 발생 상황

React + Vite + TS 프로젝트에서 firebase를 연동하다가 발생했다.
firebaseConfig를 설정해줘야 하는데 이 값들은 외부에 노출이 되면 안되기 때문에 .env파일에 따로 작성해주기로 했다.

.env 파일에 값들을 옮겨주고 process.env.value로 접근했더니 에러가 발생했다.

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

// firebase 설정과 관련된 개인 정보
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,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

// firebaseConfig 정보로 firebase 시작
const app = initializeApp(firebaseConfig);

// firebase의 firestore
const analytics = getAnalytics(app);

문제 발생 원인

구글링을 통해 여기저기 찾아봤는데 나와 동일하게 vite를 사용한 프로젝트에서 동일한 문제가 발생한 글을 보았다.

[09/29] Uncaught ReferenceError: process is not defined error

vite 번들러는 환경 변수를 가져올 때 process대신 import.meta를 통해서 환경 변수를 가져오기 때문이라고 한다.

문제 해결

process.env.value에서 import.meta.env.value로 수정해주니 쉽게 해결할 수 있었다.

추가

환경 변수로 Axios API baseURL을 사용해봤는데 정확한 주소로 요청을 보내는 것이 아니라 자꾸 이상한 주소로 보내서 콘솔창에 출력해보았다. 해당 환경 변수로 저장한 url은 출력했을 때 undefined값이 출력되는 현상이 있어서 이것도 vite에 대한 문제일 것 같아서 조금 더 찾아봤다.

vite 환경에서는 .env 파일에 작성한 환경 변수 이름은 VITE_ 접두사를 붙여야 한다고 한다.

따라서 AXIOS_API_BASE_URL의 경우 VITE_AXIOS_API_BASE_URL로 사용해야 한다.

참고
[Vite 공식 문서] Vite의 환경 변수와 모드