如何让构建后的React应用适配Express动态分配的API端口？

下面提供几种实用的修改方案，根据你的部署场景选择：

方案1：让Express同时托管静态文件与API（推荐，适合单服务部署） #

这种方式让Express既提供API接口，又作为React静态文件的服务器，React请求用相对路径，自动适配Express的动态端口。

步骤： #

1. 修改Express代码，添加静态文件托管和SPA路由兼容：

const express = require('express');
const path = require('path');
const app = express();

// 先定义API路由
app.get('/api/product-category', (req, res) => {
  // 这里写你的业务逻辑
  res.json({ data: '产品分类数据' });
});

// 托管React构建后的静态文件
app.use(express.static(path.join(__dirname, '../client/build')));

// 所有非API请求返回React的index.html，适配SPA路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/build/index.html'));
});

// 动态监听端口，打印实际端口号
const server = app.listen(0, () => {
  console.log(`服务运行在端口: ${server.address().port}`);
});

2. 修改React的API请求，去掉硬编码的域名和端口，改用相对路径：

await axios.get("/api/product-category");

优势： #

• 无需硬编码任何端口，Express动态分配的端口会自动被React请求适配
• 同源请求，避免跨域问题
• 部署简单，只需启动一个Express服务

方案2：先启动Express获取端口，再构建React（适合分离部署但端口固定场景） #

如果必须分开部署React和Express，可先启动Express拿到动态端口，再将端口注入React构建流程。

步骤： #

1. 编写启动构建脚本（比如项目根目录下的start-and-build.js）：

const { execSync } = require('child_process');
const express = require('./server/server'); // 导入你的Express应用

// 启动Express监听随机端口
const server = express.listen(0, () => {
  const port = server.address().port;
  console.log(`Express临时运行在端口: ${port}`);

  // 设置环境变量，供React构建使用
  process.env.REACT_APP_API_PORT = port;

  // 执行React构建命令
  execSync('cd client && npm run build', { stdio: 'inherit' });

  // 关闭临时Express服务
  server.close(() => {
    console.log('临时Express服务已关闭');
  });
});

2. 修改React的API请求，使用注入的环境变量：

await axios.get(`http://localhost:${process.env.REACT_APP_API_PORT}/api/product-category`);

3. 执行脚本启动构建：

node start-and-build.js

注意： #

• 构建后的React包绑定了当前获取的端口，若Express重启更换端口，需要重新构建React

方案3：动态加载配置文件（适合生产环境分离部署） #

在生产环境中，通过外部配置文件动态指定API地址，无需重新构建React。

步骤： #

1. 在React的public目录下创建config.json：

{
  "apiBaseUrl": ""
}

2. 修改React代码，初始化时加载配置：

// 全局存储API地址
let apiBaseUrl;

// 应用初始化时加载配置
async function loadApiConfig() {
  const res = await fetch('/config.json');
  const config = await res.json();
  // 优先使用配置文件的地址，否则默认用当前页面的端口
  apiBaseUrl = config.apiBaseUrl || `http://localhost:${window.location.port}`;
}

// 发起API请求时使用
async function getProductCategory() {
  await loadApiConfig();
  const response = await axios.get(`${apiBaseUrl}/api/product-category`);
  return response.data;
}

3. 部署时更新配置文件：
   启动Express后，获取其实际端口，修改client/build/config.json中的apiBaseUrl为http://localhost:实际端口，再通过Nginx或Express托管React静态文件。

优势： #

• React构建后无需重新编译，只需修改配置文件即可适配新的API端口
• 适合生产环境频繁调整API地址的场景

内容的提问来源于stack exchange，提问作者Shivam