Javascript 如何在express backend server.js文件中设置一些值，并在创建应用程序代码中使用它？

我有一个简单的CreateReact应用程序，它有一个express后端，只有一个文件（server.js），其任务就是执行build文件夹并启动web应用程序

server.js代码如下所示：

下面是我的react应用程序是如何启动的

"scripts": {
    "postinstall": "npm run build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "NODE_ENV=prod node server.js",
    "develop": "react-scripts start"
  },

我现在想要达到的目标是什么

1.）我的create react应用程序有一些组件，如下拉列表、单选按钮等，根据一些选择，在react code app.js等中执行fetch rest api调用，并相应地将响应中的数据加载到页面上

2.）现在，有两个rest api端点。一个是dev，一个是prod。 例如：

www.example-dev.com/，www.example-prod.com/

3.）那么，根据server.js代码中使用

process.env.environment_NAME=='dev'确定的云环境？env='dev'：env='prod'

在其上运行我的create react应用程序，我想调用相应的rest api端点，如

www.example-{env}.com/

4.）因此，我想知道在

server.js

中设置此值的正确方法，并在react应用程序的某个组件类中使用它，无论我想在哪里

例如：

下面是一些react组件代码，我想在其中使用server.js中设置的env值：

 handleOnChange = async selectedObj => {

      let responseObj = await callRestAPI(`www.example-${env}.com`);
      this.props.onChange(selectedObj);
  };

---

请帮助。

有多种方法可以做到这一点，这里有几种不同的方法

使用创建react应用程序文档react\u应用程序内容

使用index.html的模板引擎

将端点设置为/config

动态创建js文件，并将其包含在index.html中

1到3种在线查找文档的方法

第四条路就是你能做到的

fs.writeFileSync(path.join(__dirname, './build', 'config.js'), `window.SERVER_DATA = { env : ${process.env.ENVIRONMENT_NAME}}`);

请确保在express.static之前执行此操作

使用上面的代码，下面是它的外观

const path = require('path')
const express = require('express')
const isProduction = process.env.NODE_ENV === 'prod'
const port = process.env.PORT ? process.env.PORT : 3000
const app = express();
const fs = require('fs');
var env = ""

// check below environment variable to identify on what environment on cloud service web-application is running
process.env.ENVIRONMENT_NAME === 'dev' ? env = 'dev' : env = 'prod'

// Add expressjs 'logger' plugin for printing logs and FE errors
app.use(
    logger({
        noop: isProduction
    })
)

app.use((req, res, next) => {
    // if i try to log env name like below i'm able to see the value
    // but if i try to log this anywhere like below in react code (it's always undefined)
    console.log(process.env.ENVIRONMENT_NAME);
})



fs.writeFileSync(path.join(__dirname, './build', 'config.js'), `window.SERVER_DATA = { env : "${process.env.ENVIRONMENT_NAME}"}`);

// Serves static assets
app.use(express.static('./build'))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, './build', 'index.html'))
})

app.listen(port, (error, result) => {
    if (!isProduction && error) {
        console.log(error)
    }
    console.log('Server running on port ' + port)
})

更新index.html以使用我们的新js文件

<script src="./config.js"></script>

工作示例：

---

您可以提供一个以

REACT\u APP\u

开头的环境变量，例如

REACT\u APP\u environment\u NAME

在react代码中，您可以这样访问它：

let env = process.env.REACT_APP_ENVIRONMENT_NAME;    
let responseObj = await callRestAPI(`www.example-${env}.com`);

您还可以更新构建脚本以如下方式传递变量

"build": "REACT_APP_ENVIRONMENT_NAME=$ENVIRONMENT_NAME react-scripts build",

---

使用自定义环境变量：我的变量不是以“REACT\u APP\u”开头的。如果您能给我一个例子，它会很有帮助。它就是这样工作的：“注意：您必须创建以REACT\u APP开头的自定义环境变量。除NODE\u ENV外的任何其他变量都将被忽略”我的需求非常接近这个例子->唯一的事情是在上面的例子中，他们有/config get方法端点。我没有那样的东西。我只想在var config声明中设置这个示例中的值，并在整个应用程序中使用它。有意义吗？我的env变量来自其他地方，我不能在它前面添加“REACT\u APP\uu”现在就有意义了。但是，在这个构建脚本中，我必须编写$process.env。ENVIRONMENT\u NAME还是$ENVIRONMENT\u NAME？只是$ENVIRONMENT\u NAME对我不起作用。这就是我所做的->用“build”更新package.json中的构建脚本：“REACT\u APP\u ENVIRONMENT\u NAME=$ENVIRONMENT\u NAME REACT scripts build”，并尝试在REACT APP中使用let env=process.env.REACT\u APP\u ENVIRONMENT\u NAME；让responseObj=wait callRestAPI（

www.example-${env}.com

）；当我尝试记录它时，它的值是未定义的。你如何运行你的应用程序？什么是环境，云？你能创建一个上面的简短示例吗？步骤1-4是单一方法的步骤，对吗？或者你从1到3指向多种方法？我必须这样做：（他们在config var中设置了变量，在server.js的顶部）。但它们有配置端点，这意味着当它们调用example.com/config时，只有它们才能在响应中访问这些变量。但是我不想要额外的终点，也许我没有正确理解。一个例子或一个例子的链接将非常有用这里是完整的工作代码

let env = process.env.REACT_APP_ENVIRONMENT_NAME;    
let responseObj = await callRestAPI(`www.example-${env}.com`);

"build": "REACT_APP_ENVIRONMENT_NAME=$ENVIRONMENT_NAME react-scripts build",