vite env 설정하기

Webpack + React 환경에서의 env설정과 vite는 다른 형태로 작성해주어야합니다.

//.env
const VITE_URL = 'localhost:3001'

//불러오는 쪽
import.meta.env.VITE_URL 

• 기존 process.env가 아닌 import.meta속성을 이용해야하는데 여기서 문제가 import.meta는ES2021(ES12) 에 새로 추가된 기능이고 모듈 컨텍스트(module context) 특정 meta 데이터를 공개합니다.
• tsconfig의 target, module설정이 es12보다 낮으면 사용할 수 없기 때문에 esnext로 바꿔줍니다.

//tsconfig.json
{
  "compilerOptions": {
...
	  "module": "esnext",
    "target": "esnext",
    "types": ["vite/client"],
    "moduleResolution": "node",
  },
...
}

• 자동완성과 type safe를 위해 타입선언 파일도 만들어줍니다.

// .env.d.ts
interface ImportMeta {
  env: {
    VITE_BASE_URL?: string;
  };
}