Как мне загрузить переменную среды ядра приложения в приложение React? - PullRequest
Новая
       20

Как мне загрузить переменную среды ядра приложения в приложение React?

0 голосов
/ 20 мая 2019

У меня есть приложение 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'))

И при вызове my fetch к серверу я читаю переменную окружения 

  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 ()

Когда я развертываю это в google app engine с развертыванием приложения gcloud и открываю веб-страницу, которую я вижу в журнале, то serverURL не определен. Я получаю следующий журнал

2019-05-20 21: 01: 13.161 CEST GET 200 1,31 КиБ 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?

...