如何在react-scripts启动时添加自定义Express服务器？

1. 准备Express服务器文件 #

在项目根目录创建server.js，示例代码如下：

const express = require('express');
const app = express();
const port = process.env.SERVER_PORT || 5000;

// 示例API接口
app.get('/api/hello', (req, res) => {
  res.send('来自Express服务器的响应');
});

app.listen(port, () => {
  console.log(`Express服务器已启动，端口：${port}`);
});

2. 安装依赖 #

需要用concurrently同时运行两个进程，执行安装命令：

npm install concurrently --save-dev

3. 修改package.json的脚本 #

找到scripts字段，替换原有配置为：

"scripts": {
  "start": "concurrently \"npm run start:react\" \"npm run start:server\"",
  "start:react": "react-scripts start",
  "start:server": "node server.js",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

之后执行npm start，就能同时启动React开发服务器和Express服务器。

4. 配置代理解决跨域（可选） #

如果React应用需要调用Express的API，在package.json中添加代理配置：

"proxy": "http://localhost:5000"

这样React里发起的/api/hello请求会自动转发到Express服务器的对应接口，无需手动写完整域名。

额外说明 #

• 确保Express服务器端口（如5000）和React默认的3000端口不冲突。
• 这种方式不需要执行eject，保留了Create React App的默认配置，后续维护更方便。

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