如何处理反应应用程序中api端点中动态分配的端口？答案

【问题标题】：how to deal with dynamically allocated port in api endpoint in react app?如何处理反应应用程序中api端点中动态分配的端口？
【发布时间】：2018-03-27 03:00:25
【问题描述】：

我正在编写一个反应应用程序。它适用于在特定端口上运行的 api 端点。我的服务器端应用程序要求我在运行时提供一个随机的空闲端口，为此我使用 getport 节点模块。但是我如何将它传达给已经构建的单页反应应用程序，它处理来自特定端口（如 localhost:3000）的 api 端点

【问题讨论】：

标签： reactjs api express dynamic port

【解决方案1】：

您可以使用环境变量来模板化您的端口号。因此，尽管您的单页应用程序正在编译，但您的服务器会将环境变量传递给您的应用程序。

【讨论】：

任何示例链接？
@uman - 假设您使用的是 node.js 服务器，请参考此示例 - stackoverflow.com/questions/42656326/…
我已经在服务器端实现了动态端口分配。但问题出在客户端。端口号是随机的，并且在我的应用程序中不断变化，并且有许多服务器实例同时在不同的端口上运行。

【解决方案2】：

在可以代理您的 api 请求的 express 服务器中部署您的 react 应用程序。服务器可以将其 ip:port 注册到该服务器并使用该数据的 express 服务器可以路由请求。

当您启动服务器端应用程序实例时，让它们使用特殊端点 /reg 将自己注册到正在运行的服务器。当通过 /api 路由时，您可以将所有 api 请求代理到您的服务器应用程序。

示例代码：

import express from 'express';
import proxy from 'express-http-proxy';

const port = "80";
const app = express();
const serverAddressList = [];

function getHost() {
    //logic to select ip from serverAddressList.Can do load balancing here
    return serverAddressList[0];
}

app.get('/reg', (req, res, next) => {
    const serverAddress = req.query.address;
    serverAddressList.push(serverAddress);
});

app.use('/api', proxy(getHost, {
    memoizeHost: false
}));

app.use('/', express.static(REACT_GENERATED_CODE_LOCATION));

app.get('/*', (req, res) => {
    const location = path.resolve(`${__dirname}/../${REACT_GENERATED_CODE_LOCATION}/index.html`);
    res.sendFile(location);
});

app.listen(port, (err) => {
    if (err) {
        console.error(err);
    }
});

【讨论】：