如何在快速后端server.js文件中設置一些值並在create-react-app代碼中使用它？

Question

我有一個簡單的create-react-app，帶有一個僅包含1個文件（server.js）的快速后端，其工作是只執行構建文件夾並啟動Web應用程序。

server.js代碼如下所示：

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


// 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)
})

以下是我的應用程序如何啟動？

"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-app具有一些組件，例如下拉菜單，單選按鈕等，並根據一些選擇在反應代碼app.js等中獲取rest-api調用，並相應地加載響應中的數據在頁面上。

2.）現在，有兩個rest-api端點。 一個是開發人員，一個是產品。 例如： www.example-dev.com/ , www.example-prod.com/ 。

3.）那么，根據使用process.env.ENVIRONMENT_NAME === 'dev' ? env = 'dev' : env = 'prod'在server.js代碼中確定的雲環境process.env.ENVIRONMENT_NAME === 'dev' ? env = 'dev' : env = 'prod' process.env.ENVIRONMENT_NAME === 'dev' ? env = 'dev' : env = 'prod' ，正在運行我的create-react-app，我要調用各自的rest-api端點，例如www.example-{env}.com/

4.）因此，我想知道正確的方法來在server.js設置此值，並在我想要的任何組件類的react-app中使用它。

例如：

以下是一些React組件代碼，我想使用server.js中設置的env值：

 handleOnChange = async selectedObj => {

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

請幫忙。

Answer 1

有多種方法可以執行此操作，以下是幾種不同的方法

1. 使用create react app docs REACT_APP的東西
2. 對index.html使用模板引擎
3. 將端點作為/ config
4. 動態創建一個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組件中，您可以通過

console.log(window.SERVER_DATA)

工作示例：

https://codesandbox.io/embed/express-5o8ei

Answer 2

您可以提供以REACT_APP_開頭的環境變量，例如REACT_APP_ENVIRONMENT_NAME

在您的反應代碼中，您可以像這樣訪問它：

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",