[Vite/React] Vite에서 env 파일로 환경 변수 사용하기

Vite 글 타이틀

Vite에서 env 파일로 환경변수 사용하기

 

1. env 파일 작성하기

우리는 아래와 같이 .env 파일을 작성함으로써 프로젝트 전역으로 사용되는 환경변수들을 지정할 수 있다.

env 파일

.env # 모든 상황에서 사용될 환경 변수
.env.local # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수
.env.[mode] # 특정 모드에서만 사용될 환경 변수
.env.[mode].local # 특정 모드에서만 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수

mode에 production이나 development를 넣어서 개발모드/제품모드를 나눠서 적용시킬 수 있다.

---

2. env 환경변수 사용 방법

기존 react app에서 처럼 dotenv를 설치해서 사용하면 되는 줄 알고 시도했다가 낭패를 봤다. 뭔가 해오던 방식대로 계속 안되길래 지금 내가 생성한 앱이 Vite라는걸 깨닫고, 나와 같이 헤매는 사람들을 위해 이 글을 공유한다. ㅎㅎ

반응형

https://ko.vitejs.dev/guide/env-and-mode.html

Vite

위 링크를 타고 들어가면 Vite는 기존과 약간 다른 방식으로 환경변수를 설정하고 사용한다.

보통 환경 변수들은 React 앱이면 REACT_로 시작하고 Next 앱이면 NEXT로 시작하므로 Vite에서는 VITE_로 시작하는 환경변수를 작성한다.

그러고서 사용할 부분에 코드입력은 아래와 같이 해주면 된다.

환경 변수 사용

`import.meta.env.환경변수 `로 사용하면 된다. 일반적으로는 env.환경변수 로 사용하면되는데 Vite에서는 특이하게 import.meta를 접미사처럼 붙여서 사용한다.

모두에게 도움이 됐길 바라며~