useRuntimeConfig
useRuntimeConfig 컴포저블을 사용하여 런타임 구성 변수를 액세스합니다.
Usage
const config = useRuntimeConfig()export default defineEventHandler((event) => {
const config = useRuntimeConfig(event)
})
Define Runtime Config
아래 예제는 공개 API 기본 URL과 서버에서만 접근 가능한 비밀 API 토큰을 설정하는 방법을 보여줍니다.
runtimeConfig 변수는 항상 nuxt.config 내에서 정의해야 합니다.
export default defineNuxtConfig({
runtimeConfig: {
// 비공개 키는 서버에서만 사용 가능합니다
apiSecret: '123',
// 클라이언트에 노출되는 공개 키
public: {
apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
}
}
})
서버에서 접근해야 하는 변수는 runtimeConfig 내부에 직접 추가됩니다. 클라이언트와 서버 모두에서 접근해야 하는 변수는 runtimeConfig.public에 정의됩니다.
Access Runtime Config
런타임 구성을 액세스하려면 useRuntimeConfig() 컴포저블을 사용할 수 있습니다:
export default defineEventHandler((event) => {
const config = useRuntimeConfig(event)
// 공개 변수에 접근
const result = await $fetch(`/test`, {
baseURL: config.public.apiBase,
headers: {
// 비공개 변수에 접근 (서버에서만 사용 가능)
Authorization: `Bearer ${config.apiSecret}`
}
})
return result
}
이 예제에서 apiBase는 public 네임스페이스 내에 정의되어 있으므로 서버와 클라이언트 측 모두에서 접근할 수 있지만, apiSecret은 서버 측에서만 접근할 수 있습니다.
Environment Variables
NUXT_로 접두사된 환경 변수 이름을 사용하여 런타임 구성 값을 업데이트할 수 있습니다.
Using the .env File
환경 변수를 .env 파일 내에 설정하여 개발 및 빌드/생성 중에 접근할 수 있도록 할 수 있습니다.
NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"
NUXT_API_SECRET = "123"
.env 파일 내에 설정된 모든 환경 변수는 개발 및 빌드/생성 중에 Nuxt 앱에서 process.env를 사용하여 접근할 수 있습니다.
프로덕션 런타임에서는 플랫폼 환경 변수를 사용해야 하며 .env는 사용되지 않습니다.
app namespace
Nuxt는 baseURL 및 cdnURL을 포함한 키와 함께 런타임 구성에서 app 네임스페이스를 사용합니다. 환경 변수를 설정하여 런타임 시 이들의 값을 사용자 정의할 수 있습니다.
이것은 예약된 네임스페이스입니다. app 내에 추가 키를 도입해서는 안 됩니다.
app.baseURL
기본적으로 baseURL은 '/'로 설정됩니다.
그러나 baseURL은 환경 변수로 NUXT_APP_BASE_URL을 설정하여 런타임 시 업데이트할 수 있습니다.
그런 다음 config.app.baseURL을 사용하여 이 새로운 기본 URL에 접근할 수 있습니다:
export default defineNuxtPlugin((NuxtApp) => {
const config = useRuntimeConfig()
// baseURL에 보편적으로 접근
const baseURL = config.app.baseURL
})
app.cdnURL
이 예제는 사용자 정의 CDN URL을 설정하고 useRuntimeConfig()를 사용하여 접근하는 방법을 보여줍니다.
.output/public 내의 정적 자산을 제공하기 위해 사용자 정의 CDN을 사용할 수 있으며, NUXT_APP_CDN_URL 환경 변수를 사용합니다.
그런 다음 config.app.cdnURL을 사용하여 새로운 CDN URL에 접근합니다.
export default defineEventHandler((event) => {
const config = useRuntimeConfig(event)
// cdnURL에 보편적으로 접근
const cdnURL = config.app.cdnURL
})
※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.
공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/api/composables/use-runtime-config