Una introducción a las variables de entorno y cómo usarlas

Desacoplar la configuración de la aplicación

Foto de Antoine Dautry en Unsplash

¿Qué son las variables de entorno?

Dos componentes fundamentales de cualquier lenguaje de programación son variables y constantes. Al igual que las variables independientes en una ecuación matemática, estas toman valores que cambian los resultados del programa. Las variables y las constantes representan ubicaciones de memoria únicas que contienen datos que el programa usa en sus cálculos. La diferencia entre los dos es que los valores de las variables pueden cambiar durante la ejecución, mientras que los valores constantes no pueden reasignarse.

Una variable de entorno es una variable cuyo valor se establece fuera del programa, generalmente a través de la funcionalidad integrada en el sistema operativo o microservicio. Una variable de entorno está compuesta por un par de nombre / valor, y cualquier número puede crearse y estar disponible para referencia en un momento determinado.

# Conjunto de datos de meteoritos del portal de datos abiertos de la NASA
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"

Durante la inicialización de la aplicación, estos se cargan en process.env y se accede al sufijo del nombre de la variable de entorno como se muestra a continuación.

fetch (process.env.REACT_APP_METEORITE_STRIKE_DATASET)
.then ((respuesta) => {
  return response.json ();
})
.then ((strikesJSON) => {
  this.setState ({meteoriteStrikes: strikesJSON});
  this.setState ({isDataLoaded: true});
});

En tiempo de ejecución, la referencia al nombre de la variable de entorno se reemplaza por su valor actual. En este caso, process.env.REACT_APP_METEORITE_STRIKE_DATASET se reemplaza por su valor, "https://data.nasa.gov/resource/y77d-th95.json".

El caso de uso principal para las variables de entorno es limitar la necesidad de modificar y volver a lanzar una aplicación debido a cambios en los datos de configuración. Según el ejemplo anterior, cuando la URL de REACT_APP_METEORITE_STRIKE_DATASET cambia, no hay necesidad de alteraciones del código fuente, pruebas e implementación de la aplicación modificada.

Modificar y liberar el código de la aplicación es relativamente complicado y aumenta el riesgo de introducir efectos secundarios indeseables en la producción. Cuando la URL se define mediante una variable de entorno en lugar de la aplicación, el proceso de cambio consiste en verificar la validez de la nueva URL, actualizar la variable de entorno correspondiente utilizando un comando del sistema operativo o actualizar un archivo de configuración, y probar las funciones de la aplicación afectada para garantizar que la aplicación siga funcionando según lo esperado.

Los casos de uso para variables de entorno incluyen, entre otros, datos como:

  • Modo de ejecución (por ejemplo, producción, desarrollo, puesta en escena, etc.)
  • Nombres de dominio
  • URL de API / URI
  • Claves de autenticación públicas y privadas (solo seguras en aplicaciones de servidor)
  • Direcciones de correo grupales, como las de marketing, soporte, ventas, etc.
  • Nombres de cuenta de servicio

Lo que estos tienen en común es que sus valores de datos cambian con poca frecuencia y la lógica de la aplicación los trata como constantes, en lugar de variables mutables.

A continuación, veamos cómo utilizar las variables de entorno utilizando el sistema operativo nativo, el paquete NPM dotenv y el paquete web.

Variables de entorno en NodeJS

Figura 1 - Variables de entorno del sistema operativo

El uso de variables de entorno en aplicaciones de back-end depende de los comandos del sistema operativo para definir la variable de entorno y su valor. Un administrador del sistema puede definirlos usando una interfaz de línea de comando, pero generalmente tiene más sentido hacerlo a través de un script de shell. Las variables de entorno generalmente no son accesibles globalmente a través del sistema operativo, generalmente son específicas de la sesión. Por ejemplo, usando la línea de comando de Linux:

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

En tiempo de ejecución, NodeJS carga automáticamente las variables de entorno en process.env para que estén disponibles para la aplicación. Por ejemplo, fetch (process.env.REACT_APP_METEORITE_STRIKE_DATASET).

La gestión y manipulación de las variables de entorno difieren de un sistema operativo a otro. Además, esto varía en diferentes entornos de microservicios, como Heroku, donde la gestión de las variables de entorno se realiza mediante un panel de administración. Debido a esto, comprender los factores específicos de la plataforma es esencial antes de usar variables de entorno en su aplicación.

Una forma de minimizar estas diferencias es utilizar el paquete NPM cross-env que proporciona un comando compatible con POSIX independiente del sistema operativo para establecer variables de entorno.

Variables de entorno en el paquete dotenv

La compatibilidad con el uso de variables de entorno en aplicaciones frontend no es una característica "lista para usar" del navegador o Javascript; Se requiere un paquete como dotenv para habilitarlo. Para el registro, las aplicaciones frontend y backend pueden utilizar dotenv.

Usar este paquete es tan fácil como,

importar dotenv desde 'dotenv';
dotenv.config ();
console.log (process.env.REACT_APP_METEORITE_STRIKE_DATASET);

Esta técnica externaliza los datos moviéndolos del código fuente a las variables de entorno en un archivo .env. Agregar el nombre del archivo .env a .gitignore evita que los comandos de inserción de git lo carguen en el repositorio de GitHub donde, para repositorios públicos, estaría disponible para cualquier persona.

Figura 2 - Uso del archivo .env

Las variables de entorno en .env se formatean como nombre = valor, las líneas que comienzan con # se tratan como comentarios y se ignoran las líneas en blanco. Por ejemplo,

# Conjunto de datos de meteoritos del portal de datos abiertos de la NASA
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"

Sin embargo, muchos paquetes populares como Create React App (react-scripts), Gatsby, GraphQL CLI, Node Lambda y más ya incluyen dotenv. Si ya usa uno de estos paquetes, dotenv ya puede estar disponible para usar en su aplicación. Por ejemplo, los fragmentos de código anteriores son de una aplicación generada por Create React App, que requiere que las variables de entorno tengan el prefijo REACT_APP_.

En el caso de la aplicación Create React, no es necesario llamar a dotenv.config () ya que node_modules / react-scripts / config / env.js llena automáticamente process.env con el contenido del archivo .env cuando se inicia la aplicación. Para ver un ejemplo de una aplicación Create React, consulte el repositorio Meteorite Explorer en GitHub.

Dado que el entorno del navegador no es seguro, las aplicaciones deben tener especial cuidado de no exponer información confidencial, como los secretos de la aplicación. Para obtener información adicional sobre cómo proteger los entornos frontend, consulte "Proteger los activos de la aplicación: Cómo proteger sus secretos".

Variables de entorno en webpack

webpack es un paquete que transforma, agrupa o empaqueta muchos módulos, recursos y activos diferentes en una aplicación para usarlos en un navegador. Un uso común de webpack es preparar una aplicación para la implementación de producción. Por ejemplo, el script de compilación de la aplicación Create React utiliza el paquete web para crear el directorio de compilación que contiene la versión de producción de una aplicación.

Aunque webpack implementa soporte para usar variables de entorno, es una opción del comando webpack. Por ejemplo,

paquete web --env.NODE_ENV = local

Se admiten múltiples variables de entorno al especificar más de una opción --env en el comando webpack. Estos se mencionan en los archivos de configuración de webpack (por ejemplo, webpack.config.js) como env. sufijado por el nombre de la variable de entorno. Por ejemplo, console.log (env.NODE_ENV).

los archivos de configuración de webpack también pueden hacer referencia a variables de entorno definidas por el sistema operativo usando process.env como cualquier otro módulo Javascript. Considere este ejemplo de webpack.config.prod.js en Create React App.

// Los mapas fuente tienen muchos recursos y pueden causar problemas de falta de memoria para archivos fuente grandes.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP! == 'false';

Envolviendolo

“La abstracción lleva al mundo a relaciones más complejas y variables; puede extraer belleza, topografías alternativas, fealdad e intensas realidades de la aparente nada ". - Jerry Saltz

El uso de variables de entorno es una técnica para hacer que su aplicación sea más fácil de configurar separando los datos que cambian con poca frecuencia de su código. Pero por simple que sea esta técnica, su uso está influenciado por consideraciones como el tipo de aplicación (frontend o backend) y el entorno operativo (sistema operativo o microservicio).

Explotar las variables de entorno es fácil, pero comprender sus matices y poder utilizarlas de manera eficiente y segura es un factor que distingue a los desarrolladores web experimentados de los desarrolladores sin experiencia. Al igual que con cualquier tecnología, el truco no es saber cómo usar algo, sino saber cuándo usarlo.