Nuxt 3 — как прокинуть переменные окружения в production?

Question

[un1t]

Nuxt 3-rc6

Локально у меня лежит файлик .env с нужными переменными

nuxt.config.js

export default defineNuxtConfig({
    publicRuntimeConfig: {
        backendUrl: process.env.BACKEND_URL,
    },
    privateRuntimeConfig: {
         secret: 123,
    },

Я предпологал, что на продакшене положу другой .env и все будет работать.

Собираю проект
npm run build

Переменные в продакшене не подхватываются. Остаются перменные из development окружения.

Я нашел это в документации, написано, что .env не подгружается, зато можно передать настройки через переиенные окружения.

However, after your server is built, you are responsible for setting environment variables when you run the server. Your .env file will not be read at this point. How you do this is different for every environment. On a Linux server, you could pass the environment variables as arguments using the terminal DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs. Or you could source your env file using source .env && node .output/server/index.mjs.
Note that for a purely static site, it is not possible to set runtime configuration config after your project is prerendered.

Однако и этот способ тоже не рабтает.

Запуск с помощью команды не приводит к перезаписыванию переменной.

BACKEND_URL=http://mydomain.ru node server/index.mjs

Насколько я вижу из собранного пакета, там нигде не запрашивается переменная окружения BACKEND_URL.

Comments

[WapSter]

Я предпологал, что на продакшене положу другой .env рядом и все будет работать.

как в точности ты его ложишь, его нужно заменять, либо использовать dotenv-flow

[un1t]

WapSter, не важно куда его класть, т.к. в документации написано, что на продакшене он не подхватывается.

[WapSter]

un1t, ну тогда подключай библиотеку выше, я всегда ей пользуюсь, так как в гите лежит env для разработки, а на сервере можно ложить .env.local со своими переменными окружения для прода

[un1t]

WapSter, вы ее подключали именно к nuxt.js?

[WapSter]

un1t, к чему угодно, в том числе и к nuxt

[un1t]

WapSter, к теоретическому "чему-угодно" то понятно как подключить, А вот как подключить конкретно к nuxt 3, не понятно, т.к. nuxt 3 содержит свою логику работы с .env файлами.

[WapSter]

un1t,

import environment from 'dotenv-flow';

environment.config({purge_dotenv: true, silent: true})

const
  baseUrl = process.env.BASE_URL,
  backendOrigin = process.env.BACKEND_ORIGIN,
  browserBackendOrigin = process.env.BROWSER_BACKEND_ORIGIN,
  bridgeOrigin = process.env.BRIDGE_ORIGIN,
  browserBridgeOrigin = process.env.BROWSER_BRIDGE_ORIGIN;

хз в чем сложность

Answer 1

[un1t]

После долгих мучений и чтения документации решил вопрос следующим способом.
В конфиге указываю пустые значения, а в переменных окружения, переменные должны начинаться на NUXT_, NUXT_PUBLIC_ тогда они перезапишут значения.

NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // can be overridden by NUXT_API_SECRET environment variable
    public: {
      apiBase: '', // can be overridden by NUXT_PUBLIC_API_BASE environment variable
    }
  },
})

На деве просто .env файл и в нем перменные с такими префиксами.
На проде свой .env файл, но из него надо загрузить переменные в окружение.
В конфиге systemd это можно сделать через опцию EnvironmentFile.
А просто в баше например можно загрузить из так:
export (xargs < .env)

Как сделать, чтобы на проде использовался файл .env я не разобрался. Если кто подскажет буду рад.

Comments

[Konstantin Kelle]

Привет! Разобрался?

[un1t]

Konstantin Kelle, ответ выше

Answer 2

[Иван]

Windows 11, Nuxt 3.2.2

.env

NUXT_API_SECRET_PATH=Private_api_secret_path
NUXT_API_SECRET_KEY=Private_my_secret_key_123

NUXT_PUBLIC_API_BASE_URL=https://jsonplaceholder.typicode.com
NUXT_PUBLIC_API_BASE_TOKEN=test2323

---
nuxt.config.ts

runtimeConfig: {
        apiSecretPath: 'NUXT_API_SECRET_PATH',
        apiSecretKey: 'NUXT_API_SECRET_KEY',
        public: {
            apiBaseUrl: 'NUXT_PUBLIC_API_BASE_URL',
            apiBaseToken: 'NUXT_PUBLIC_API_BASE_TOKEN',
        }
    },

---
app.vue

<script setup>
const config = useRuntimeConfig()
console.log(config.public.apiBaseUrl)
console.log(config.public.apiBaseToken)
console.log(config.apiSecretPath)
console.log(config.apiSecretKey)
</script>

---
Полностью разобрался в вопросе, протестировал, все работает.