O introducere a variabilelor de mediu și a modului de utilizare a acestora

Configurarea decuplării din aplicație

Fotografie de Antoine Dautry pe Unsplash

Ce sunt variabilele de mediu?

Două componente fundamentale ale oricărui limbaj de programare computer sunt variabilele și constantele. La fel ca variabilele independente dintr-o ecuație matematică, acestea iau valori care schimbă rezultatele programului. Ambele variabile și constante reprezintă locații de memorie unice care conțin date pe care le folosește programul în calculele sale. Diferența dintre cele două este că valorile variabilelor se pot modifica în timpul execuției, în timp ce valorile constante nu pot fi reasignate.

O variabilă de mediu este o variabilă a cărei valoare este setată în afara programului, de obicei prin funcționalitatea încorporată în sistemul de operare sau microservice. O variabilă de mediu este formată dintr-o pereche nume / valoare și orice număr poate fi creat și disponibil pentru referință la un moment dat.

# Set de date meteoritice din portalul de date deschise 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"

În timpul inițializării aplicației, acestea sunt încărcate în process.env și accesate prin sufixarea numelui variabilei de mediu așa cum se arată mai jos.

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

În timpul rulării, referința la numele variabilei de mediu este înlocuită cu valoarea actuală. În acest caz, process.env.REACT_APP_METEORITE_STRIKE_DATASET este înlocuit de valoarea sa, „https://data.nasa.gov/resource/y77d-th95.json”.

Cazul de utilizare primară pentru variabilele de mediu este de a limita necesitatea de a modifica și relansa o aplicație din cauza modificărilor datelor de configurare. Din exemplul de mai sus, atunci când URL-ul URLRERE_APP_METEORITE_STRIKE_DATASET se schimbă, nu este nevoie de modificări ale codului sursă, testare și implementare a aplicației modificate.

Modificarea și eliberarea codului aplicației este relativ complicată și crește riscul de a introduce efecte secundare nedorite în producție. Atunci când adresa URL este definită de o variabilă de mediu în loc de aplicație, procesul de modificare constă în verificarea validității noii URL, actualizarea variabilei de mediu corespunzătoare folosind o comandă a sistemului de operare sau actualizarea unui fișier de configurare și testarea funcției (funcțiilor) afectate pentru a vă asigura că aplicația funcționează așa cum era de așteptat.

Cazurile de utilizare pentru variabilele de mediu includ, dar nu sunt limitate la date precum:

  • Modul de execuție (de exemplu, producție, dezvoltare, organizare etc.)
  • Nume de domeniu
  • URL-ul API / URI
  • Chei de autentificare publice și private (securizate numai în aplicațiile serverului)
  • Adrese de mail de grup, cum ar fi cele pentru marketing, asistență, vânzări etc.
  • Numele contului de serviciu

Ceea ce au acestea în comun sunt valorile datelor lor se schimbă rar și logica aplicației le tratează ca constante, mai degrabă decât variabile mutabile.

În continuare, să ne uităm la modul de utilizare a variabilelor de mediu folosind sistemul de operare nativ, pachetul NPM dotenv și webpack.

Variabile de mediu în NodeJS

Figura 1 - Variabile de mediu OS

Utilizarea variabilelor de mediu în aplicațiile backend se bazează pe comenzile sistemului de operare pentru a defini variabila de mediu și valoarea acesteia. Un administrator de sistem poate să le definească folosind o interfață de linie de comandă, dar de obicei are mai mult sens să o facă printr-un script shell. De obicei, variabilele de mediu nu sunt accesibile la nivel global, de obicei, sunt specifice sesiunii. De exemplu, folosind linia de comandă Linux:

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

La rulare, NodeJS încarcă automat variabile de mediu în process.env pentru a le face disponibile aplicației. De exemplu, preluați (process.env.REACT_APP_METEORITE_STRIKE_DATASET).

Gestionarea și manipularea variabilelor de mediu diferă de la sistemul de operare la sistemul de operare. De asemenea, acest lucru variază în diferite medii de microservicii, cum ar fi Heroku, unde gestionarea variabilelor de mediu se realizează cu ajutorul unui panou de administrare. Datorită acestui fapt, înțelegerea factorilor specifici platformei este esențială înainte de a utiliza variabile de mediu în aplicația dvs.

O modalitate de a minimiza aceste diferențe este de a utiliza pachetul NPM cross-env, care oferă un sistem de operare independent de comandă compatibilă POSIX pentru a seta variabile de mediu

Variabile de mediu în pachetul dotenv

Asistența pentru utilizarea variabilelor de mediu în aplicațiile de tip frontend nu este o caracteristică „fără caracter” a browserului sau a Javascriptului; un pachet ca dotenv este necesar pentru a-l activa. Pentru înregistrare, atât aplicațiile frontend, cât și backend pot utiliza dotenv.

Utilizarea acestui pachet este la fel de ușoară ca,

import dotenv din „dotenv”;
dotenv.config ();
console.log (process.env.REACT_APP_METEORITE_STRIKE_DATASET);

Această tehnică externalizează datele mutând-o de la codul sursă în variabile de mediu dintr-un fișier .env. Adăugarea numelui fișierului .env la .gitignore împiedică comenzile git push să le încarce în repertoriul GitHub unde, pentru repos public, acesta ar fi disponibil pentru oricine.

Figura 2 - Utilizarea fișierului .env

Variabilele de mediu din .env sunt formatate ca nume = valoare, liniile care încep cu # sunt tratate ca comentarii și liniile goale sunt ignorate. De exemplu,

# Set de date meteoritice din portalul de date deschise 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"

Cu toate acestea, multe pachete populare, cum ar fi Create React App (react-scripts), Gatsby, GraphQL CLI, Node Lambda și multe altele includ deja dotenv. Dacă utilizați deja unul dintre aceste pachete, dotenv poate fi deja disponibil pentru utilizare în aplicația dvs. De exemplu, fragmentele de cod de mai sus provin dintr-o aplicație generată de Create React App, care necesită ca variabilele de mediu să fie prefixate de REACT_APP_.

În cazul Create React App, nu este nevoie să apelați la dotenv.config (), deoarece node_modules / react-scripts / config / env.js populează automat process.env cu conținutul fișierului .env la pornirea aplicației. Pentru un exemplu de aplicație Create React, consultați repo de la Meteorite Explorer pe GitHub.

Întrucât mediul browserului nu este sigur, aplicațiile trebuie să aibă grijă deosebită să nu expună informații sensibile, cum ar fi secretele aplicației. Pentru informații suplimentare despre cum să protejați mediile frontend, consultați „Protejați activele aplicațiilor: cum să vă securizați secretele”.

Variabile de mediu în webpack

webpack este un pachet care transformă, pachete sau pachete multe module, resurse și active diferite dintr-o aplicație împreună pentru a fi utilizate într-un browser. O utilizare obișnuită a webpack este pregătirea unei aplicații pentru desfășurarea producției. De exemplu, scriptul de creare a aplicației Create React utilizează webpack pentru a crea directorul de build care conține versiunea de producție a unei aplicații.

Deși webpack implementează suport pentru utilizarea variabilelor de mediu, este o opțiune a comenzii webpack. De exemplu,

webpack --env.NODE_ENV = local

Mai multe variabile de mediu sunt acceptate prin specificarea mai multor opțiuni --env din comanda webpack. La acestea se face referire în fișierele de configurare webpack (de exemplu, webpack.config.js) ca env. sufixat de numele variabilei de mediu. De exemplu, console.log (env.NODE_ENV).

Fișierele de configurare webpack pot, de asemenea, face referință la variabilele de mediu definite de sistemul de operare folosind process.env la fel ca orice alt modul Javascript. Luați în considerare acest exemplu din webpack.config.prod.js din aplicația Create React.

// Hărțile sursă sunt resurse grele și pot cauza probleme de memorie pentru fișierele sursă mari.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP! == 'false';

Împachetându-l

„Abstracția aduce lumea în relații mai complexe, variabile; poate extrage frumusețe, topografii alternative, urâțenie și realități intense din aparent nimic. ”- Jerry Saltz

Utilizarea variabilelor de mediu este o tehnică pentru a configura aplicația dvs. mai ușor de configurat prin separarea unor date necorespunzătoare din codul dvs. Oricât de simplă poate fi această tehnică, utilizarea acesteia este influențată de considerente precum tipul aplicației (frontend sau backend) și mediul de operare (sistem de operare sau microservice).

Exploatarea variabilelor de mediu este ușoară, însă înțelegerea nuanțelor lor și posibilitatea de a le utiliza în mod eficient și sigur este un factor care diferențiază dezvoltatorii web experimentați de dezvoltatorii neexperimentați. Ca în orice tehnologie, trucul nu este să știi să folosești ceva, ci știu când să-l folosești.