React应用经Nginx反向代理子目录部署出现空白页问题求助

问题背景 #

有一个基于Create React App构建的quizapp，运行在Docker容器中，通过npm run start启动，本地端口转发后访问正常。现需部署到以Nginx为反向代理的远程服务器，因根路径/已被占用，计划使用子目录/quizapp部署。

Nginx配置差异 #

初始配置（访问空白） #

location / {
    proxy_pass http://127.0.0.1:6789/;
}

location /someotherapp/ {
        rewrite ^/smallblog/(.*) /$1 break;
    proxy_set_header Host              $host;
    proxy_set_header X-Real-IP         $remote_addr;
    proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host  $host;
    proxy_set_header X-Forwarded-Port  $server_port;
    proxy_set_header X-Forwarded-Prefix /smallblog;
    proxy_pass http://127.0.0.1:8000/;
    proxy_pass_request_headers on;
}

location /quizapp {
        rewrite ^/quizapp/(.*) /$1 break;
    proxy_set_header Host              $host;
    proxy_set_header X-Real-IP         $remote_addr;
    proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host  $host;
    proxy_set_header X-Forwarded-Port  $server_port;
    proxy_set_header X-Forwarded-Prefix /quizapp;
    proxy_pass http://127.0.0.1:3500/;
    proxy_pass_request_headers on;
}

访问mypublicipaddress/quizapp显示空白页面，但同配置逻辑的Flask应用（/someotherapp）可正常运行。

简化配置（可正常访问） #

location /quizapp/ {
    proxy_pass http://127.0.0.1:3500/;
}

React路由代码 #

function App() {
  return (
    <Router basename='/'>
      <Container maxWidth="sm">
        <Box textAlign="center" mt={5}>
          <Routes>
            <Route path="/" element={<><Typography variant="h2" fontWeight="bold">Quiz app</Typography><Settings /></>} />
            <Route path="/questions" element={<Questions />} />
            <Route path="/finalscreen" element={<FinalScreen />} />
          </Routes>
        </Box>
      </Container>
    </Router>
  );
}

export default App;

解决思路 #

1. 修正React Router的basename配置
   React Router的basename需设置为子目录路径'/quizapp'，而非默认的'/'。否则React路由会默认以根路径/匹配，无法识别子目录下的路由规则，导致组件不渲染。修改代码：

   <Router basename='/quizapp'>
   

2. 调整Nginx的location与rewrite规则
   初始配置中location /quizapp未加末尾斜杠，且rewrite ^/quizapp/(.*) /$1 break仅匹配/quizapp/xxx格式的请求。当访问/quizapp（不带斜杠）时，rewrite规则不生效，Nginx会将请求转发到http://127.0.0.1:3500/quizapp，而React应用根路径为/，导致资源匹配失败。

   • 方案一：将location改为/quizapp/（与简化配置一致），保留原有rewrite规则；
   • 方案二：调整rewrite规则，同时匹配带斜杠与不带斜杠的请求：rewrite ^/quizapp(/.*)?$ $1 break。

3. 配置Create React App的homepage
   在项目的package.json中添加"homepage": "/quizapp"，这样打包后的静态资源路径会自动添加/quizapp前缀，避免资源加载404错误。该配置对npm run start的开发模式同样生效。

4. 排查浏览器控制台错误
   打开浏览器开发者工具（F12）查看网络请求与控制台错误，空白页面通常由静态资源加载失败或路由匹配错误导致。若出现404错误，说明资源路径配置有误，需调整homepage或Nginx规则。

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