Eine Einführung in Umgebungsvariablen und deren Verwendung

Konfiguration von der Anwendung entkoppeln

Foto von Antoine Dautry auf Unsplash

Was sind Umgebungsvariablen?

Zwei grundlegende Komponenten jeder Computerprogrammiersprache sind Variablen und Konstanten. Wie unabhängige Variablen in einer mathematischen Gleichung nehmen diese Werte an, die die Ergebnisse des Programms verändern. Variablen und Konstanten stellen jeweils eindeutige Speicherorte dar, die Daten enthalten, die das Programm für seine Berechnungen verwendet. Der Unterschied zwischen beiden besteht darin, dass sich Variablenwerte während der Ausführung ändern können, während konstante Werte nicht neu zugewiesen werden können.

Eine Umgebungsvariable ist eine Variable, deren Wert außerhalb des Programms festgelegt wird, normalerweise durch Funktionen, die in das Betriebssystem oder den Mikrodienst integriert sind. Eine Umgebungsvariable besteht aus einem Name / Wert-Paar, und zu einem bestimmten Zeitpunkt kann eine beliebige Nummer erstellt werden, die als Referenz zur Verfügung steht.

# Meteoritendatensatz aus 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"

Während der Anwendungsinitialisierung werden diese in process.env geladen und durch das Suffixieren des Namens der Umgebungsvariablen wie unten gezeigt aufgerufen.

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

Zur Laufzeit wird der Verweis auf den Namen der Umgebungsvariablen durch den aktuellen Wert ersetzt. In diesem Fall wird process.env.REACT_APP_METEORITE_STRIKE_DATASET durch den Wert "https://data.nasa.gov/resource/y77d-th95.json" ersetzt.

Der primäre Anwendungsfall für Umgebungsvariablen besteht darin, die Notwendigkeit zu begrenzen, eine Anwendung aufgrund von Änderungen an Konfigurationsdaten zu ändern und erneut freizugeben. Wenn sich die URL von REACT_APP_METEORITE_STRIKE_DATASET im obigen Beispiel ändert, ist es nicht erforderlich, den Quellcode zu ändern, zu testen und die geänderte Anwendung bereitzustellen.

Das Ändern und Freigeben von Anwendungscode ist relativ kompliziert und erhöht das Risiko unerwünschter Nebenwirkungen in der Produktion. Wenn die URL durch eine Umgebungsvariable anstelle der Anwendung definiert wird, besteht der Änderungsprozess darin, die Gültigkeit der neuen URL zu überprüfen, die entsprechende Umgebungsvariable mit einem Betriebssystembefehl zu aktualisieren oder eine Konfigurationsdatei zu aktualisieren und die betroffenen Anwendungsfunktionen zu testen. um sicherzustellen, dass die Anwendung weiterhin wie erwartet funktioniert.

Anwendungsfälle für Umgebungsvariablen umfassen unter anderem folgende Daten:

  • Ausführungsmodus (z. B. Produktion, Entwicklung, Inszenierung usw.)
  • Domain Namen
  • API-URL / URI
  • Öffentliche und private Authentifizierungsschlüssel (nur in Serveranwendungen sicher)
  • Gruppen-Mailadressen, z. B. für Marketing, Support, Vertrieb usw.
  • Dienstkontonamen

Gemeinsam ist diesen, dass sich ihre Datenwerte nur selten ändern und die Anwendungslogik sie wie Konstanten und nicht wie veränderbare Variablen behandelt.

Als Nächstes sehen wir uns an, wie Umgebungsvariablen mit dem nativen Betriebssystem, dem NPM-Paket dotenv und dem Webpack verwendet werden.

Umgebungsvariablen in NodeJS

Abbildung 1 - Umgebungsvariablen des Betriebssystems

Die Verwendung von Umgebungsvariablen in Backend-Anwendungen basiert auf Betriebssystembefehlen, um die Umgebungsvariable und ihren Wert zu definieren. Ein Systemadministrator kann diese über eine Befehlszeilenschnittstelle definieren, in der Regel ist es jedoch sinnvoller, dies über ein Shell-Skript zu tun. Umgebungsvariablen sind in der Regel nicht über das gesamte Betriebssystem global verfügbar, sondern in der Regel sitzungsspezifisch. Verwenden Sie zum Beispiel die Linux-Befehlszeile:

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

Zur Laufzeit lädt NodeJS automatisch Umgebungsvariablen in process.env, um sie der Anwendung zur Verfügung zu stellen. Zum Beispiel fetch (process.env.REACT_APP_METEORITE_STRIKE_DATASET).

Die Verwaltung und Bearbeitung von Umgebungsvariablen unterscheidet sich von Betriebssystem zu Betriebssystem. Dies ist auch in verschiedenen Microservices-Umgebungen unterschiedlich, z. B. in Heroku, wo die Verwaltung von Umgebungsvariablen über ein Administrationsfenster erfolgt. Aus diesem Grund ist es wichtig, die plattformspezifischen Faktoren zu verstehen, bevor Sie Umgebungsvariablen in Ihrer Anwendung verwenden.

Eine Möglichkeit, diese Unterschiede zu minimieren, besteht in der Verwendung des env-übergreifenden NPM-Pakets, das einen betriebssystemunabhängigen POSIX-kompatiblen Befehl zum Festlegen von Umgebungsvariablen bereitstellt.

Umgebungsvariablen im dotenv-Paket

Die Unterstützung für die Verwendung von Umgebungsvariablen in Frontend-Anwendungen ist weder im Browser noch in Javascript standardmäßig verfügbar. Ein Paket wie dotenv ist erforderlich, um es zu aktivieren. Für die Aufzeichnung können sowohl Frontend- als auch Backend-Anwendungen Dotenv verwenden.

Die Verwendung dieses Pakets ist so einfach wie:

Dotenv aus 'Dotenv' importieren;
dotenv.config ();
console.log (process.env.REACT_APP_METEORITE_STRIKE_DATASET);

Diese Technik externalisiert Daten, indem sie aus dem Quellcode in Umgebungsvariablen in einer ENV-Datei verschoben werden. Das Hinzufügen des .env-Dateinamens zu .gitignore verhindert, dass git push-Befehle ihn auf das GitHub-Repo hochladen, wo er für öffentliche Repos für jedermann verfügbar ist.

Abbildung 2 - Verwendung der ENV-Datei

Umgebungsvariablen in .env werden als name = value formatiert, Zeilen, die mit # beginnen, werden als Kommentare behandelt und leere Zeilen werden ignoriert. Zum Beispiel,

# Meteoritendatensatz aus 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"

Viele populäre Pakete wie Create React App (React-Skripte), Gatsby, GraphQL CLI, Node Lambda und andere enthalten jedoch bereits dotenv. Wenn Sie bereits eines dieser Pakete verwenden, steht Ihnen dotenv möglicherweise bereits für Ihre Anwendung zur Verfügung. Die obigen Codefragmente stammen beispielsweise aus einer von Create React App generierten Anwendung, der Umgebungsvariablen REACT_APP_ vorangestellt werden müssen.

Im Fall von Create React App muss dotenv.config () nicht aufgerufen werden, da node_modules / react-scripts / config / env.js process.env automatisch mit dem Inhalt der .env-Datei auffüllt, wenn die Anwendung gestartet wird. Ein Beispiel für eine Create React App finden Sie im Meteorite Explorer-Repo auf GitHub.

Da die Browser-Umgebung nicht sicher ist, müssen Anwendungen besonders darauf achten, keine vertraulichen Informationen wie Anwendungsgeheimnisse preiszugeben. Weitere Informationen zum Schutz von Frontend-Umgebungen finden Sie unter „Anwendungsressourcen schützen: So sichern Sie Ihre Geheimnisse“.

Umgebungsvariablen im Webpack

webpack ist ein Bundler, der viele verschiedene Module, Ressourcen und Assets in einer Anwendung für die Verwendung in einem Browser umwandelt, bündelt oder verpackt. Eine häufige Verwendung von Webpack besteht darin, eine Anwendung für die Bereitstellung in der Produktion vorzubereiten. Beispielsweise erstellt das Build-Skript von Create React App mithilfe von Webpack das Build-Verzeichnis mit der Produktionsversion einer Anwendung.

Obwohl Webpack die Unterstützung für die Verwendung von Umgebungsvariablen implementiert, ist dies eine Option des Befehls Webpack. Zum Beispiel,

webpack --env.NODE_ENV = local

Mehrere Umgebungsvariablen werden unterstützt, indem im Befehl webpack mehr als eine --env-Option angegeben wird. Diese werden in Webpack-Konfigurationsdateien (z. B. webpack.config.js) als env bezeichnet. wird durch den Namen der Umgebungsvariablen ergänzt. Zum Beispiel console.log (env.NODE_ENV).

Webpack-Konfigurationsdateien können auch auf Umgebungsvariablen verweisen, die vom Betriebssystem mit process.env wie jedes andere Javascript-Modul definiert wurden. Betrachten Sie dieses Beispiel aus webpack.config.prod.js in Create React App.

// Quellzuordnungen sind sehr ressourcenintensiv und können bei großen Quelldateien zu Speicherproblemen führen.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP! == 'false';

Verpacken

„Abstraktion bringt die Welt in komplexere, variable Beziehungen; es kann Schönheit, alternative Topografien, Hässlichkeit und intensive Aktualitäten aus scheinbarem Nichts extrahieren. “- Jerry Saltz

Die Verwendung von Umgebungsvariablen ist eine Technik, mit der Sie Ihre App einfacher konfigurieren können, indem Sie Daten, die sich selten ändern, von Ihrem Code trennen. So einfach diese Technik auch sein mag, ihre Verwendung wird von Überlegungen wie dem Anwendungstyp (Frontend oder Backend) und der Betriebsumgebung (Betriebssystem oder Mikroservice) beeinflusst.

Das Ausnutzen von Umgebungsvariablen ist einfach, aber das Verstehen ihrer Nuancen und die Fähigkeit, sie effizient und sicher zu nutzen, ist ein Faktor, der erfahrene Webentwickler von unerfahrenen Entwicklern unterscheidet. Wie bei jeder Technologie ist der Trick, nicht zu wissen, wie man etwas benutzt, sondern zu wissen, wann man es benutzt.