NextJS Heroku: переменные env не загружаются

#javascript #heroku #next.js #dotenv

Вопрос:

Я использую NextJS и Heroku.

При загрузке с первого индекса возвращаются данные, которые я извлек в getInitialProps, но в обычной функции я получаю сообщение об ошибке, потому что переменные env отсутствуют.

Когда я перехожу на другую страницу, я получаю ту же ошибку, но при обновлении я вижу данные, полученные в getInitialProps. Но опять же, в обычной функции я получаю ошибку из-за отсутствия переменных env.

Локально это работает. Я пробовал dotenv-webpack, но это не помогает. Я добавил переменные конфигурации в Heroku.

Есть идеи?

это мой next.config.js файл:

 const { parsed: localEnv } = require('dotenv').config()
const webpack = require('webpack')
const Dotenv = require('dotenv-webpack')
const path = require('path')

module.exports = {
    //target: 'serverless',
    webpack(config) {
        config.plugins.push(new webpack.EnvironmentPlugin(localEnv))
        config.node = {fs: "empty"};
        config.plugins = config.plugins || []

        config.plugins = [
            ...config.plugins,

            // Read the .env file
            new Dotenv({
                path: path.join(__dirname, '.env'),
                systemvars: true
            })
        ]

        return config
    },
    publicRuntimeConfig: {
        ADDRESS: process.env.ADDRESS,
        API_TOKEN: process.env.API_TOKEN,
        INFURA_API_KEY: process.env.INFURA_API_KEY
    }
}

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

2. Я использовал опцию Heruko dashboard и использовал ее так, как показано в коде — например: process.env.ADDRESS

3. Но, как я уже сказал, код использует переменные окружения при рендеринге на стороне сервера (первая загрузка индекса и, в целом, каждой страницы после обновления), поэтому проблема, вероятно, не в том, как я устанавливаю переменные конфигурации. При обычной функции (запускаемой нажатием кнопки) я получаю сообщение об отсутствующих переменных, а также после перехода на другую страницу.

Ответ №1:

Получил ответ в next.js страница github: https://github.com/zeit/next.js/issues/6533

Я попробовал несколько разных способов решить эту проблему, которые столкнулись.

Установка переменных среды с помощью dotenv-webpack у меня не сработала. Что сработало, так это настройка env в next.config.js таком виде:

 const { parsed: localEnv } = require('dotenv').config()
const webpack = require('webpack');

const path = require('path')

module.exports = {
    webpack(config) {
        config.plugins.push(new webpack.EnvironmentPlugin(localEnv))
        config.node = {fs: "empty"};
        config.plugins = config.plugins || []

        config.plugins = [
            ...config.plugins,
        ]

        return config
    },
    env: {
        ADDRESS: '0xd6F75293ec795',
        API_TOKEN: 'YUBKzlbA2eFmNbkzk',
        INFURA_API_KEY: '97eb10aac61799f9e865',
        MNEMONIC: 'my not so secret for testing password',
    }
}

1. Фух, рад слышать 🙂

2. это помогло мне добиться развертывания. всем вам по шапке. x

3. Как сделать эту среду специфичной?

4. @KarinC Разве ты не раскрываешь свои секреты с помощью такого подхода? Если только вы не говорите, что у вас нет контроля версий next.config.js , в чем я сомневаюсь, учитывая пользовательские конфигурации, которые у вас там есть.

5. Чтобы предотвратить жесткое кодирование ваших значений, как вы делаете здесь, вы могли бы написать модуль конфигурации во время сборки и импортировать этот модуль сюда.

Ответ №2:

Вот что сработало у меня (в next.config.js ):

 if (process.env.NODE_ENV === 'development') {
  require('dotenv').config()
}

module.exports = {
  env: {
    API_URL: process.env.API_URL,
  }
}

Это делает API_URL доступным как на клиенте, так и на сервере, в средах разработки и производства.