ランタイム設定
Nuxtは、アプリケーション内で設定とシークレットを公開するためのランタイム設定APIを提供します。
公開
設定と環境変数をアプリの残りの部分に公開するには、nuxt.configファイルでruntimeConfigオプションを使用してランタイム設定を定義する必要があります。
nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
// The private keys which are only available within server-side
apiSecret: '123',
// Keys within public, will be also exposed to the client-side
public: {
apiBase: '/api'
}
}
})
runtimeConfig.publicにapiBaseを追加すると、Nuxtはそれを各ページのペイロードに追加します。サーバーとブラウザの両方で、ユニバーサルにapiBaseにアクセスできます。
const runtimeConfig = useRuntimeConfig()
console.log(runtimeConfig.apiSecret)
console.log(runtimeConfig.public.apiBase)
公開ランタイム設定は、Vueテンプレート内で
$config.publicでアクセスできます。シリアライズ
ランタイム設定は、Nitroに渡される前にシリアライズされます。つまり、シリアライズしてからデシリアライズできないもの（関数、Set、Mapなど）は、nuxt.configで設定しないでください。
nuxt.configからシリアライズできないオブジェクトまたは関数をアプリケーションに渡す代わりに、このコードをNuxtまたはNitroプラグインまたはミドルウェアに配置できます。
環境変数
構成を提供する最も一般的な方法は、環境変数を使用することです。
Nuxi CLIには、開発、ビルド、および生成で
.envファイルを読み取るための組み込みサポートがあります。ただし、ビルドされたサーバーを実行する場合、.envファイルは読み取られません。ランタイム設定の値は、実行時に一致する環境変数によって自動的に置き換えられます。
2つの重要な要件があります
- 必要な変数は、
nuxt.configで定義する必要があります。これにより、任意の環境変数がアプリケーションコードに公開されないようにします。 - 特別に名前が付けられた環境変数のみが、ランタイム設定プロパティをオーバーライドできます。つまり、
NUXT_で始まり、キーとケースの変更を区切るために_を使用する大文字の環境変数です。
runtimeConfigの値のデフォルトを異なる名前の環境変数（たとえば、myVarをprocess.env.OTHER_VARIABLEに設定するなど）に設定すると、ビルド時のみに機能し、ランタイムで壊れます。runtimeConfigオブジェクトの構造に一致する環境変数を使用することをお勧めします。例
.env
NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxt.dokyumento.jp
nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
apiSecret: '', // can be overridden by NUXT_API_SECRET environment variable
public: {
apiBase: '', // can be overridden by NUXT_PUBLIC_API_BASE environment variable
}
},
})
読み取り
Vueアプリ
NuxtアプリのVue部分内では、ランタイム設定にアクセスするためにuseRuntimeConfig()を呼び出す必要があります。
クライアント側とサーバー側で動作が異なります
- クライアント側では、
runtimeConfig.publicのキーのみが利用可能で、オブジェクトは書き込み可能でリアクティブです。 - サーバー側では、ランタイム設定全体が利用可能ですが、コンテキストの共有を避けるために読み取り専用です。
pages/index.vue
<script setup lang="ts">
const config = useRuntimeConfig()
console.log('Runtime config:', config)
if (import.meta.server) {
console.log('API secret:', config.apiSecret)
}
</script>
<template>
<div>
<div>Check developer console!</div>
</div>
</template>
セキュリティに関する注意: ランタイム設定キーをレンダリングしたり、
useStateに渡したりして、クライアント側に公開しないように注意してください。プラグイン
(カスタム)プラグイン内でランタイム設定を使用する場合は、defineNuxtPlugin関数内でuseRuntimeConfig()を使用できます。
plugins/config.ts
export default defineNuxtPlugin((nuxtApp) => {
const config = useRuntimeConfig()
console.log('API base URL:', config.public.apiBase)
});
サーバールート
useRuntimeConfigを使用して、サーバールート内でもランタイム設定にアクセスできます。
server/api/test.ts
export default defineEventHandler(async (event) => {
const { apiSecret } = useRuntimeConfig(event)
const result = await $fetch('https://my.api.com/test', {
headers: {
Authorization: `Bearer ${apiSecret}`
}
})
return result
})
useRuntimeConfigに引数としてeventを渡すのはオプションですが、サーバールートのランタイムで環境変数によってオーバーライドされたランタイム設定を取得するために、渡すことをお勧めします。ランタイム設定の型付け
Nuxtは、unjs/untypedを使用して、提供されたランタイム設定からtypescriptインターフェースを自動的に生成しようとします。
ただし、ランタイム設定を手動で型付けすることも可能です
index.d.ts
declare module 'nuxt/schema' {
interface RuntimeConfig {
apiSecret: string
}
interface PublicRuntimeConfig {
apiBase: string
}
}
// It is always important to ensure you import/export something when augmenting a type
export {}
nuxt/schemaは、エンドユーザーがプロジェクトでNuxtが使用するスキーマのバージョンにアクセスするための便宜として提供されています。モジュール作成者は、代わりに@nuxt/schemaを拡張する必要があります。