Vite의 공개 환경 변수와 서버 비밀을 구분합니다.
Vue 클라이언트 번들에서 import.meta.env로 읽는 VITE_ 값은 사용자에게 공개됩니다. 비밀 키는 서버에 두고 브라우저가 필요한 공개 설정만 주입합니다.
환경별 API origin을 허용 목록과 HTTPS 정책으로 검증합니다.
빌드 시 값이 고정되는지 runtime 설정인지 배포 방식을 문서화합니다.
VITE_SECRET 같은 이름으로 바꿔도 클라이언트 번들에 들어가면 비밀이 아닙니다.
로컬 프로젝트에서 확인해보세요development와 production의 공개 API 주소 선택 규칙을 추가하세요.
<script setup>
const mode = import.meta.env.MODE;
const publicConfig = { mode, apiBase: import.meta.env.VITE_API_BASE ?? "/api" };
</script>
<template>
<main>
<h1>공개 빌드 설정</h1>
<pre>{{ publicConfig }}</pre>
<p>비밀 키는 서버에서만 보관합니다.</p>
</main>
</template>