Vite 환경에서 .env 변경 사항 반영 문제

🧐 문제상황

.env 파일에 변경사항을 반영하고 npm run dev 해서 실행하였는데도 변경 전 값으로 유지되고 있음.

vite.config.js에서 env 값을 콘솔로그를 찍어보니 변경전으로 값이 나옴

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  console.log(env); // env 환경변수 값 확인 로그
  return {
    plugins: [react(), tsconfigPaths()],
    server: {
      proxy: {
        '/api-docs': {
          target: '<http://localhost:5174>',
          changeOrigin: true,
        },
        '/api': {
          target: env.VITE_ALADIN_BASEURL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\\/api/, ''),
        },
      },
    },
  };
});

.env 파일을 삭제를 해보고 노드모듈및 캐시를 삭제해도 계속 똑같이 오류가 남.

printenv | grep VITE_ 을 터미널에서 찍었을 때 설정된 환경변수 값들이 다 변경사항 전에 값들 인 것을 확인 함.

* printenv | grep Vite_ 는 무엇인가?

1️⃣ printenv

• 현재 셸(터미널)에서 설정된 모든 환경 변수를 출력하는 명령어.

2️⃣ | (파이프, Pipe 연산자)

• 앞 명령어의 출력을 뒤 명령어의 입력으로 전달하는 역할.
• 즉, printenv의 결과를 grep에 넘겨서 필터링하도록 함.

3️⃣ grep VITE_

• 출력된 환경 변수 목록에서 VITE_라는 문자열이 포함된 줄만 필터링함.
• 즉, VITE_로 시작하는 Vite 환경 변수만 출력하도록 하는 역할.

🔥 해결 방법

unset 명령어로 환경 변수 삭제

📌 환경 변수가 시스템 레벨에서 설정된 경우 unset을 사용해 삭제

📌 현재 터미널에서만 삭제 (일시적)

unset VITE_SUPABASE_URL
unset VITE_SUPABASE_ANON_KEY
unset VITE_ALADIN_BASEURL
unset VITE_KAKAO_REST_API_KEY
.. 없애고 싶은 환경변수 값 입력

왜 이런 문제가 발생 한 것인가??

• 새로운 터미널에서는 파일이 없으면, 환경 변수를 못 읽어서 에러가 발생했을 가능성이 높지만

VS Code 터미널을 계속 사용했다면, 환경 변수가 유지되었기 때문에 에러 없이 실행되었을 수도 있음

• 환경 변수가 VS Code 터미널에 남아 있던 이유는, VS Code 터미널이 기존 세션의 상태를 유지하기 때문.
• VS Code의 터미널은 새로운 터미널을 열 때마다 항상 초기 상태로 시작하는 게 아니라, 기존에 설정된 환경 변수를 계속 유지
• 터미널을 완전히 종료하지 않으면 환경 변수가 남아 있음
  • 새 터미널을 열면 .zshrc 또는 .bashrc에 설정된 환경 변수를 다시 로드하지만,VS Code 터미널에서는 기존에 로드된 환경 변수를 그대로 유지

저와 같은 문제가 발생 하셨던 분이 있다면 참고하시면 좋을 것 같습니다!

혹시 제가 알고 있는 것이 잘못된게 있으면 알려주시면 감사하겠습니다😁