Wie setze ich Build-ENV-Variablen, wenn ich ein Build-React-App-Build-Skript ausführe?

73

Ich verwende die folgende Umgebungsvariable in meiner Create-React-App:

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

Es funktioniert, wenn ich npm starteine .envDatei lese :

REACT_APP_API_URL=http://localhost:5555

Wie setze ich einen anderen Wert wie http://localhost:1234beim Ausführen von a npm run build?

Das ist meine package.jsonDatei:

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

— Sigmus
quelle

51

Sie können Folgendes verwenden process.env.NODE_ENV:

const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;

Sie müssten haben REACT_APP_PROD_API_URLund REACT_APP_DEV_API_URLeinstellen.

Wenn die Produktions-URL immer dieselbe ist, können Sie sie vereinfachen:

const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;

Die App "React erstellen" setzt die Option NODE_ENV"Produktion" für Sie beim Erstellen, sodass Sie sich keine Gedanken darüber machen müssen, wann sie auf "Produktion" eingestellt werden soll.

Hinweis: Sie müssen Ihren Server neu starten (z. B. npm starterneut ausführen ), um Änderungen an Umgebungsvariablen zu erkennen.

— Andy_D
quelle

Vielen Dank. Ich bin mir dieses Ansatzes bewusst. Denken Sie, dass dies die kanonische Lösung für diese Situation ist?

— Sigmus

2

Wenn Sie Ihre Webpack-Konfiguration "von Hand" durchführen, gibt es eine Reihe von Möglichkeiten, dies zu tun. Ich weiß ehrlich gesagt nicht, ob es "kanonisch" ist, aber dieser Weg funktioniert und ohne aus CRA auszusteigen, also mag ich es.

— Andy_D

4

Wir denken auch darüber nach, in Zukunft Unterstützung für umgebungsspezifische .env-Dateien hinzuzufügen.

— Dan Abramov

1

Ich dachte, ich könnte daran arbeiten, aber hier ist es github.com/facebookincubator/create-react-app/pull/1344

— Andy_D

2

Etwas Dummes, das mir nicht bewusst war, aber hoffentlich anderen unerfahrenen Entwicklern helfen kann. Umgebungsvariablen, die in der package.jsonDatei festgelegt sind, müssen vor dem react-scripts buildBefehl definiert werden, um beispielsweise erkannt zu werden REACT_APP_YOUR_VARIABLE=here react-scripts build.

— Andy

136

Ich kann mir vorstellen, dass dies inzwischen funktioniert, aber für alle anderen, die dies finden, legen Sie Ihre Standardumgebungsvariablen in a fest .env Datei im Stammverzeichnis Ihres Projekts "create-react-app" fest.

Abzuscheiden verwendet , um die Variablen bei der Verwendung npm startund npm run buildSie können zwei weitere env - Dateien erstellen - .env.developmentund.env.production .

npm startgesetzt wird REACT_APP_NODE_ENVzu development, und so automatisch die verwenden .env.developmentDatei und npm run buildsetzt REACT_APP_NODE_ENVan production, und so ist es automatisch verwendet wird .env.production. Die hier festgelegten Werte überschreiben die Werte in Ihrem.env .

Wenn Sie mit anderen Personen arbeiten und nur für Ihren Computer spezifische Werte haben, können Sie Werte in .env.developmentund .env.productiondurch Hinzufügen dieser Werte zu einer neuen Datei überschreiben - .env.development.localund.env.production.local sind.

BEARBEITEN: Ich möchte darauf hinweisen, dass die von Ihnen festgelegten Umgebungsvariablen mit "REACT_APP_" beginnen müssen, z. "REACT_APP_MY_ENV_VALUE".

BEARBEITEN 2: Wenn Sie mehr als nur Entwicklung und Produktion benötigen, verwenden Sie env-cmd , wie in diesem Kommentar angegeben .

— Baldeep
quelle

2

@SebastianBean Es verwendet process.env vom Knoten : process.env.REACT_APP_API_URI. Siehe die CRA-Dokumentation

— Adi Unnithan

Wenn das Build-Skript immer environment = 'Production' setzt. Wie stelle ich meine Umgebung = 'test' auf meinem Testserver bereit?

— caffeinescript

1

@caffeinescript Es gibt derzeit keine Möglichkeit, andere Umgebungen als "Entwicklung" und "Produktion" zu haben. Eine wirklich umgehbare Problemumgehung besteht darin, in package.json ein Skript hinzuzufügen, das eine Umgebungsvariable festlegt, die den Testmodus angibt, dh build_testing": "set REACT_APP_ENV=test & react-scripts build, und dann eine settings.js-Datei zu haben, in der jede Umgebungsvariable ihre eigene Funktion hat, mit einer if-Anweisung, die dies überprüft Der Inhalt von process.env.REACT_APP_ENVund gibt entweder einen fest codierten Wert für die Testumgebung oder die reale Umgebungsvariable zurück.

— Baldeep

9

Vielen Dank für die Informationen, dass Sie mit REACT_APP_ beginnen müssen. Damit bin ich auf ein Problem gestoßen.

— DylanSp

1

Vergessen Sie auch nicht, die App von TERMINAL neu zu starten.

— Animesh Singh

26

Wenn Sie separate dotenv-Dateien zum Erstellen und / oder Bereitstellen in separaten Umgebungen (Stage, Prod) haben möchten, können Sie env-cmd wie folgt verwenden :

npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build

Dann aktualisieren Sie einfach Ihre package.jsonentsprechend:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:stage": "env-cmd -f ./.stage.env npm run-script build"
  },

Zum Erstellen führen Sie dann einfach diesen Shell-Befehl aus:

npm run build:stage

— chrishiestand
quelle

Es ist hilfreich, einen Link env-cmdhierher zu haben, aber IMO ist es gefährlich, verschiedene Builds für verschiedene Deplozments zu haben

— helt

@helt Könnten Sie näher darauf eingehen? Mit welchen Risikofaktoren beschäftigen Sie sich?

— chrishiestand

Wenn ich die Konfiguration während des Builds backe, muss ich die App für jede Bereitstellung / Umgebung einzeln erstellen. Ich kann einen Build nicht auf eine andere Umgebung portieren, was die Dinge kompliziert macht, wenn wir es nicht wollen (Murphys Law). Außerdem ist es ein ziemlicher Aufwand für das CI, wenn es nur mehrmals erstellt werden muss, um env vars zu ersetzen. Grundsätzlich bin ich über so einen Thread gestolpert , was ungefähr der Anwendungsfall ist, den ich habe.

— Helt

2

Das sind Kompromisse, über die man sicher Bescheid wissen muss. Aber ich denke nicht, dass sie in jedem Anwendungsfall die wichtigsten Faktoren sind . Für einige kann es akzeptabel sein, für jedes Commit mehrere Artefakte zu haben. Die alternativen Lösungen haben ihre eigenen Nachteile: zusätzliche Infrastrukturanforderungen (z. B. ein node.js-Server) oder erheblich langsamere Containerstartzeiten. IMO, das ist eine Frage, was für Sie am besten funktioniert.

— chrishiestand

Dies ist die einzig mögliche Lösung, die ich sehen kann. Ich verstehe nicht, wie Sie (unter Verwendung des Standard-Setups für Umgebungsvariablen zum Erstellen und Reagieren von Apps) tatsächlich Build-Dateien erstellen, die Sie zum Testen oder Entwickeln bereitstellen können. npm run build erstellt Build-Dateien für die Produktion, aber soweit ich sehen kann (was fehlt mir, muss mir etwas fehlen?)

— blomster

5

Installieren Sie das Paket 'env-cmd'

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "start:qa": "env-cmd -f .env.qa react-scripts start",
    "build:qa": "env-cmd -f .env.qa react-scripts build"
  },

in local, wenn wir eine qa-Umgebung ausführen möchten, verwenden Sie npm run start: qa

— Vigneshwaran Chandrasekaran
quelle

dev.to/jam3/managing-env-variables-for-provisional-builds-h37 verweisen auf diesen Link

— Vigneshwaran Chandrasekaran