Въведение в променливите на околната среда и как да ги използваме

Конфигурация за отделяне от приложението

Снимка на Antoine Dautry на Unsplash

Какво представляват променливите на околната среда?

Два основни компонента на всеки език за компютърно програмиране са променливи и константи. Подобно на независими променливи в математическо уравнение, те приемат стойности, които променят резултатите от програмата. Променливите и константите представляват уникални места в паметта, съдържащи данни, които програмата използва в своите изчисления. Разликата между двете е, че стойностите на променливите могат да се променят по време на изпълнение, докато постоянните стойности не могат да бъдат преназначени.

Променлива среда е променлива, чиято стойност е зададена извън програмата, обикновено чрез функционалност, вградена в операционната система или микросервиз. Променлива среда се състои от двойка име / стойност и всяко число може да бъде създадено и достъпно за справка в даден момент.

# Набор от данни за метеорит от Nasa Open Data Portal
REACT_APP_METEORITE_LANDING_HOMEPAGE = "https://data.nasa.gov/Space-Science/Meteorite-Landings/gh4g-9sfh"
REACT_APP_METEORITE_STRIKE_DATASET = "https://data.nasa.gov/resource/y77d-th95.json"

По време на инициализацията на приложенията те се зареждат в process.env и се осъществява достъп чрез суфиксиране на името на променливата на околната среда, както е показано по-долу.

донесе (process.env.REACT_APP_METEORITE_STRIKE_DATASET)
.then ((отговор) => {
  връщане отговор.json ();
})
.then ((удариJSON) => {
  this.setState ({meteoriteStrikes: удариJSON});
  this.setState ({isDataLoaded: true});
});

По време на изпълнение, препратката към името на променлива среда се заменя с текущата й стойност. В този случай process.env.REACT_APP_METEORITE_STRIKE_DATASET се заменя със стойността му „https://data.nasa.gov/resource/y77d-th95.json“.

Основният случай на използване на променливи от средата е ограничаване на необходимостта от промяна и повторно пускане на приложение поради промени в конфигурационните данни. От горния пример, когатоREACT_APP_METEORITE_STRIKE_DATASET URL адресът се променя, няма нужда от промени в изходния код, тестване и внедряване на модифицираното приложение.

Промяната и освобождаването на код на приложение е сравнително сложна и увеличава риска от въвеждане на нежелани странични ефекти в производството. Когато URL адресът се дефинира от променлива среда вместо приложението, процесът на промяна се състои в проверка на валидността на новия URL адрес, актуализиране на съответната променлива среда с помощта на команда на операционна система или актуализиране на конфигурационен файл и тестване на засегнатите функции на приложенията за да се гарантира, че приложението продължава да работи според очакванията.

Случаите на използване за променливи на средата включват, но не се ограничават до данни като:

  • Режим на изпълнение (например производство, разработка, поставяне и т.н.)
  • Имена на домейни
  • URL адрес на API / URI
  • Публични и частни ключове за удостоверяване (защитени само в сървърни приложения)
  • Групови пощенски адреси, като тези за маркетинг, поддръжка, продажби и др.
  • Имена на акаунт за услуга

Това, което имат общо, са техните стойности на данни, които се променят рядко и логиката на приложението ги третира като константи, а не като променливи променливи.

След това, нека да разгледаме как да използваме променливите на средата, използвайки естествената операционна система, NPM пакета dotenv и webpack.

Променливи на околната среда в NodeJS

Фигура 1 - Променливи на средата на ОС

Използването на променливи на околната среда в задните приложения разчита на команди на операционната система за определяне на променливата на средата и нейната стойност. Системният администратор може да ги дефинира с помощта на интерфейс на командния ред, но обикновено има по-голям смисъл да го правите чрез скрипт на обвивка. Променливите на средата обикновено не са достъпни в глобален мащаб в ОС, обикновено са специфични за сесията. Например, използвайки командния ред на Linux:

setenv REACT_APP_METEORITE_LANDING_HOMEPAGE = "https://data.nasa.gov/Space-Science/Meteorite-Landings/gh4g-9sfh"

По време на изпълнение, NodeJS автоматично зарежда променливи на околната среда в process.env, за да ги направи достъпни за приложението. Например, извличане (process.env.REACT_APP_METEORITE_STRIKE_DATASET).

Управлението и манипулирането на променливите на средата се различават от операционната система до операционната система. Също така, това варира в различни среди на микросервизи, като Heroku, където управлението на променливите на средата се извършва с помощта на административен панел. Поради това разбирането на специфичните за платформата фактори е от съществено значение, преди да използвате променливи на средата във вашето приложение.

Един от начините за минимизиране на тези различия е използването на кръстосания NPM пакет, който предоставя независима от операционната система команда, съвместима с POSIX, за задаване на променливи на околната среда.

Променливи на околната среда в пакета dotenv

Поддръжката за използване на променливи на средата в приложения за интерфейс не е функция „извън кутията“ нито на браузъра, нито на Javascript; е необходим пакет като dotenv, за да го активирате. За запис, както приложенията за фронт, така и за гръб могат да използват dotenv.

Използването на този пакет е толкова лесно, колкото,

импортиране на dotenv от 'dotenv';
dotenv.config ();
console.log (process.env.REACT_APP_METEORITE_STRIKE_DATASET);

Тази техника екстернализира данните, като ги премества от изходния код в променливи на околната среда във .env файл. Добавянето на името на .env файла към .gitignore не позволява на git push командите да го качват в репото на GitHub, където за обществени репости ще бъде достъпно за всеки.

Фигура 2 - .env Използване на файл

Променливите на средата в .env се форматират като име = стойност, редовете, започващи с #, се третират като коментари, а празните редове се игнорират. Например,

# Набор от данни за метеорит от Nasa Open Data Portal
REACT_APP_METEORITE_LANDING_HOMEPAGE = "https://data.nasa.gov/Space-Science/Meteorite-Landings/gh4g-9sfh"
REACT_APP_METEORITE_STRIKE_DATASET = "https://data.nasa.gov/resource/y77d-th95.json"

Въпреки това, много популярни пакети като Create React App (react-script), Gatsby, GraphQL CLI, Node Lambda и други вече включват dotenv. Ако вече използвате един от тези пакети, dotenv може вече да е достъпен за използване във вашето приложение. Например, кодовите фрагменти по-горе са от приложение, генерирано от Create React App, което изисква променливите на средата да бъдат префиксирани от REACT_APP_.

В случай на Create React App, не е необходимо да се обаждате dotenv.config (), тъй като node_modules / react-script / config / env.js автоматично попълва process.env със съдържанието на .env файла при стартиране на приложението. За пример на Create React App вижте репото на Meteorite Explorer в GitHub.

Тъй като средата на браузъра не е защитени приложения, трябва да се внимава да не се излага чувствителна информация, като например тайните на приложението. За допълнителна информация как да защитите фронтенс срещи, вижте „Защита на активите на приложенията: Как да защитите вашите тайни“.

Променливи на околната среда в webpack

webpack е пакет, който преобразува, пакетира или пакетира много различни модули, ресурси и активи в приложение заедно за използване в браузър. Една често срещана употреба на webpack е да подготви приложение за внедряване на производството. Например, скриптът за създаване на React App използва webpack, за да създаде директорията за сглобяване, съдържаща производствената версия на приложение.

Въпреки че webpack внедрява поддръжка за използване на променливи в средата, това е опция на командата webpack. Например,

webpack --env.NODE_ENV = местно

Множество променливи на средата се поддържат чрез посочване на повече от една опция --env в командата webpack. Те са посочени в конфигурационните файлове на уебпакета (например, webpack.config.js) като env. суфиксиран от името на променлива среда. Например console.log (env.NODE_ENV).

конфигурационните файлове на webpack могат също да препращат променливи на средата, дефинирани от операционната система, използвайки process.env, както всеки друг Javascript модул. Помислете за този пример от webpack.config.prod.js в Създаване на реактивно приложение.

// Източните карти са тежки на ресурсите и могат да причинят проблеми с паметта за големи изходни файлове.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP! == 'false';

Опаковане

„Абстракцията вкарва света в по-сложни, променливи отношения; тя може да извлече красота, алтернативни топографии, грозота и интензивни актуалности от привидното ничие. ”- Джери Салц

Използването на променливи от средата е една техника за улесняване на конфигурирането на приложението ви чрез отделяне на рядко променящи се данни от вашия код. Колкото и проста да е тази техника, използването й се влияе от съображения като типа на приложението (frontend или backkend) и операционната среда (операционна система или микросервиз).

Използването на променливи на средата е лесно, но разбирането на техните нюанси и възможността за ефективно и сигурно използване са един от факторите, които отличават опитни уеб разработчици освен неопитни разработчици. Както при всяка технология, трикът не е да знаем как да използваме нещо, а да знаем кога да го използваме.