如何在NodeJS的子路径下部署React应用？

1. 修正React项目的homepage配置 #

打开client/package.json，将homepage设置为子路径形式：

"homepage": "/blog"

（不要直接写完整域名，保持相对主域名的路径格式）

2. 重新构建React应用 #

进入client目录，执行构建命令生成正确的静态文件：

npm run build

3. 调整Express服务器配置（server.js） #

先引入依赖（未引入的话） #

const path = require('path');

配置/blog路径的静态资源与SPA路由 #

// 为/blog路径提供React build目录的静态资源
app.use('/blog', express.static(path.join(__dirname, 'client', 'build')));

// 处理SPA路由 fallback：所有/blog下的非API请求返回React的index.html
app.get('/blog/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'));
});

// 保留原有主域名下的public目录静态服务
app.use(express.static(path.join(__dirname, 'public')));

注意配置顺序：先处理/blog相关的路由和静态资源，再配置主目录的public服务，避免路径匹配冲突。

4. 适配React Router（如果使用） #

如果React应用用到了React Router，需要给路由组件设置basename属性，确保路由跳转正确：

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/blog">
      {/* 你的路由组件内容 */}
    </BrowserRouter>
  );
}

5. 常见问题排查 #

• 你之前单独指向client/build/static的配置会导致资源路径不匹配，应该直接将静态服务指向整个build目录，React构建后的index.html会自动正确引用static下的资源。
• 检查内容安全策略（CSP），确保允许加载/blog/路径下的脚本、样式等资源，比如在CSP规则中添加'self' /blog/。
• 若使用反向代理（如Nginx），需确保所有/blog开头的请求都转发到Express服务器，避免代理规则拦截资源请求。

内容的提问来源于stack exchange，提问作者Paweł Jakubowski