如何将React电商项目整合到Node.js搭建MERN全栈应用（单文件夹）

一、整理项目结构 #

将你的React电商项目（比如用create-react-app生成的项目）整体迁移到新的根文件夹下，命名为client。然后在根目录新建server文件夹存放Node.js后端代码，最终结构如下：

your-ecommerce-app/
├── client/          # 原React电商项目
│   ├── public/
│   ├── src/
│   ├── package.json
│   └── ...
├── server/          # 新建后端文件夹
│   ├── models/      # MongoDB数据模型
│   ├── routes/      # API路由
│   ├── server.js    # 后端入口文件
│   └── package.json
└── package.json     # 根目录统一脚本配置

二、搭建Node.js后端（Express） #

1. 进入server文件夹，初始化npm并安装核心依赖：

cd server
npm init -y
npm install express mongoose cors dotenv

（可选：安装nodemon实现开发时后端自动重启：npm install nodemon --save-dev）

2. 在server文件夹创建server.js，写入基础后端配置：

require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 5000;

// 中间件配置
app.use(cors());
app.use(express.json());

// 连接MongoDB
mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log('MongoDB连接成功'))
  .catch(err => console.error('MongoDB连接失败:', err));

// 挂载API路由（可根据电商需求替换）
app.use('/api/products', require('./routes/products'));

// 启动服务
app.listen(PORT, () => console.log(`后端服务运行在端口 ${PORT}`));

3. 在server文件夹新建.env文件，存储MongoDB连接字符串：

MONGO_URI=mongodb+srv://<你的用户名>:<你的密码>@cluster0.mongodb.net/ecommerce?retryWrites=true&w=majority
PORT=5000

4. 在server/package.json中添加启动脚本：

"scripts": {
  "start": "node server.js",
  "dev": "nodemon server.js"
}

三、配置React前端代理 #

打开client/package.json，在根节点添加代理配置，让前端请求自动转发到后端服务：

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

之后前端调用API时，直接使用相对路径即可，示例：

fetch('/api/products')
  .then(res => res.json())
  .then(data => console.log(data));

四、统一管理启动脚本 #

在根目录初始化npm，安装concurrently实现前后端同时启动：

npm init -y
npm install concurrently --save-dev

然后在根目录的package.json中添加脚本：

"scripts": {
  "dev": "concurrently \"cd server && npm run dev\" \"cd client && npm start\"",
  "build": "cd client && npm run build",
  "start": "cd server && npm start"
}

• 执行npm run dev：同时启动前后端开发服务
• 执行npm run build：打包React生产环境代码
• 执行npm start：启动生产环境后端服务（同时托管打包后的前端静态文件）

五、生产环境部署配置 #

在server/server.js中添加静态文件托管逻辑，让后端直接提供打包后的React页面：

const path = require('path');

// 生产环境下托管React静态文件
if (process.env.NODE_ENV === 'production') {
  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'));
  });
}

六、添加MongoDB数据模型和API路由 #

根据电商需求，在server/models创建数据模型（示例Product.js）：

const mongoose = require('mongoose');

const productSchema = new mongoose.Schema({
  name: { type: String, required: true },
  price: { type: Number, required: true },
  description: String,
  imageUrl: String
});

module.exports = mongoose.model('Product', productSchema);

在server/routes/products.js编写CRUD路由：

const express = require('express');
const router = express.Router();
const Product = require('../models/Product');

// 获取所有商品
router.get('/', async (req, res) => {
  try {
    const products = await Product.find();
    res.json(products);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// 添加新商品
router.post('/', async (req, res) => {
  const product = new Product({
    name: req.body.name,
    price: req.body.price,
    description: req.body.description,
    imageUrl: req.body.imageUrl
  });
  try {
    const newProduct = await product.save();
    res.status(201).json(newProduct);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

module.exports = router;

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