Vite로 HTML에서 환경 변수 불러오기
Vite의 특수 구문으로 HTML 파일에서 환경 변수를 불러오는 방법.
요즘 프론트엔드의 개발은 대부분은 Vite 번들러를 통해서 이루어지고 있는 것 같다. Webpack 보다 가볍고, 개인적으로 설정하는 것도 간편하다. 다른 프레임워크나 라이브러리 통합도 유연해서, 기본적인 React, Vue 기반의 SPA 애플리케이션을 구축하는 경우에는 Vite 번들러의 CLI로 시작한다면 매우 빠르게 애플리케이션을 빌딩할 수 있다.
이렇게 개발한 프론트엔드 애플리케이션에는 보통 GA4, GTM, MS Clarity 등의 분석 도구를 연동해서 프로덕트의 트래픽 분석을 돕는다. 다만 라이브러리를 사용하거나 이용 중인 프레임워크에서 지원하는 것이 따로 없다면, 보통 html 파일의 <head /> 요소나 <body /> 요소에 바로 해당 스크립트를 삽입하게 될 것이다. 이 때 개발 서버, 스테이지 서버에서도 트래픽이 측정된다면 제대로 된 프로덕트의 분석이 이루어지지 못할 것이다.
따라서 스크립트에서는 보통 환경 변수를 통해 다른 ID 값을 사용하는 등 분기를 처리하고는 하는데 index.html 파일은 스크립트가 아니다. 어떻게 처리할 수 있을까?
Vite 공식 문서에서 Vite의 환경 변수와 모드라는 문서를 보면, Vite의 특수 구문을 통해 HTML 파일에서도 환경 변수를 불러올 수 있는 기능을 지원하는 것을 볼 수 있다. 가령 아래와 같은 환경 변수 파일이 존재하고, 이를 이용하는 HTML을 작성했다.
VITE_NODE_ENV=production
VITE_GA4_ID=G-1234<h1>Vite is running in %VITE_NODE_ENV%</h1>
<p>GA4 ID is %VITE_GA4_ID%</p>이 경우 브라우저에서는 아래와 같이 보여지게 된다.
<h1>Vite is running in production</h1>
<p>GA4 ID is G-1234</p>배포 성격에 따른 환경 변수 파일을 분리해두고, 이 기능을 이용한다면 HTML에서도 분리된 환경 변수를 호출할 수 있다. 개발 서버, 스테이지 서버에서의 페이지 뷰가 분석 도구에 기록되는 일도 없앨 수 있을 것이다.
References
원문: Medium