Добавление файла .env в React Project

93

Я пытаюсь скрыть свой API-ключ на тот момент, когда я фиксируюсь на github, и я просмотрел форум для руководства, особенно следующий пост:

Как скрыть ключ API в приложении create-response-app?

Я внес изменения и перезапустил пряжу. Я не уверен, что делаю неправильно - я добавил .envфайл в корень своего проекта (я назвал его process.env) и в файл, который только что поместил REACT_APP_API_KEY = 'my-secret-api-key'.

Я думаю, что это может быть способ добавления ключа к my fetchв App.js, и я пробовал несколько форматов, в том числе без использования литерала шаблона, но мой проект все равно не компилируется.

Буду признателен за любую оказанную помощь.

performSearch = (query = 'germany') => {
    fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`)
    .then(response => response.json())
    .then(responseData => {
        this.setState({
            results: responseData.results,
            loading: false
        });
     })
     .catch(error => {
            console.log('Error fetching and parsing data', error);
     });
}

Бьянка М
источник
вместо того, чтобы process.envназывать его .env.local or .env.process и хранить вне каталога src
RIYAJ KHAN
1
Привет, @RIYAJKHAN, я изменил файл на .env.local, и он определенно находится вне каталога src, но я все еще получаю REACT_APP_API_KEY is not defined: /
Bianca M
2
Для меня это было решено просто закрыть терминал, на котором запущен мой локальный сервер разработки, и перезапустить npm run start.
n00bAppDev
3
Вы не можете скрыть секреты в приложении React. См.
Stackoverflow.com/a/46839021/4722345
5
НЕ используйте это для хранения секретов. Из документов ...WARNING: Do not store any secrets (such as private API keys) in your React app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
Nishant Mehta

Ответы:

110

4 шага

  1. npm install dotenv --save

  2. Затем добавьте следующую строку в свое приложение.

    require('dotenv').config()

  3. Затем создайте .envфайл в корневом каталоге вашего приложения и добавьте в него переменные.

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'
  1. Наконец, добавьте .envв свой .gitignoreфайл, чтобы Git игнорировал его и никогда не попадал на GitHub.

Если вы используете приложение create-react-app, вам нужны только шаги 3 и 4, но имейте в виду, что переменная должна начинаться с того, REACT_APP_чтобы она работала.

Ссылка: https://create-react-app.dev/docs/adding-custom-environment-variables/

Примечание - Необходимость перезагрузки приложения после добавления переменной в .env файле.

Ссылка - https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

Tarzen Chugh
источник
36
необходимо перезапустить приложение после добавления переменной в файл .env. используйте «REACT_APP_» перед именем переменной, если вы создаете приложение для реагирования с помощью «create-response-app».
викаш
@tarzen chugh, что, если я, например, развертываю свое приложение на AWS. Поскольку .env является частью gitignore, разве он не будет проигнорирован? как я могу включить его в производство?
user2763557
2
куда добавить require('dotenv').config()? какой файл?
Актейфан, 03 фев.2020,
1
@aqteifan: Вам не нужно добавлять этот фрагмент, но тогда именование файлов .ENV играет жизненно важную роль
Протестировано
1
@ user2763557 шаблон, который я использую, - это создать .env.exampleфайл, в котором выложены определения ключей env. Затем вы можете скопировать .env.exampleи создать .envфайл (в стадии разработки и производства), содержащий действительные значения, например, ключи, базовые URL-адреса и т. Д. Вы должны добавить .envфайл в .gitignore.
Адис Азхар
87

Так что я новичок в React и нашел способ сделать это.

Это решение не требует дополнительных пакетов.

Шаг 1 ReactDocs

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

1.1 создать Root / .env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

Важные примечания, он ДОЛЖЕН начинаться с REACT_APP_

1.2 Доступ к переменной ENV

#App.js file or the file you need to access ENV
<p>print env secret to HTML</p>
<pre>{process.env.REACT_APP_SECRET_NAME}</pre>

handleFetchData() { // access in API call
  fetch(`https://awesome.api.io?api-key=${process.env.REACT_APP_SECRET_NAME}`)
    .then((res) => res.json())
    .then((data) => console.log(data))
}

1.3 Проблема со сборкой Env

Итак, после того, как я сделал шаг 1.1 | 2, он не работал, тогда я обнаружил вышеуказанную проблему / решение. React читает / создает env, когда он собран, поэтому вам нужно запускать npm run start каждый раз, когда вы изменяете файл .env, чтобы переменные обновлялись.

T04435
источник
7
На мой взгляд, это правильный ответ! Никаких дополнительных пакетов не требуется, и правильный способ React для импорта переменных среды. Другие способы будут работать, но зачем добавлять пакет и конфигурацию кода, когда это уже сделано за вас? Отличный ответ!
ryanm
12
Мне не хватало этого REACT_APP_спасибо. Никто об этом не упомянул.
rotimi-best
У меня это почему-то не сработало. Я получаюundefined
Si8
@ Si8 не могли бы вы рассказать об ошибке / процессе. Какой шаг вы получили undefined, перезапустили ли вы приложение после добавления новой переменной в .env, см. 1.3
T04435
1
Все перепробовала. process.env.REACT_APP_API_KEYговорит undefined.
Мишал Резене,
36

Сегодня есть более простой способ сделать это.

Просто создайте файл .env.local в корневом каталоге и установите там переменные. В твоем случае:

REACT_APP_API_KEY = 'my-secret-api-key'

Затем вы вызываете его в своем js-файле таким образом:

process.env.REACT_APP_API_KEY

React поддерживает переменные среды, так как response-scripts@0.5.0. Для этого вам не нужен внешний пакет.

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

* примечание: я предлагаю .env.local вместо .env, потому что приложение create-response-app добавляет этот файл в gitignore при создании проекта.

Приоритет файлов:

npm start: .env.development.local, .env.development, .env.local, .env

npm run build: .env.production.local, .env.production, .env.local, .env

npm test: .env.test.local, .env.test, .env (примечание .env.local отсутствует)

Подробнее: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Пабло
источник
Правильное название помогло мне. Я использовал .env.dev, а React вернулся к .env, поскольку он искал .env.development
Omnibyte
26

Пользователи Webpack

Если вы используете webpack, вы можете установить и использовать dotenv-webpackплагин, для этого выполните следующие действия:

Установить пакет

yarn add dotenv-webpack

Создать .envфайл

// .env
API_KEY='my secret api key'

Добавить в webpack.config.jsфайл

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

Используйте его в своем коде как

process.env.API_KEY

Для получения дополнительной информации и информации о конфигурации посетите здесь

Амину Кано
источник
если вы используете webpack-devserver, вы не увидите изменений, пока не перезапустите его.
Исаак Пак
Для меня это было лучшим решением. Благодарю. Одно замечание: я использую рендеринг на стороне сервера, поэтому мне пришлось обновить оба файла webpack (клиент тоже).
Хорхе Маурисио
@Aminu Kano, не могли бы вы объяснить мне, в чем смысл использования этого подхода, если ключ api все еще отображается, если я просматриваю файл bundle.js в Интернете в источниках?
Линас М.
@LinasM. да, конечно, но что вы подразумеваете под "онлайн"?
Амину Кано
1
@AminuKano, да, это очень четко объяснило суть. Спасибо
Линас М.
10

1. Создайте файл .env в корневой папке.

некоторые источники предпочитают использовать .env.developmentи , .env.productionно это не обязательно.

2. Имя вашей ПЕРЕМЕННОЙ -должно- начинаться с REACT_APP_YOURVARIABLENAME.

кажется, что если ваша переменная среды не запускается таким образом, у вас будут проблемы

3. Включите вашу переменную

чтобы включить переменную среды, просто добавьте свой код process.env.REACT_APP_VARIABLE

Вам не нужно устанавливать какие-либо внешние зависимости

Карлос
источник
Я делаю то же самое, но в консоли отображается undefined
ПРАДИП ГОРУЛЬ 08
1
Если вы получаете значения undefined, перекомпилируйте снова.
аноним
после перекомпиляции все еще остается неопределенным. console.log('process', process.env.REACT_APP_BASE_URL);
Санат Гупта
8

Вам необходимо установить npm install env-cmd

Сделайте .env в корневом каталоге и обновите его следующим образом. & REACT_APP_ - обязательный префикс для имени переменной.

REACT_APP_NODE_ENV="production"
REACT_APP_DB="http://localhost:5000"

Обновить package.json

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "env-cmd react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
Анкит Кумар Раджпут
источник
7
  1. Установить dotenvкак devDependencies:
npm i --save-dev dotenv
  1. Создайте .envфайл в корневом каталоге:
my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md
  1. Обновите .envфайл, как показано ниже, и REACT_APP_ - обязательный префикс для имени переменной.
REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY
  1. [ Необязательно, но хорошая практика ] Теперь вы можете создать файл конфигурации для хранения переменных и экспортировать переменную, чтобы использовать ее из других файлов.

Например, я создал файл с именем base.jsи обновил его, как показано ниже:

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;
  1. Или вы можете просто вызвать переменную окружения в своем JS-файле следующим образом:
process.env.REACT_APP_BASE_URL
Фатема Т. Зухора
источник
Как отличить среду разработки от среды разработки при использовании одного .envфайла? Им известны нам нужно создавать .env.developmentи .env.prodфайлы, но как мы различаем между ними , используя свой метод?
ameyaraje
@ameyaraje По сути, мы игнорируем .envфайл в нашем .gitignore. Итак, при развертывании мы просто копируем .envфайл на наш сервер и просто меняем BASE_URL и другие необходимые значения. Таким образом, когда ему нужно развернуть последний код, мы просто извлекаем из мастера git и развертываем его. Мы не думаем об этом, .envпоскольку игнорируем его и устанавливаем на нашем сервере в самом начале. Благодаря!
Fatema T. Zuhora
process.env.REACT_APP_API_KEY не дает значение, показывающее неопределенное. Я остановил сервер и перезапустил его с помощью npm start
vikramvi
@vikramvi Вы помещаете значение в переменную с таким же именем REACT_APP_BASE_URLв файле .env?
Фатема Т. Зухора
@ FatemaT.Zuhora, это была моя проблема, я по ошибке поместил .env в дочерний каталог, вместо того, чтобы поместить его в корневой каталог
vikramvi 08
2

Если вы получаете значения как undefined, то вам следует рассмотреть возможность перезапуска сервера узла и повторной компиляции.

аноним
источник