useRuntimeConfig
使用法
<script setup lang="ts">
const config = useRuntimeConfig()
</script>
export default defineEventHandler((event) => {
const config = useRuntimeConfig(event)
})
ランタイム設定の定義
以下の例では、公開 API のベース URL と、サーバーでのみアクセス可能な秘密 API トークンを設定する方法を示しています。
runtimeConfig 変数は常に nuxt.config 内で定義する必要があります。
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 で定義されます。ランタイム設定へのアクセス
ランタイム設定にアクセスするには、useRuntimeConfig() コンポーザブルを使用できます
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 ファイル内に環境変数を設定して、開発およびビルド/生成中にアクセスできるようにすることができます。
NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"
NUXT_API_SECRET = "123"
.env ファイル内で設定された環境変数には、開発およびビルド/生成中に Nuxt アプリで process.env を使用してアクセスします。.env は使用されません。app 名前空間
Nuxt は、baseURL や cdnURL などのキーを持つランタイム設定で app 名前空間を使用します。環境変数を設定することで、実行時にこれらの値をカスタマイズできます。
app 内に追加のキーを導入しないでください。app.baseURL
デフォルトでは、baseURL は '/' に設定されています。
ただし、baseURL は、NUXT_APP_BASE_URL を環境変数として設定することで、実行時に更新できます。
次に、config.app.baseURL を使用して、この新しいベース URL にアクセスできます
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 にアクセスします。
export default defineEventHandler((event) => {
const config = useRuntimeConfig(event)
// Access cdnURL universally
const cdnURL = config.app.cdnURL
})