index.html에서 환경변수 사용하기 (vite)

네이버 지도 API를 쓰기 위해서 클라이언트 아이디를 index.html에 기입해야한다. 자바스크립트 문자로 컴파일되는 다른 HTML이였다면 import.meta.env.변수명을 쓰지만 지금은 다른 방법을 찾아야 한다.

vite-plugin-html을 사용해서 환경 변수 html 태그에 넣는다.

vite.config.ts

loadEnv 헬퍼를 사용해 process.env 객체를 불러오고 .env 파일에 환경변수를 가져온다.

import { defineConfig, loadEnv } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
import react from '@vitejs/plugin-react'

export default ({ mode }) => {  
  const env = loadEnv(mode, process.cwd())
  // process에서 타입에러가 뜨게된다.
  // @type/node를 설치해주자
  return {
    plugins: [
      react(),
      createHtmlPlugin({
        minify: true,
        inject: {
          data: {
            naverClientId: env.VITE_NAVER_MAP_CLIENT_ID,
          }
        }
      }),
    ],
  }
}

index.html

<%= naverClientId %>로 html에 .env에 있는 환경변수를 불러올 수 있게 됩니다.

<script src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=<%= naverClientId %>"></script>

참고

vite 공식 문서
stackoverflow