同一服务器部署React前端与Node后端，避免重复执行npm run build的方法

针对React前端与Node后端同端口部署时，前端修改需重复执行npm run build的问题，以下是几种实用方案：

方案1：React Dev Server + 反向代理（Create React App 场景） #

这是CRA项目最常用的开发模式，无需修改后端核心代码：

• 启动Node后端服务，监听非8080的端口（例如8000）
• 在React项目的package.json中添加代理配置，将API请求转发到后端：

  "proxy": "http://localhost:8000"
  

• 执行npm start启动React开发服务器（默认端口3000），此时前端页面的所有/api开头的请求会自动转发到后端的8000端口。前端代码修改后会自动热重载，完全无需执行npm run build
• 若需要外部访问统一到8080端口，可在Node后端中添加静态文件代理（开发阶段可选），将前端页面请求转发到React Dev Server：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  app.use('/', createProxyMiddleware({ target: 'http://localhost:3000', changeOrigin: true }));
  

方案2：后端主导的热重载（自定义Webpack场景） #

如果你的项目使用自定义Webpack配置，可通过中间件让Node后端直接serve前端开发文件并支持热更新：

1. 安装依赖：

   npm install webpack-dev-middleware webpack-hot-middleware --save-dev
   

2. 修改Node后端代码，集成Webpack热重载中间件：

   const express = require('express');
   const webpack = require('webpack');
   const webpackDevMiddleware = require('webpack-dev-middleware');
   const webpackHotMiddleware = require('webpack-hot-middleware');
   // 引入React项目的Webpack配置文件
   const webpackConfig = require('../client/webpack.config.js');
   
   const app = express();
   const compiler = webpack(webpackConfig);
   
   // 启用Webpack开发中间件，实时编译前端代码
   app.use(webpackDevMiddleware(compiler, {
     publicPath: webpackConfig.output.publicPath
   }));
   
   // 启用热重载，修改代码后自动刷新页面
   app.use(webpackHotMiddleware(compiler));
   
   // 后端API路由
   app.get('/api/hello', (req, res) => {
     res.send('Hello from Node backend');
   });
   
   app.listen(8080, () => {
     console.log('Server running on http://localhost:8080');
   });
   

3. 启动后端服务后，访问http://localhost:8080即可看到前端页面，修改前端代码会自动编译并热更新，无需手动执行构建命令。

方案3：使用Vite替代Create React App（推荐） #

Vite的热更新速度远快于传统Webpack，且内置代理功能，非常适合快速开发：

1. 若使用CRA，可迁移到Vite，或直接创建Vite React项目：

   npm create vite@latest my-react-app -- --template react
   

2. 在vite.config.js中配置代理，将API请求转发到Node后端：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
     plugins: [react()],
     server: {
       port: 8080, // 直接让Vite跑在8080端口
       proxy: {
         '/api': {
           target: 'http://localhost:8000', // 后端服务端口
           changeOrigin: true
         }
       }
     }
   });
   

3. 执行npm run dev启动Vite开发服务器，前端代码修改后即时更新，无需构建，同时所有API请求会自动转发到后端。

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