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

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

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

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

Runtime Config ?? Nuxt Advanced v4

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"

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

上記ファイル内のコードを見ると、_runtimeConfigの内容が、overrideConfig関数で上書きされ、最終的にuseRuntimeConfigの戻り値となっていることが分かります。.envの内容を適用するには、実行時に.envをロードし環境変数として定義してあげる必要があることが分かります。

よって、例えばLinux環境のbashでは、以下のようにして環境変数を読み込みませてnodeを実行すれば良さそうです。

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

参考リンク

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