useRuntimeConfig
useRuntimeConfig コンポーザブルを使用してランタイム設定変数にアクセスします。
使用方法
const config = useRuntimeConfig()export default defineEventHandler((event) => {
const config = useRuntimeConfig(event)
})
ランタイム設定の定義
以下の例は、公開APIのベースURLとサーバーでのみアクセス可能な秘密のAPIトークンを設定する方法を示しています。
runtimeConfig 変数は常に nuxt.config 内で定義する必要があります。
export default defineNuxtConfig({
runtimeConfig: {
// プライベートキーはサーバーでのみ利用可能
apiSecret: '123',
// クライアントに公開されるパブリックキー
public: {
apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
}
}
})
サーバーでアクセスする必要がある変数は runtimeConfig 内に直接追加されます。クライアントとサーバーの両方でアクセスする必要がある変数は runtimeConfig.public に定義されます。
ランタイム設定へのアクセス
ランタイム設定にアクセスするには、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 はサーバー側でのみアクセス可能です。
環境変数
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 を設定することでランタイム時に更新できます。
その後、この新しいベースURLに config.app.baseURL を使用してアクセスできます：
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 環境変数を使用します。
その後、新しいCDN URLに config.app.cdnURL を使用してアクセスします。
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