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

Question

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

Что я сделал:

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

Вы должны префикс ваших переменных окружения с REACT_APP_, Смотрите здесь.

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

Так что вместо того, чтобы просто API_AUTH это было бы REACT_APP_API_AUTH вместо.

И это будет выставлено вашему приложению как process.env.REACT_APP_API_AUTH,

Answer 2

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)
    ]
  };