#javascript #node.js #reactjs #variables #environment-variables
#javascript #node.js #reactjs #переменные #переменные среды
Вопрос:
Я относительно новичок в мире веб-разработки, и теперь я пытаюсь понять использование .env file в React JS. Итак, я прочитал несколько статей и посмотрел несколько поясняющих видеороликов. Однако большинство из них были сосредоточены на том, как его использовать, а не на том, что это на самом деле. Правильно ли я понимаю, что основными преимуществами использования переменных среды являются:
1) Они упрощают обслуживание приложений, поскольку все они хранятся в одном файле .env 2) Они не видны пользователям и не отображаются и не загружаются в репозиторий Git
Правильно ли это и есть ли что-нибудь еще, что мне нужно рассмотреть?
Комментарии:
1. Распространенным вариантом использования файлов .env является, как вы намекаете, но не совсем говорите, хранение секретных переменных. Из-за их секретного характера они не должны попадать в какие-либо git-диффы / журналы. Это может быть полезно для того, чтобы сделать код общедоступным, не выдавая секреты организации, или даже для того, чтобы позволить двум разным разработчикам запускать один и тот же код, скажем, с разными учетными данными локальной базы данных.
2.
envдля «среды». Когда вы загружаете приложение со своего персонального ноутбука, вам могут потребоваться переменные, специфичные для вашего ноутбука, его «среды», в отличие от того, когда приложение обслуживается из облака, которые могут иметь разные переменные, например URL сервера api3. Кстати, вы МОЖЕТЕ добавить файл в git, если можете доверить содержимое разработчикам доступа к репозиторию.
Ответ №1:
Они полезны для хранения значений и настроек всего сайта, которые не относятся к состоянию или объявлениям (глубоко) в исходном коде.
Важно знать, что для того, чтобы react мог их использовать, с них нужно начинать REACT_APP_ . Это связано с тем, что среда является средой nodejs, и nodejs будет запрашивать все переменные, если они не начинаются с REACT_APP_
Переменные среды, начинающиеся с REACT_APP_ , внедряются в код приложения во время сборки.
Не храните там никаких секретов (таких как закрытые ключи) в качестве REACT_APP_ переменных! Это откроет их в сборке JS.
В вашем приложении react вы можете получить доступ к переменным следующим образом:
let value = {process.env.REACT_APP_MYVALUE}
В HTML вы можете использовать переменные как таковые:
<title>%REACT_APP_SITE_NAME%</title>
Хорошая краткая информация об использовании create-react-app: https://create-react-app.dev/docs/adding-custom-environment-variables
Ответ №2:
Использование
Переменные среды (.env) используются для хранения конфиденциальной информации или, как следует из названия, информации, ориентированной на среду (в реальном времени, разработка, отладка и т. Д.)
.env файл также хранится внутри .gitignore , поэтому он не передается ни в какие репозитории.
Отслеживание переменных
.env.example это файл, который не хранится .gitignore , но он необходим другим разработчикам, чтобы знать, как и что помещать в их .env . Это выглядит примерно так:
.env.example:
REACT_APP_STRIPE_KEY=
MY_SECRET_KEY=
THIS=
FOO=
BAR=
В основном пустой пример того, что было бы .env . Затем это копируется и заполняется реальными значениями в .env файле, который доступен только для этого разработчика на этом компьютере, и читается локально скриптами, которые затем знают, в каком режиме запускать приложение, подключенное к какой базе данных, с каким паролем и т.д.
Комментарии:
1. Я отменил свой предыдущий комментарий и понизил голос. Я неправильно истолковал ваш пост как REACT_APP_SECRET_KEY, который раскрывает секретный ключ.
2. @Ozone Нет проблем, важно знать, относится ли вопрос среды к его / ее приложению React
Ответ №3:
Создайте файл в корневой папке.Its .env-файл
REACT_APP_(VARIABLE_NAME)=KEY_HERE
Использование:
когда вы добавили переменную в файл .env. Перезапустите приложение.
console.log( process.env.REACT_APP_(VARIABLE_NAME) )
И вашего файла .gitignore добавьте приведенный ниже код
.env