Не удается получить доступ к ключу переменной внутри .env (пакет React dotenv)

Question

Итак, я пытаюсь понять, как использовать .env для защиты моего ключа API и данных для аутентификации при входе в систему. Я следил за процессом пакета dotenv и stackoverflow ответ здесь .

Что я сделал:

1. Я установил пакет dotenv

2. В свою корневую папку я добавил .env только с одной строкой:

API_AUTH=http://myapilink.com

3. В моем App.js я добавил следующую строку:

require('dotenv').config()
console.log(process.env.API_AUTH)

Однако console.log возвращает undefined, почему? Что я пропустил?

Answer 1

Dotenv работает только на стороне сервера. Требуется среда для хранения переменных. Здесь мы извлекаем содержимое файла .env, уменьшаем его до объекта и передаем его в DefinePlugin Webpack, что позволяет нам использовать его в дальнейшем (process.env.API_AUTH):

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
  const env = dotenv.config().parsed,
    envKeys = Object.keys(env).reduce((prev, next) => {
      prev[`process.env.${next}`] = JSON.stringify(env[next]);
      return prev;
    }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };

Answer 2

Вы должны добавить к своим переменным среды префикс REACT_APP_. Смотри здесь .

Примечание : необходимо создать пользовательские переменные среды, начинающиеся с REACT_APP_. Любые другие переменные, кроме NODE_ENV, будут игнорироваться до избегайте случайного раскрытия секретного ключа на машине, который может иметь то же имя. Изменение любых переменных среды потребует перезапустить сервер разработки, если он работает.

Так что вместо API_AUTH вместо этого будет REACT_APP_API_AUTH.

И оно будет отображаться в вашем приложении как process.env.REACT_APP_API_AUTH.