はじめに
nuxt3には、実行時に設定値をロードするための仕組みとしてruntimeConfigというものがある。コンポーネント内からはuseRuntimeConfigや$configで値にアクセスすることができる。サーバサイド（private）、クライアントサイド（frontend）で公開範囲を区別することもできる。本記事では、runtimeConfigの設定方法と使い方についてざっと整理する。
privateとpublic configuration
runtimeConfigの下に定義されているプロパティはprivate、publicやappブロックに定義された値はfrontendに公開される。
import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
runtimeConfig: {
apiKey: process.env.API_KEY, // private
public: {
frontendConfig: process.env.PUBLIC_FRONTEND_CONFIG, // frontendに公開
},
// app: { } // 内部nitro rendererで自動定義 frontendに公開
},
});
.envからの定義を渡す
nuxt.config.tsのruntimeConfigに定義することで利用できるが、よくやる方法として、.envに定義した値をruntimeConfigにセットするというアプローチがあるだろう。以下のような感じだ。
import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
runtimeConfig: {
apiKey: process.env.API_KEY,
public: {
frontendConfig: process.env.PUBLIC_FRONTEND_CONFIG,
},
},
});
この方法でも問題ないが、毎回.envの値をruntimeConfigにセットしない方法もある。次に、.envの特定の値を動的にruntimeConfigに反映する例を見てみる。
.envからの定義を動的に渡す
.envに特定のプリフィックスNUXT_またはNITRO_をつけた値は、runtimeConfigに定義されていればruntimeConfigに動的に設定されるようになっている。なお、この際runtimeConfigのjson構造の階層と合わせてやる必要がある。具体的な例を見てみる。
NUXT_API_KEY=nuxtApiKey NUXT_PUBLIC_FRONTEND_CONFIG=nitroFrontendConfig
この定義を動的に読み込むためのnuxt.config.tsは以下のようになる。
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
runtimeConfig: {
apiKey: '', // 定義していると上書きされる
public: {
frontendConfig: '' // 定義していると上書きされる
}
}
}
コンポーネントでは以下のようにアクセスできるだろう。
<template>
<div>
{{ $config.apiKey }}
{{ $config.public.frontendConfig }}
</div>
</template>
apiKeyはprivateなので見えない。frontendConfigはpublicのためフロントエンドで見える。ssrのレスポンスを見るとwindow.__NUXT__の定義のruntimeConfigプロパティとし見えるのが分かる。
NITRO_とNUXT_の両方が定義されている場合
NITRO_の優先順位が高くなっているので、両方定義されている場合はNITRO_の定義が勝つ。
NUXT_APP_API_KEY=nuxtApiKey # NUXT_よりもNITRO_の方が優先度が高い NITRO_PUBLIC_FRONTEND_CONFIG=nitroFrontendConfig NUXT_PUBLIC_FRONTEND_CONFIG=nuxtFrontendConfig
独自のprefixを指定したい
NUXT_でなく、MYAPP_のような独自のprefixをつけたい場合は、以下のようにnitroのenvPrefixを書き換える。
import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
runtimeConfig: {
apiKey: process.env.API_KEY,
public: {
frontendConfig: "",
},
nitro: {
envPrefix: "MYAPP_",
},
},
});
参考リンク
コメント