如何在Create React App项目中同时运行Express服务器？

开发环境（本地调试） #

方案1：用concurrently一键启动两个服务 #

这是最省心的方式，能让React开发服务器和Express后端同时启动：

1. 安装依赖：

npm install concurrently --save-dev

2. 打开项目根目录的package.json，修改scripts字段：

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

之后执行npm start，就能同时拉起React的热重载服务器和你的Express后端了。

方案2：配置代理+手动/同时启动 #

如果需要避免本地跨域问题，可以给React配置代理，让前端请求自动转发到Express：

1. 先在server.js里把后端端口设为3001（别和React默认的3000冲突）：

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`后端服务运行在端口 ${PORT}`);
});

2. 在React项目的package.json末尾加一行代理配置：

"proxy": "http://localhost:3001"

3. 启动方式可以二选一：
   • 开两个终端，分别执行npm start（React）和node server.js（后端）
   • 还是用concurrently，和方案1的scripts配置一样，一键启动

生产环境部署 #

生产环境不需要React的开发服务器，直接让Express托管React的静态文件即可：

1. 先打包React项目：

npm run build

这会在根目录生成build文件夹，里面是编译好的静态资源。
2. 修改server.js，添加静态文件托管和单页路由兼容：

const path = require('path');
// 托管build文件夹里的静态资源
app.use(express.static(path.join(__dirname, 'build')));

// 所有非API的请求，都返回React的index.html（解决单页应用路由刷新404问题）
// 注意：这行代码要放在所有API路由的后面
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

3. 修改package.json的启动脚本，生产环境直接启动Express：

"scripts": {
  "start": "node server.js", // 生产环境用这个
  "dev": "concurrently \"npm run react-start\" \"npm run server\"", // 开发环境用这个
  "react-start": "react-scripts start",
  "server": "node server.js",
  "build": "react-scripts build"
}

部署时，先运行npm run build生成静态文件，再执行npm start，Express就会同时处理API请求和托管React前端了。

额外提示 #

• 数据库连接信息这类敏感内容，别硬编码在server.js里，用dotenv包管理：安装dotenv，创建.env文件存数据库地址、账号密码，然后在server.js开头加require('dotenv').config()。
• 确保Express的API路由写在app.get('*')之前，不然API请求会被当成前端路由返回index.html。

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