Nuxt 3 앱 내에서 환경 변수를 참조하려면 런타임 설정(runtime config)을 사용해야 합니다.
컴포넌트 내에서 이러한 변수를 참조할 때는 setup 메서드(또는 Nuxt 플러그인)에서 useRuntimeConfig 컴포저블을 사용해야 합니다.
앱의 server/ 부분에서는 import 없이 useRuntimeConfig를 사용할 수 있습니다.
nuxt.config 파일의 runtimeConfig 속성에 추가합니다.process.env를 useRuntimeConfig로 마이그레이션합니다.export default defineNuxtConfig({
runtimeConfig: {
// 서버에서만 사용할 수 있는 비공개 설정
apiSecret: '123',
// public 안의 설정은 클라이언트에도 노출됩니다
public: {
apiBase: '/api',
},
},
})
<script setup lang="ts">
const config = useRuntimeConfig()
// 이제 process.env 대신 config.public.apiBase에 접근합니다
console.log(config.public.apiBase)
</script>
export default defineEventhandler((event) => {
const config = useRuntimeConfig(event)
// 서버에서는 config.public 외에 config.apiSecret에도 접근할 수 있습니다
console.log(config.apiSecret)
console.log(config.public.apiBase)
})
# 런타임 설정 값은 런타임에 일치하는 환경 변수로 자동 치환됩니다
NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org