Kann dotenv in einem reaktiven Projekt verwendet werden?

Question

Ich versuche, einige Umgebungsvariablen zu setzen (um API-Aufrufe an dev/prod Endpoints zu machen, Schlüssel abhängig von dev/prod, etc.) und ich frage mich, ob die Verwendung von dotenv funktionieren wird.

Ich habe dotenv installiert, und ich verwende Webpack.

Mein webpack Eintrag main.js ist, so in dieser Datei habe ich setzen require('dotenv').config()

Dann in meinem webpack Config, habe ich diese:

new webpack.EnvironmentPlugin([ 
    'NODE_ENV', 
    '__DEV_BASE_URL__' //base url for dev api endpoints 
    ]) 

Allerdings ist es immer noch nicht definiert. Wie kann ich das richtig machen?

Answer 1

Die kurze Antwort ist nein. Ein Browser kann nicht auf lokale oder Serverumgebungsvariablen zugreifen, so dass dotenv nichts zu suchen hat. Stattdessen geben Sie gewöhnliche Variablen in Ihrer React-Anwendung an, normalerweise in einem Einstellungsmodul.

Webpack kann so erstellt werden, dass Umgebungsvariablen vom Build-Rechner übernommen und in Ihren Einstellungsdateien gespeichert werden. Es funktioniert jedoch, Zeichenfolgen tatsächlich während der Erstellung, nicht der Laufzeit zu ersetzen. Daher werden in jedem Build Ihrer Anwendung die Werte fest codiert. Diese Werte wären dann über das Objekt process.env zugänglich.

var nodeEnv = process.env.NODE_ENV; 

Darüber hinaus können Sie die DefinePlugin für webpack verwenden, die Sie explizit unterschiedliche Werte je nach Build-Ziel (dev, prod, etc.) angeben können. Beachten Sie, dass Sie alle Werte an JSON.stringify übergeben müssen.

new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') 
}), 

Diese für jede Art von öffentlichen Details in Ordnung ist, aber sollte nie für jede Art von privaten Schlüsseln, Passwörtern oder API Geheimnisse verwendet werden. Dies liegt daran, dass alle eingebrachten Werte öffentlich zugänglich sind und bösartig verwendet werden könnten, wenn sie vertrauliche Details enthalten. Für diese Art von Dingen müssen Sie serverseitigen Code schreiben und eine einfache API erstellen, die sich mit der API von Drittanbietern unter Verwendung der Secrets authentifizieren und die relevanten Details an Ihre clientseitige Anwendung weitergeben kann. Ihre serverseitige API fungiert als Vermittler und schützt Ihre Geheimnisse, während Sie immer noch die Daten erhalten, die Sie benötigen.