如何管理将App Engine环境变量加载到React app中？

Question

  

我有一个React应用程序，我已经在其中安装了dotenv组件。   package.json看起来像这样

{
  "name": "todofrontend1",
  "version": "0.1.0",
  "private": true,
  "main": "./src/index.tsx",
  "jest": {
    "collectCoverageFrom": [
      "**/*.{js,jsx}",
      "!**/node_modules/**",
      "!**/__test__/**",
      "!**/*.test.*/**",
      "!**/build/**"
    ],
    "coverageReporters": [
      "lcov"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 0,
        "functions": 1,
        "lines": 1
      }
    }
  },
  "dependencies": {
    "@types/node": "^11.13.4",
    "@types/react": "^16.8.13",
    "@types/react-dom": "^16.8.4",
    "dotenv": "^8.0.0",
    "esdoc": "^1.1.0",
    "esdoc-react-plugin": "^1.0.1",
    "esdoc-standard-plugin": "^1.0.0",
    "esdoc-typescript-plugin": "^1.0.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "serve": "^11.0.0",
    "typescript": "^3.4.3"
  },
  "scripts": {
    "startlocal": "PORT=4200 react-scripts start",
    "start": "serve -s build",
    "build": "react-scripts build",
    "test": "react-scripts test --coverage",
    "test_in_build": "DOTENV_CONFIG_PATH=build.env  node -r dotenv/config ./node_modules/.bin/react-scripts test --coverage --ci",
    "eject": "react-scripts eject",
    "eslint": "eslint",
    "jsdoc": "jsdoc"
  },
  "eslintConfig": {
    "plugins": [
      "react"
    ],
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "react-app"
    ],
    "env": {
      "jest": true
    },
    "rules": {
      "no-console": "off"
    },
    "parser": "@typescript-eslint/parser"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@types/enzyme": "^3.9.1",
    "@types/enzyme-adapter-react-16": "^1.0.5",
    "@types/jest": "^24.0.11",
    "@typescript-eslint/parser": "^1.6.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "jest-fetch-mock": "^2.1.2",
    "jsdoc": "^3.6.2",
    "react-test-renderer": "^16.8.6",
    "ts-jest": "^24.0.2"
  },
  "engines": {
    "node": "10.x.x"
  }
}

  

我的app.yaml看起来像这样：

runtime: nodejs10
env: standard
service: todofrontend
env_variables:
  SERVER_URL: "https://todofrontend-dot-project45914.appspot.com"

  

我把dotenv放到了index.js文件中

require('dotenv').config()
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

console.info('index')
ReactDOM.render(<App />, document.getElementById('root'))

  

在对服务器的访存调用中，我读取了环境变量

  class HelloWorldService {
  constructor (props) {
    this.state = {
      serverURL: process.env.SERVER_URL

    }
  }
  async getMessage () {
     try {
       let response = await fetch(this.state.serverURL + '/hello-world')
       console.info(response)
       let text = await response.text()
       console.info(text)
        return  text
    } catch(error)  { 
        console.error(error)
        throw error
    }
  }
}

导出默认的新HelloWorldService（）

  

当我使用gcloud app deploy将其部署到google app引擎并打开在serverURL日志中看到的网络时，未定义。我得到以下日志

     

2019-05-20 21：01：13.161 CEST GET 200   1.31 KiB 13毫秒Chrome 74 / undefined / hello-world    82.164.107.66--[20 / May / 2019：21：01：13 +0200]“ GET / undefined / hello-world HTTP / 1.1” 200 1343-“ Mozilla / 5.0（Macintosh;   Intel Mac OS X 10_14_3）AppleWebKit / 537.36（KHTML，如Gecko）   Chrome / 74.0.3729.157 Safari / 537.36“   “ todofrontend-dot-project45914.appspot.com” ms = 13 cpu_ms = 16   cpm_usd = 1.50091e-7 loading_request = 0   实例= 00c61b117cca81fc0c8eb6242c4410f9facb26bc66ca3c052f7e5521ef4613205fc47156d5   app_engine_release = 1.9.71 trace_id = 1610034126f974524b8ebf62352c8e18

     

环境变量已加载到配置中

runtime: nodejs10
env: standard
instance_class: F1
handlers:
  - url: .*
    script: auto
env_variables:
  SERVER_URL: 'https://todofrontend-dot-project45914.appspot.com'
automatic_scaling:
  min_idle_instances: automatic
  max_idle_instances: automatic
  min_pending_latency: automatic
  max_pending_latency: automatic
network: {}

  

我如何设法将环境变量SERVER_URL：'https://todofrontend-dot-project45914.appspot.com'加载到serverURL：process.env.SERVER_URL中？