同一Linux机器上多组Docker React前后端应用运行冲突问题

核心原因 #

1. 代理配置错误转发热更新请求
   ppm-frontend同时配置了package.json全局代理和容器内http_proxy环境变量，导致webpack-dev-server的热更新请求（如/main.*.hot-update.json）被错误转发到后端服务。后端没有这些前端静态资源，返回404后触发前端持续刷新。单独运行时webpack-dev-server可能优先处理本地请求，掩盖了问题；两个前端同时运行时，网络或缓存的交互放大了这个错误。

2. 热更新标识冲突
   两个前端应用在开发模式下使用了相同的webpack热更新文件名模板，导致浏览器或容器内的缓存互相干扰，触发不必要的刷新循环。

解决方案 #

方案一：精准控制代理范围，排除热更新请求 #

• 替换全局代理为路径代理
  移除package.json中的proxy字段，创建src/setupProxy.js自定义代理规则，仅转发API请求：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', // 仅代理API路径，根据实际接口前缀调整
    createProxyMiddleware({
      target: 'http://ppm-backend:5100',
      changeOrigin: true,
    })
  );
};

• 删除容器全局代理配置
  从ppm-frontend的Dockerfile中移除http_proxy=http://ppm-backend:5100/环境变量，避免webpack-dev-server的本地请求被代理。

方案二：自定义热更新文件名，避免冲突 #

修改webpack配置，为两个应用设置唯一的热更新文件名：

• 若使用自定义webpack配置：

// webpack.config.js
module.exports = {
  output: {
    hotUpdateMainFilename: 'ppm-main.[contenthash].hot-update.json', // 给ppm应用加唯一前缀
  },
};

• 若使用Create React App，可通过craco或eject后修改配置，确保daat和ppm应用的热更新文件名互不重复。

方案三：切换为生产部署模式 #

如果不需要开发热重载功能，将前端构建为生产镜像（执行npm run build后用nginx托管静态文件），彻底消除热更新请求带来的冲突。

验证步骤 #

1. 按方案调整配置后，重新构建前端镜像。
2. 同时启动两组应用，检查后端日志是否还有404错误。
3. 访问ppm-frontend（http://localhost:3100），确认页面不再持续刷新。

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