useRuntimeConfig

useRuntimeConfig 컴포저블을 사용하여 런타임 구성 변수에 액세스한다.

<!--
app.vue
-->

<script setup lang="ts">
const config = useRuntimeConfig()
</script>

// server/api/foo.ts

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)
})

참고) Docs > Guide > Going Further > Runtime Config

 

런타임 구성 정의

아래 예에서는 공개 API 기본 URL과 서버에서만 액세스할 수 있는 비밀 API 토큰을 설정하는 방법을 보여준다.

runtimeConfig 변수를 nuxt.config 내부에 정의해야 한다.

// nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    // Private keys are only available on the server
    apiSecret: '123',

    // Public keys that are exposed to the client
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

서버에서 액세스해야 하는 변수는  runtimeConfig  내부에 직접 추가된다. 클라이언트와 서버 모두에서 액세스 가능해야하는 변수는 runtimeConfig.public 에 정의되어 있다.

 

참고) Docs > Guide > Going Further > Runtime Config

 

런타임 구성에 액세스

런타임 구성에 액세스하려면 useRuntimeConfig() 컴포저블을 사용할 수 있다.

// server/api/test.ts

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)

  // Access public variables
  const result = await $fetch(`/test`, {
    baseURL: config.public.apiBase,
    headers: {
      // Access a private variable (only available on the server)
      Authorization: `Bearer ${config.apiSecret}`
    }
  })
  return result
}

이 예에서 apiBase은 public 네임스페이스 내에 정의되어 있으므로 서버측과 클라이언트측 모두에서 보편적으로 액세스할 수 있다. 반면 apiSecret 은 서버 측에서만 액세스할 수 있다.

 

환경 변수

NUXT_ 접두사가 붙은 일치하는 환경 변수 이름을 사용하여 런타임 구성 값을 업데이트할 수 있다.

 

.env 파일 사용

.env 파일 내부에 환경 변수를 설정하여 개발 및 빌드/생성 중에 액세스할 수 있도록 할 수 있다.

// .env 파일

NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"
NUXT_API_SECRET = "123"

 .env  파일 내에 설정된 모든 환경 변수는 빌드/생성 및 개발 중에  Nuxt 앱에서 process.env 를 사용하여 액세스된다. 

 

주위) 프로덕션 런타임에서는 플랫폼 환경 변수를 사용해야 하며 .env은 사용되지 않는다.

 

참고) Docs > Guide > Directory Structure > Env

 

app 네임스페이스

Nuxt는 baseURL 및 cdnURL 을 포함한 키와 함께 런타임 구성의 app 네임스페이스를 사용한다. 환경 변수를 설정하여 런타임 시 해당 값을 맞춤설정할 수 있다.

 

예약된 네임스페이스 이므로 app 내부에 추가 키를 삽입해서는 안된다.

 

app.baseURL

기본적으로 baseURL은 '/'로 설정된다.

그러나 baseURL은 NUXT_APP_BASE_URL를 환경 변수로 설정하여 런타임에 업데이트할 수 있다.

그런 다음 config.app.baseURL:을 사용하여 이 새로운 기본 URL에 액세스할 수 있다.

// plugins/my-plugin.ts

export default defineNuxtPlugin((NuxtApp) => {
  const config = useRuntimeConfig()

  // Access baseURL universally
  const baseURL = config.app.baseURL
})

 

app.cdnURL

이 예에서는 사용자 정의 CDN URL을 설정하고 useRuntimeConfig()을 사용하여 액세스하는 방법을 보여준다.

NUXT_APP_CDN_URL 환경 변수를 사용하여 .output/public 내부의 정적 자산을 제공하기 위한 사용자 정의 CDN을 사용할 수 있다.

그런 다음 config.app.cdnURL을 사용하여 새 CDN URL에 액세스한다.

// server/api/foo.ts

export default defineEventHandler((event) => {
  const config = useRuntimeConfig()

  // Access cdnURL universally
  const cdnURL = config.app.cdnURL
})

참고) Docs > Guide > Going Further > Runtime Config