Vite 환경에서 html 환경변수 사용

김진원·2023년 2월 13일

React

목록 보기

2/4

환경변수란?

환경 변수(environment variable)는 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는, 동적인 값들의 모임이라고 한다.
환경에 따라 변경,사용되어지는 변수들이라고 이해를 했다.

사용 배경

팀 프로젝트 작업 중 API 키값이 노출되지 않게 조치를 취하기 위해 알아보게 되었으며, html 파일에서 Vite 환경변수를 호출하려고 알아보다보니 환경 변수에 대해 더욱 다양하게 알게 되었다..

Vite 환경변수 사용

env 파일 생성

VITE_API_KEY= 키값

root 경로에 .env 파일을 생성 후 key와 value로 구성 된 환경 변수를 삽입한다.
이때 Vite환경에서는 환경변수명에 VITE_라는 접두사를 꼭 사용해야 한다.

환경변수 불러오기

import.meta.env.환경변수명

VITE 내장 객체인 import.meta.env를 통해 문자열 형태로 호출할 수 있다.

html에서 환경변수 불러오기

사실 위에 과정에서는 Vite 공식문서를 통해서도 쉽게 확인이 가능하므로 작업이 쉬웠지만.. html에서 환경변수를 불러오려고하니 import.meta.env 사용도 불가하니 어려웠다.

알아보다보니 html을 위한 vite-plugin-html-env라는 플러그인을 알게 됐다.

npm install --save-dev vite-plugin-html-env

터미널에서 vite-plugin-html-env을 설치해주고,

import VitePluginHtmlEnv from 'vite-plugin-html-env'

export default defineConfig({
  plugins: [react(),
    VitePluginHtmlEnv(),
    VitePluginHtmlEnv({compiler: true})],
})

vite.config.js에서 방금 설치한 플러그인을 호출 및 확장 해준다.

    <script type="text/javascript"src="appkey<{환경변수명}>"></script>

이제는 html로 돌아가 스크립트를 작성하여 호출 해주면 정상적으로 키값이 불러와지는 걸 확인할 수 있다. 이때 환경변수명 앞뒤를 <{}>로 감싸주어야 정상적으로 호출이 되니 유의하길 바란다..
React 환경에서는 %%로 감싸는 등등 환경에 따라 상이한것으로 보인다.
VITE는 꼭 <{}>!!