在同一主机不同路径部署多个React应用的问题排查

问题根源 #

1. React默认以根路径/加载静态资源，部署在/app子路径时，资源请求会指向example.com/static/xxx而非example.com/app/static/xxx，导致加载失败
2. 原Ingress配置未处理example.com/app（不带末尾斜杠）的路径匹配，且独立Ingress存在路径优先级冲突风险

修正Ingress配置 #

将两个应用的Ingress规则合并为一个资源，确保子路径匹配优先级高于根路径，同时开启正则匹配支持：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: apps-ingress
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
    kubernetes.io/ingress.allow-http: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    nginx.ingress.kubernetes.io/use-regex: "true" # 开启正则匹配才能让路径规则生效
  labels:
    app: apps
spec:
  ingressClassName: nginx
  rules:
    - host: example.com
      http:
        paths:
          # 优先匹配App2的子路径
          - path: /app(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: app2
                port:
                  number: 80
          # 剩余请求转发给App1
          - path: /(.*)
            pathType: Prefix
            backend:
              service:
                name: app1
                port:
                  number: 80

React应用配置调整 #

1. 设置基础路径 #

• Create React App：
  • 在package.json中添加："homepage": "/app"
  • 或构建时指定：PUBLIC_URL=/app npm run build
• Vite：
  • 在vite.config.ts中配置：

    export default defineConfig({
      base: '/app/',
      // 其他配置...
    })
    

2. 路由适配 #

如果使用React Router，需设置路由的basename属性：

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter basename="/app">
    <App />
  </BrowserRouter>
);

3. 静态资源引用 #

确保所有静态资源使用相对路径或通过环境变量引用：

// 环境变量方式
<img src={process.env.PUBLIC_URL + '/logo.png'} alt="Logo" />
// 相对路径方式（推荐）
<img src="./logo.png" alt="Logo" />

验证步骤 #

1. 重新构建App2的Docker镜像，包含上述配置变更
2. 部署修正后的Ingress资源：kubectl apply -f apps-ingress.yaml
3. 访问example.com/app和example.com/app/，检查页面渲染及静态资源加载状态
4. 查看Ingress控制器日志确认请求转发：

   kubectl logs -n kube-system $(kubectl get pods -n kube-system -l app=nginx-ingress -o name | head -n1)
   

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