Nginx+React在K8s集群正常运行，本地部署异常求助

核心问题 #

你遇到的本地访问失败，根源在于React的homepage配置与Nginx路由规则不匹配：

• React设置"homepage": "/apples/oranges/webapp"后，build生成的静态资源引用路径会自动带上该前缀，但文件本身仍存放在/usr/share/nginx/html根目录下。
• 集群中正常是因为Ingress或反向代理做了路径重写（将/apples/oranges/webapp转发到Nginx的/路径），但本地直接访问子路径时，Nginx会去/usr/share/nginx/html/apples/oranges/webapp找文件，自然找不到。

具体修复步骤 #

1. 修改Nginx配置适配子路径 #

更新nginx.conf，让Nginx正确识别React的子路径前缀：

server {
    listen 80;

    # 匹配React的homepage子路径
    location /apples/oranges/webapp/ {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 处理静态文件与React客户端路由：找不到文件时返回子路径下的index.html
        try_files $uri $uri/ /apples/oranges/webapp/index.html;
    }

    location /api/ {
        proxy_pass http://backend;
        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;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

2. 清理Docker-compose的无效卷挂载 #

当前frontend服务挂载的./frontend:/app会覆盖容器内的build工作目录，虽然不影响Nginx的静态文件目录，但完全没必要（Docker多阶段构建已经把产物复制到了Nginx目录），建议移除：

version: '3.7'
services:
  backend:
    # 保持原配置不变
    ...
  frontend:
    container_name: frontend
    build:
      context: ./frontend
      dockerfile: Dockerfile.frontend
    ports:
      - 3000:80
    # 移除以下无效挂载
    # volumes:
    #   - ./frontend:/app
    #   - ./frontend/package.json:/app/package.json
    depends_on:
      - backend
    restart: always

3. 重新构建并启动服务 #

执行命令更新镜像并重启：

docker-compose build --no-cache frontend
docker-compose up frontend

验证 #

访问http://localhost:3000/apples/oranges/webapp即可正常加载应用，且刷新页面不会出现404（适配React客户端路由）。

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