Nuxt3にはdotenvが組み込まれていて、プロジェクトトップにある.envファイルを読み込み環境変数として使用することができます。
Nuxt3のruntimeConfigで環境変数を設定する
はじめに nuxt3には、実行時に設定値をロードするための仕組みとしてruntimeConfigというものがある。コンポーネント内からはuseRuntimeConfigや$configで値にアクセスすることができる。サーバサイド（priva...
debug-life.net
2022.07.21
devモード時は気にしませんが、ビルド後に例えばnode-serverで実行するような場合、利用者側でnode-server起動時に環境変数を適用する責任があるようです。
Runtime Config · Nuxt Advanced
Nuxt provides a runtime config API to expose configuration and secrets within your application.
v3.nuxtjs.org
どういうことか確認してみます。
環境：nuxt3 rc11、node v16.18.0、npm 8.19.2
本記事作成時、Nuxt3はまだベータリリースのため動作が変わる可能性もあります。
例えば、通常のnode-server向けビルドを見てみます。
|
1 |
NUXT_PUBLIC_APP_NAME="mynuxtapp" |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
export default defineNuxtConfig({ typescript: { shim: false, }, runtimeConfig: { public: { appName: "myapp" } }, serverHandlers: [ // API handlers with express { route: "/server/**", handler: "~/myapi/index.ts" }, ], }); |
npm run buildすると以下のような実行スクリプトが生成されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// 省略 const _runtimeConfig = {"app":{"baseURL":"/","buildAssetsDir":"/_nuxt/","cdnURL":""},"nitro":{"routes":{},"envPrefix":"NUXT_"},"public":{"appName":""}}; const ENV_PREFIX = "NITRO_"; const ENV_PREFIX_ALT = _runtimeConfig.nitro.envPrefix ?? process.env.NITRO_ENV_PREFIX ?? "_"; const getEnv = (key) => { const envKey = snakeCase(key).toUpperCase(); return destr(process.env[ENV_PREFIX + envKey] ?? process.env[ENV_PREFIX_ALT + envKey]); }; function isObject(input) { return typeof input === "object" && !Array.isArray(input); } function overrideConfig(obj, parentKey = "") { for (const key in obj) { const subKey = parentKey ? `${parentKey}_${key}` : key; const envValue = getEnv(subKey); if (isObject(obj[key])) { if (isObject(envValue)) { obj[key] = { ...obj[key], ...envValue }; } overrideConfig(obj[key], subKey); } else { obj[key] = envValue ?? obj[key]; } } } overrideConfig(_runtimeConfig); const config = deepFreeze(_runtimeConfig); const useRuntimeConfig = () => config; // 省略 |
上記ファイル内のコードを見ると、_runtimeConfigの内容が、overrideConfig関数で上書きされ、最終的にuseRuntimeConfigの戻り値となっていることが分かります。.envの内容を適用するには、実行時に.envをロードし環境変数として定義してあげる必要があることが分かります。
よって、例えばLinux環境のbashでは、以下のようにして環境変数を読み込みませてnodeを実行すれば良さそうです。
|
1 |
source .env && node .output/server/index.mjs |
コメント