React应用部署到Nginx服务器后显示空白页面求助

• 修正Nginx监听端口
  你希望通过https://hostname:5000/app访问，但当前Nginx配置监听的是5001和5002端口，端口不匹配导致请求没被正确处理。修改server块的listen指令：

  server {
    listen <IP>:5000 ssl http2; # 改为你访问的5000端口（HTTPS）
    ssl_certificate <path_to>/cert.pem;
    ssl_certificate_key <path_to>/key.pem;
  
    # 其他配置...
  }
  

• 调整Nginx的/app location配置
  当前index设置错误，且缺少单页应用路由支持，修改location /app块：

  location /app {
    root /var/www/html/;
    index index.html; # root + location已指向/var/www/html/app，无需额外路径
    try_files $uri $uri/ /app/index.html; # 处理React路由刷新、子路由访问问题
  }
  

• 修正React的homepage配置
  将package.json中的"homepage": "."改为"homepage": "/app"，这样打包后的静态资源路径会自动以/app开头，确保Nginx能正确定位资源文件。

• 重新打包并部署
  执行yarn build重新生成生产包，将新的build目录下所有文件覆盖到服务器的/var/www/html/app路径中。

• 重启Nginx生效配置
  执行命令：

  sudo nginx -s reload
  

• 额外排查点

  • 检查服务器5000端口是否被防火墙/安全组放行，确保外部能正常访问
  • 清除浏览器缓存后再访问，避免旧资源干扰
  • 查看浏览器Network面板，确认静态资源（js/css）的请求路径是否为/app/static/xxx，若出现404则需再次核对路径配置

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