在 React 應用程序中使用環境變量

Question

我們的 JavaScript 資源剛剛退出，所以我對前端開發一無所知，需要讓我的 UI 站起來。 我正在嘗試在 javascript 中使用環境變量，似乎有 100 種不同的方法可以做到這一點。

我所知道的是這是一個反應/節點應用程序。 我用npm run start啟動它。 它需要一個我在 my.bash_profile, XREFS_BACK_URL中定義的端點。 我以為我可以只使用process.env.XREFS_BACK_URL ，但顯然必須在某個文件中定義它？ 我不知道什么文件或它應該位於何處。

很抱歉這么無能 - 這只是落在我的腿上，我必須盡快把它拿起來！

更新：

我在根目錄中創建了一個.env文件。 這是一行：

REACT_APP_XREFS_BACK_URL=http://localhost:8080

在我的代碼中，我嘗試像這樣使用它：

var endpoint = process.env.REACT_APP_XREFS_BACK_URL;
console.log("endpoint is " + endpoint);

但是控制台顯示endpoint是UNDEFINED 。

我的 package.json 在這里：

{
  "name": "bulletin-board",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "babel-jest": "^22.4.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "jest": "^22.4.2",
    "react-scripts": "0.2.1",
    "react-test-renderer": "^16.2.0",
    "webpack": "^4.6.0"
  },
  "dependencies": {
    "font-awesome": "^4.7.0",
    "match-sorter": "^2.2.1",
    "namor": "^1.0.1",
    "npm": "^6.0.0",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-draggable": "^2.2.0",
    "react-table": "^6.8.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "jest"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "moduleFileExtensions": [
      "js",
      "json",
      "jsx"
    ],
    "moduleNameMapper": {
      "^.*[.](jpg|JPG|gif|GIF|png|PNG|less|LESS|css|CSS)$": "EmptyModule"
    },
    "preprocessorIgnorePatterns": [
      "/node_modules/"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/EmptyModule.js"
    ]
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }
}

Answer 1

你的應用是用create-react-app 。 以下是添加/引用環境變量的文檔： https : //github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

在根文件夾中創建一個名為.env的文件，內容如下：

REACT_APP_XREFS_BACK_URL=put_whatever_here

然后通過以下方式在您的 JavaScript 中訪問此變量：

process.env.REACT_APP_XREFS_BACK_URL

Answer 2

不確定，如果它對你來說是真實的， CNDyson ，但我認為它可能對像我這樣的新手有幫助：

1. npm install --save dotenv
2. 在根目錄下創建.env文件
3. 聲明REACT_APP_**VARIABLE_NAME** = dont forget about REACT_APP
4. 像這樣使用它： process.env.REACT_APP_**VARIABLE_NAME**

強烈建議瀏覽這些鏈接：

https://create-react-app.dev/docs/adding-custom-environment-variables/ -official documentaion

https://www.npmjs.com/package/dotenv - dotenv

Answer 3

問題是您通常希望訪問托管應用程序的服務器上存在的環境變量。

使用所描述的解決方案，您將永遠無法docker run --env FOO="value of foo" my-org/my-app然后在應用程序中訪問FOO ，如process.env["FOO"] 。

create-react-app捆綁運行yarn build時定義的環境變量。

例如，如果您想訪問docker容器中定義的環境變量，請查看： react-envs

Answer 4

首先在 package.json 旁邊創建一個名為 env.local 的文件，並嘗試保護環境變量 REACT_APP_YOUR ENV FILE NAME

現在將安全名稱設置為您的 firebase 文件並推送它

就如此容易