Vite를 사용하여 클라이언트에 '오름차순' 서버 환경 변수

요약:

// vite.config.js
{
  envPrefix: ['VITE_', 'CF_PAGES_'],
}

Vite를 사용하면 .env , .env.{mode} 또는 .env.{mode}.local 에서 환경 변수를 설정할 수 있습니다.

SECRET_STUFF          = "only for server"
VITE_NOT_SECRET_STUFF = "for server and client"

기본VITE_ 접두사는 클라이언트에 변수를 전달하고 문자열과 함께 사용할 수 있습니다.

// in a client js file
let msg = `Hey {import.meta.env.VITE_NAME}`

하지만 플랫폼에서 설정한 환경을 '상승'하려면 어떻게 해야 할까요? 제 경우에는 Cloudflare Pages 빌드의 미리보기 URL이 포함된 CF_PAGES_URL 를 노출하고 싶습니다. 분명히 .env에 쓸 수 없습니다 ... .env와 같은 구문으로 다른 변수에 액세스할 수 있는 곳을 읽었습니다.

VITE_PAGES_URL=$CF_PAGES_URL

...하지만 this solution을 찾았기 때문에 시도하지 않았습니다.

// vite.config.js
{
  envPrefix: ['VITE_', 'CF_PAGES_'],
}

그러면 모든 CF_PAGES_ 변수가 '상승'하고 클라이언트 측에서 사용할 수 있습니다.

끝.