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

Большинство из нас, разработчиков Front-End / React, не знают об использовании переменных среды в наших клиентских проектах. Вы говорите «Я даже не знаю, что это за хрень?», так что давайте начнем с разработчика :)

В этой статье вы можете прочитать:

- Что такое переменная среды

- Как это может решить большую проблему в масштабных интерфейсных проектах.

- Пользовательские переменные среды в приложении create-response-app и их наиболее важное использование там

Что такое переменная среды?

Переменная среды, как это совершенно очевидно, представляет собой переменную, которая может иметь значение, но ее значение хранится вне нашего проекта, в среде, в которой работает проект. Эта среда может быть ОС, сервером или любой микрослужбой.

Использование

Конфигурация приложения (HTTP-порт и адрес, через который обслуживается проект)
расположение статических файлов
Конечные точки других внешних сервисов
информация о подключении к хранилищу (имя базы данных,…)

Наиболее частая проблема в масштабируемых Front-End проектах

Поскольку мы работаем над масштабным проектом в масштабной компании, довольно странно иметь каждый вызов API, содержащий конечную точку сервера!
Если вы не придерживаетесь какой-либо архитектуры в своем проекте, переменные среды могут вам здесь помочь.

Теперь представьте, что нужно подключиться к двум различным серверам. Промежуточный сервер для целей разработки и тестирования и производственный сервер, который является сервером, к которому подключены реальные пользователи. Упс ... Это сложно? Не волнуйся!

Переменные среды в приложении create-react-app

Большинство разработчиков React в наши дни используют приложение create-react-app для своих проектов. Само приложение Create-react-app имеет некоторые переменные среды по умолчанию для некоторой конфигурации проекта React.
Самая известная переменная среды в приложении create-response-app - NODE_ENV.

NODE_ENV имеет три разных значения для разделения рабочей среды, среды разработки и тестирования.

при запуске npm значение NODE_ENV - «разработка»
в npm test это значение «test»
и, наконец, в npm run build это значение равно «production»

Помните, что значение переменной среды всегда является строкой.

NODE_ENV нельзя изменить вручную. Это сделано для предотвращения ошибочного изменения среды производства и разработки.

Итак, как мы читали выше, мы можем включать / отключать некоторые части нашего проекта в зависимости от среды, в которой мы его запускаем.

Но это не совсем то, что нам нужно. Предположим, нам нужно запустить npm start в производственной среде. Или нам нужно опубликовать промежуточную сборку нашего проекта. Здесь мы можем попробовать некоторые настраиваемые переменные среды в приложении create-response-app.

Пользовательские переменные среды в приложении create-react-app

У нас могут быть некоторые пользовательские переменные среды, чтобы настроить наше приложение так, как мы хотим (определение различных конечных точек промежуточного и производственного этапов и…).

Нам нужен файл .env для записи в него переменных среды. Мы помещаем его рядом с package.json в корневой папке проекта.

├── README.md
├── node_modules
├── package.json
├── .env
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Теперь внутри этого файла .env мы можем писать собственные переменные среды.

Обратите внимание, что пользовательские переменные среды должны иметь префикс REACT_APP_. Любые другие переменные среды без этого префикса можно игнорировать в create-response-app.

REACT_APP_API_ENDPOINT = https://api.test.com

Также обратите внимание, что значения (которые являются строками) не требуют кавычек, если в строке нет пробела.

Как использовать эти переменные среды внутри React

Переменные внутри этого файла .env доступны через объект process.env в JS, который представляет собой глобальный объект, предоставляемый средой, с которой вы работаете. на, через NodeJs.

Помните, что до тех пор, пока в браузере нет NodeJ, для этого используется WebPack или другие Js Bundler.

Теперь давайте посмотрим, как мы можем получить доступ к переменной среды в нашем проекте React. Учтите, что мы используем axios для отправки HTTP-запросов:

let serverURL = process.env.REACT_APP_API_ENDPOINT;
axios.get(serverURL)
  .then(function (response) {
    // handle success
  })
  .catch(function (error) {
    // handle error
  });

И после сборки проекта сборщик заменит первую строку следующей строкой:

let serverURL = "https://api.test.com";

Итак, мы на полпути к разделению промежуточных и производственных конечных точек в проекте. Потому что теперь вызов API не зависит от определенного URL-адреса.

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

Теперь, когда мы узнали, как использовать переменные среды в React, давайте посмотрим, как мы можем иметь разные конечные точки / конфигурации в разных средах, таких как промежуточная и производственная.

Для этого нам понадобится еще один файл .env для новых конфигов. Итак, давайте дадим нашим файлам .env собственные имена:

.env.production для производственных конфигураций
.env.staging для промежуточных конфигураций

#This is .env.production file
REACT_APP_ENVIRONMENT = production
REACT_APP_REST_ENDPOINT = https://api-production.test.com
REACT_APP_SOCKET_ENDPOINT = https://socket-production.test.com

Комментарии сопровождаются # в файлах . env.

#This is .env.staging file
REACT_APP_ENVIRONMENT = staging
REACT_APP_REST_ENDPOINT = https://api-staging.test.com
REACT_APP_SOCKET_ENDPOINT = https://socket-staging.test.com

Как видим, имена переменных в обоих файлах одинаковы. И только значения одной и той же переменной отличаются. Таким образом, это может помочь нашему приложению React избавиться от операторов if при отправке HTTP-запроса.

Теперь мы должны указать нашему серверу узла прочитать один из этих двух файлов, пока он хочет запустить проект.

Запустите npm start на основе среды

Для этого нам понадобится пакет npm под названием env-cmd, который сообщает нашим сценариям реакции, что нужно запустить проект с промежуточной или производственной конфигурацией.

После установки env-cmd нам нужно изменить сценарии реакции в файле package.json:

"scripts": {
  "start:staging": "env-cmd .env.staging react-scripts start",
  "start:production": "env-cmd .env.production react-scripts start",
  "build:staging": "env-cmd .env.staging react-scripts build",
  "build:production": "env-cmd .env.production react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

А для запуска проекта мы должны запустить npm run start:staging и npm run start:production вместо старой команды npm start.

Что можно и чего нельзя

Лучше не хранить файлы .env в элементах управления исходным кодом, так как это может привести к утечке ваших конфигураций / конечных точек в проектах с открытым исходным кодом.
Но чтобы избежать недоразумений, вы можете опубликовать файл . Файл env.sample, включающий имена переменных с описанием того, для чего он используется:

#This is .env.sample file
REACT_APP_ENVIRONMENT = "staging or production"
REACT_APP_REST_ENDPOINT = "Your Rest Endpoint will come here"
REACT_APP_SOCKET_ENDPOINT = "Your Socket Endpoint will come here"
#You should have 2 different files, .env.production and .env.staging
#with the same variables and different values

Всегда не забывайте проверять переменную среды и ее значение, потому что, если приложение React не может найти истинную переменную среды, это не повлияет на процесс запуска приложения, и вы можете столкнуться с ошибкой во время выполнения.
Также изменение любой переменной среды требует перезапуска сервера узла, чтобы принять новое значение.
Обратите внимание, что пока приложение create-response-app объединяет ваше приложение, в папке сборки нет переменных среды.
Это связано с тем, что все они заменяются своими значениями. Поэтому НЕ безопасно хранить секретные значения в переменных среды с помощью интерфейсной веб-разработки. (Хотя Back-End-разработчики обычно хранят там ключи API).
Если вы хотите это сделать, у вас может быть SSR с вашим приложением React, чтобы переменные среды заменялись в реальном времени, пока приложение Бег. Подробнее здесь.
Как уже упоминалось, неплохо игнорировать некоторые части вашего приложения, которые не нужны в конкретной среде. Например, вы можете игнорировать методы аналитики в промежуточной среде:

if (process.env.REACT_APP_ENVIRONMENT !== 'production') {
  analytics.disable();
}

Это может привести к уменьшению размера пакета после сборки вашего приложения.

Итак, как мы видели ранее, использование переменных среды может быть полезно для предотвращения раскрытия конечных точек, запуска всего приложения в разных средах (например, промежуточного и производственного) без боли переключения между разными ветвями, а также для создания проекта на основе среды. .

Надеюсь, вы начнете использовать их как можно скорее. Дайте мне знать о любых вопросах или дополнительной информации в комментариях.

Счастливый Enving: D

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