vite로 프로젝트를 진행중에 Prod 서버와 dev서버의 환경변수를 나눠야 해서 찾아보게 되었다.
APi도 환경변수로 관리하기 위해서 찾아봤다.
기존 react에서 사용할때는 잘되던게 vite+react 일때 사용했는데 undefined가 나왔다.
찾아보니 기존 React 에서는
‘REACTAPP 이름 ‘형식으로 환경 변수를 설정해서 사용했는데
vite에서는 사용하는 방법이 달랐다.
환경 변수
환경 변수는 일단 git 같은데 업로드 되지 않도록 하고 환경에 따라 다르게 사용하기 위해서 사용된다.
but, 공식문서에서는 번들링시 소스코드에 모든 환경변수가 포함된다고 한다. 그래서 민감한 정보들을 넣어서는 안된다.
vite환경 변수 설정법
루트 디렉토리에 .env 파일을 만든다
기본으로 주어지는 파일들은 아래와 같다
- .env : 모든 상황에서 사용됨
- .env.local : 모든 상황이지만 로컬 개발 환경에서 사용될 환경변수
- .env.[mode] : 특정 모드에서만 사용될 환경변수
- .env.[mode].local : 특정모드에서 사용되나 , 로컬 개발환경에서만 사용
우선순위
우선 순위로는 .env.prod 와 같이 특정 모드에 대한 환경 변수는 일반적인 환경변수(.env)보다 높은 우선순위를 갖는다고 한다.
또한 이미 존재하던 환경변수는 가장 높은 우선순위가 있으며 .env파일로 인해 덮어씌워지지 않는다.
변수 설정방법
변수를 설정하는 방법은 ‘VITE_ ‘로 사용하면 된다
그러니까 예시로 : ‘VITE_API_KEY’ 이렇게 설정해준다.
접근방법
vite 에서는 ‘import.meta.env’ 형식으로 사용이 가능하다
위에서 설정한 예시의 값을 가져오려면
‘import.meta.env.VITE_API_KEY’ 으로 객체형식으로 가져오면된다
간단하게 작성했다 추가적인 사항은 공식문서를 확인하자
https://vitejs-kr.github.io/guide/env-and-mode.html
prod와 dev 설정법
나는 기본적으로 dev일 경우 공통 환경변수를 활용했고 prod , 배포환경일때는 .env.prod 파일을 만들어서 넣어서 사용했다.
자동으로 배포환경과 dev환경을 구별하기 때문에 변수를 맞춰주면 알아서 설정된다.
