Nuxt3でのビルド後の環境変数の適用（node-server）

Nuxt3にはdotenvが組み込まれていて、プロジェクトトップにある.envファイルを読み込み環境変数として使用することができます。

はじめに nuxt3には、実行時に設定値をロードするための仕組みとしてruntimeConfigというものがある。コンポーネント内からはuseRuntimeConfigや$configで値にアクセスすることができる。サーバサイド（priva...

devモード時は気にしませんが、ビルド後に例えばnode-serverで実行するような場合、利用者側でnode-server起動時に環境変数を適用する責任があるようです。

Runtime Config ?? Nuxt Advanced

Nuxt provides a runtime config API to expose configuration and secrets within your application.

どういうことか確認してみます。

環境：nuxt3 rc11、node v16.18.0、npm 8.19.2

本記事作成時、Nuxt3はまだベータリリースのため動作が変わる可能性もあります。

例えば、通常のnode-server向けビルドを見てみます。

NUXT_PUBLIC_APP_NAME="mynuxtapp"

1	NUXT_PUBLIC_APP_NAME="mynuxtapp"

export default defineNuxtConfig({
typescript: {
shim: false,
},
runtimeConfig: {
public: {
appName: "myapp"
}
},
serverHandlers: [
// API handlers with express
{ route: "/server/**", handler: "~/myapi/index.ts" },
],
});

export default defineNuxtConfig({

typescript: {

shim: false,

runtimeConfig: {

public: {

appName: "myapp"

}

serverHandlers: [

// API handlers with express

{ route: "/server/**", handler: "~/myapi/index.ts" },

});

npm run buildすると以下のような実行スクリプトが生成されます。

// 省略
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;
// 省略

// 省略

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を実行すれば良さそうです。

source .env && node .output/server/index.mjs

1	source .env && node .output/server/index.mjs

参考リンク

https://v3.nuxtjs.org/guide/going-further/runtime-config