[react-vite] 환경변수 설정 및 index.html에 동적으로 주입방법

Jeonggu Kang·2023년 6월 8일
0

React

목록 보기
1/2

vite-react로 사이드 프로젝트를 하던중 환경변수 설정을 할 때 삽질을 좀 했다.

vite 환경변수 설정방법

.env파일에 환경변수를 설정할때 cra같은경우 "REACT_APP"이라는 키워드를 써서 환경변수를 설정했다면 vite는 "VITE"라는 키워드를 써야했다.

ex) VITE_KAKAO_API_KEY=발급받은키

vite 환경변수 접근법

cra에선 "process.env.환경변수명"으로 접근을 했었다.
하지만 vite에선 "import.meta.env.환경변수명"으로 접근을 할 수 있다.

cra : console.log(process.env.환경변수명)
vite : console.log(import.meta.env.환경변수명)

index.html에 환경변수 동적삽입방법

오늘의 삽질은 이부분 이었다.. 카카오맵의 경우 index.html에 카카오맵sdk를 넣는방법이 가장 쉬운방법이다. 구조는 아래와같은형태이다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은키"></script>

가장 쉬운 방법은 바로 키값을 넣어놓는 것이다. 하지만 코드에서 만큼은 안보이고싶던 마음에 발급받은키를 바로 넣지 않아보려 했다. 맘만먹으면 누구든 저 키값을 알아낼 수 있지만...🥲

일단 "npm i vite-plugin-html" 을 설치하고 vite.config.ts로 들어가 plugins에 세팅을 해야한다

// vite.config.ts
import { defineConfig, loadEnv } from "vite";
import { createHtmlPlugin } from "vite-plugin-html";
import react from "@vitejs/plugin-react";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  console.log(env) // 터미널에 선언한 환경변수들이 보인다.
  return {
    plugins: [
      react(),
      createHtmlPlugin({
        minify: true,
        inject: {
          data: {
            kakaoApiKey: env.VITE_KAKAO_API_KEY,
          },
        },
      }),
    ],
  };
});

이렇게 세팅을 한 후 index.html에서 "<%=kakaoApiKey%>"와 같은 템플릿 문법을 써서 사용가능하다. (좋지 않은 기억이 있는 ejs와 상당히 문법이 똑같다...😥)

   <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<%=kakaoApiKey%>" ></script>

만약 vite.config.ts에서 "'process' is not defined." 와 같은 eslintno-undef 관련 에러가 뜬다면
.eslintrc.cjs 파일에 들어가 env:{node:true} 와 같은 코드를 추가해주면 해결된다.
(여기서도 삽질 쬐끔...했다..🥲)

참고

index.html에서 환경변수 사용하기 (vite)
vite한국어홈페이지

0개의 댓글