Nuxt3のruntimeConfigの値を.env.devや,env.stgで切り分けたい

Question

環境

Nuxt: 3.0.0
node: v18.12.1
npm: 8.19.2

質問

Nuxt3で環境ごとに設定値を変える方法を公式がdotenvを紹介して載せています。

https://nuxt.com/docs/guide/going-further/runtime-config/

こちらを試したところ、実行時に環境変数を直接セットすればnuxt.config.tsの設定値は上書きされましたが、envファイルをsourceする方法だと値が上書きされませんでした。

▼nuxt.config

export default defineNuxtConfig({
  runtimeConfig: {
    frontenv: 'local',

▼.env.dev

NUXT_FRONTENV=dev

つまり、デフォルトで local がセットされた frontend 環境変数を、.env.devファイルをsourceして実行したら dev に上書きされて欲しいという検証になります。

▼package.json

"scripts": {
    "build": "nuxt build",
    "start:dev": "source ./.env.dev && node .output/server/index.mjs"
  },

▼検証コマンド

npm run build
npm run start:dev

▼これはOK => console.log(useRuntimeConfig().frontenv)で dev が表示される

"start:dev": "NUXT_FRONTENV=dev node .output/server/index.mjs"

▼これはNG => console.log(useRuntimeConfig().frontenv)で local が表示される

"start:dev": "source ./.env.dev && node .output/server/index.mjs"

こちら何か原因などわかりますでしょうか？

Comments

[yuma.inaura]

configに固定値を書くのではなく、はじめから 環境変数を参照するようにするのはダメなんでしょうか？

[yu-na]

書かなくても問題ないです。
ですが、その場合も状況は変わらず、source指定だと `undefined` になります。

どうもenvファイルがsourceされていないような挙動に思えまして。

Answer 1

sourceだと反映されないので、catした変数をexportすることにしました。

"start:dev": "export `cat ./.env.dev` && node .output/server/index.mjs",

他にいい方法があれば皆さんぜひ教えてください。

Answer 2

.env を直接 source で読み込んでも環境変数ではなく単に変数として解釈されてしまうんじゃないでしょうか

ENVコマンドを使うと動作が分かりやすいかと思います

  "scripts": {
    "foo": "XXX=YYY ENV"
  },

  "scripts": {
    "foo": "XXX=YYY && ENV"
  },

  "scripts": {
    "foo": "export XXX=YYY && ENV"
  },