如何用Express.js正确部署已构建React应用？解决路由冲突

首先要给你点个赞——你抓住了SPA路由与Express后端冲突的核心：必须区分真实静态资源请求和React Router的前端路由请求，这个思路完全没问题。不过你的实现存在几个可以优化的点，而且Express其实已经提供了更简洁、可靠的内置方案来处理这类场景，咱们一步步说：

你的当前实现存在的问题 #

1. 异步读取文件的时序风险：用fs.readdir在服务器启动时读取build文件夹的文件列表，这是异步操作——如果服务器在文件读取完成前就完成启动，fileArray会是空的，导致路由判断完全失效。
2. 路由判断逻辑不够严谨：手动截取路由的第一部分来匹配文件列表，没法处理嵌套路径（比如/static/css/main.css这种多层级静态资源），也无法应对后续新增的静态文件（除非重启服务器重新读取列表）。

更稳妥的标准实现方式 #

Express的express.static中间件本身就具备自动识别真实静态资源的能力：当请求的路径对应build文件夹里存在的文件/文件夹时，它会直接返回对应资源；如果不存在，才会把请求传递给后续的中间件。我们只需要利用这个特性，搭配一个“兜底”路由返回React的index.html即可。

结合你的多网站结构，优化后的代码如下：

const apps = {
  example: { 
    folder: "example-website", 
    app: express(), 
    server: null, 
    port: 80, 
    protocol: "http", 
    cert: null, 
    subdomains: [] 
  }
}

for (const websiteKey of Object.keys(apps)) {
  const website = apps[websiteKey];
  const websiteBuildPath = path.join(__dirname, 'client', website.folder, 'build');

  // 1. 优先挂载静态资源中间件，自动处理真实文件/文件夹请求
  website.app.use(express.static(websiteBuildPath));

  // 2. Catch-all兜底路由：所有非静态资源的请求，都返回React的index.html，交给React Router处理
  website.app.get('*', (req, res) => {
    res.sendFile(path.join(websiteBuildPath, 'index.html'));
  });

  // ... 你的其他服务器启动代码（比如监听端口）
}

这个方案的优势 #

• 可靠性更高：利用Express官方维护的静态资源处理逻辑，能正确处理嵌套路径、缓存、文件权限等你手动实现可能忽略的细节。
• 代码更简洁：省去了手动读取文件列表、截取路由的复杂逻辑，可读性和维护性更强。
• 无异步风险：服务器启动即可正常工作，不需要等待文件读取完成。

额外注意事项 #

如果你的Express还同时提供API接口，一定要把API路由挂载在静态资源中间件之前，避免API请求被误判为前端路由：

// 先挂载API路由，确保/api开头的请求优先被处理
website.app.use('/api', yourApiRouter);

// 再处理静态资源
website.app.use(express.static(websiteBuildPath));

// 最后兜底返回index.html
website.app.get('*', (req, res) => {
  res.sendFile(path.join(websiteBuildPath, 'index.html'));
});

如果需要支持POST/PUT等其他HTTP方法的前端路由场景（虽然React Router主要处理GET请求），可以把app.get('*')改成app.all('*')，但要注意不要影响API的正常请求。

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