React+ Vite 환경에서 .env 환경변수 설정법

오늘은 React+ Vite 환경에서 .env 환경변수 설정중 마주친 오류에 관한 글을 작성해보자 합니다.

🧑🏻‍💻 발생한 문제

현재 진행 중인 프로젝트에서 특정 정보를 가진 key 값들을 비공개로 관리하기 위해 최상위 루트에서. env 환경 변수를 생성하고 각각의 값들을 설정하였으나 갑자기 Uncaught ReferenceError: process is not defined 에러가 발생하였다 .env 환경 변수 설정 직후 발생한 오류이므로 CreateReactApp으로 세팅했을 때와 vite 환경에서의. env 설정법이 다를 수도 있겠다는 생각이 들어 바로 찾아보니 역시나 Vite 환경에서는 기존 방식과 다르게 환경 변수를 설정해야 됐다. 해당 문제는 기존의 방식과 어떻게 다른지 이해한 뒤 적용하면 손쉽게 해결할 수 있었다.

기존 Create React App에서 환경변수 사용법

1. 디렉토리 최상단에 .env 파일 생성
2. 변수명 REACT_APP_ 로 시작하는 변수생성
3. 따옴표로 감싸거나 띄어쓰기를 주지 않는다

 REACT_APP_APPLICATION_KEY = 설정하고자 하는 값  

4.필요한 곳에서 사용시process.env.변수명으로 호출

process.env.REACT_APP_APPLICATION_KEY

Vite에서 환경변수 사용법

1. 디렉토리에 .env파일 생성
2. 변수명 VITE_ 로 시작하는 변수생성
3. 따옴표를 감싸도 괜찮음

  VITE_APPLICATION_KEY = "설정하고자 하는 값"

4. 필요한 곳에서 사용시 import.meta.env.변수명으로 호출

const APPLICATION_KEY = import.meta.env.VITE_APPLICATION_KEY

정리

• Create React App, Vite 모두 디렉토리 최상단에 .env 파일 생성 (깃허브 업로드 시 .env 파일은 올라가면 안되므로 gitignore 설정추가도 잊지말것!)
• 변수명 생성방식과 사용하고자 할때 불러오는 방식이 다르다
• Create React App: 생성: REACT_APP_ / 호출: process.env.
• Vite: 생성: VITE_ / 호출: import.meta.env.

Reference: https://ko.vitejs.dev/guide/env-and-mode
https://velog.io/@tmdgp0212/TIL230316-using-.env-on-vite