VITE에 환경변수 적용하기

 

# 상황

배포 파이프라인 구축을 하였기 때문에 프론트 어플리케이션도 직접 배포하게 되었다.

프론트 개발은 VITE+React로 구성되어 있었다.

 

똑같이 docker image를 만들고 gitlab과 argocd를 통해 앱 배포를 시작했다.

프론트 앱에서 백엔드를 호출하기 위해 api_url이 필요한데 이를 개발과 운영환경을 분리하기 위해 환경변수가 필요하다.

 

# 문제

백엔드 어플리케이션 배포할때 helm chart를 통해 배포하여 chart에 환경변수를 설정하면 빌드 과정을 생략하고 바로 deployment 만 재시작하여 배포하여 환경변수를 적용할 수 있었다.

이처럼 프론트 어플리케이션도 똑같이 환경변수를 helm chart로 전달받게 구성하였다.

근데.. 적용이 되질 않는다...

 

# 원인 및 해결

- env 파일로 분리

프론트 어플리케이션에서 사용한 VITE(비트)는 빌드 툴로 빌드 시에 환경변수를 정적으로 대체한다고 한다.

그래서 .env 파일을 통해 개발 환경에 따라 분리해서 .env.prod / .env.dev 로 분리하면 된다...!

 

# 참고

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

Vite

 

# 느낀점

모르면.. 찾아보고.. 정답은 공식문서에 있다..