AKS部署React应用Ingress路由异常，刷新报错求配置调整方案

问题描述 #

在AKS上部署React应用后，首页访问地址为https://myapp.host.com/dev/，但点击导航按钮跳转到/profile页面时，URL变为https://myapp.host.com/profile——虽然首次能加载页面，但刷新时会因应用无法识别该URL而报错。预期跳转后的URL应为https://myapp.host.com/dev/profile，确保刷新后仍能正常访问。

当前使用的Ingress配置如下：

ingress:
  name: myapp-ingress
  annotations: 
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/rewrite-target: /$1
  hosts: 
  - host: myapp.host.com
    paths: 
    - path: /dev/(.*)
      pathType: Prefix
      backend: 
        service:
          name: myapp-svc
          port: 
            number: 8080
  tls: 
  - hosts: 
    - myapp.host.com
    secretName: myapp-ingress-tls-secret

修复方案 #

需要同时调整Ingress配置和React应用的基础路径设置，具体如下：

1. 修改Ingress配置 #

调整重写规则、启用正则匹配，并添加基础路径传递相关注解，修改后的配置如下：

ingress:
  name: myapp-ingress
  annotations: 
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    nginx.ingress.kubernetes.io/add-base-url: "true"
    nginx.ingress.kubernetes.io/configuration-snippet: |
      rewrite ^/dev$ /dev/ permanent;
  hosts: 
  - host: myapp.host.com
    paths: 
    - path: /dev/(.*)
      pathType: ImplementationSpecific
      backend: 
        service:
          name: myapp-svc
          port: 
            number: 8080
  tls: 
  - hosts: 
    - myapp.host.com
    secretName: myapp-ingress-tls-secret

关键修改说明：

• nginx.ingress.kubernetes.io/use-regex: "true"：启用正则路径匹配，确保/dev/(.*)的规则生效
• nginx.ingress.kubernetes.io/add-base-url: "true"：让Nginx将/dev/作为基础路径传递给React应用，确保路由生成的URL自动带上该前缀
• configuration-snippet：处理不带末尾斜杠的/dev请求，重定向到/dev/，避免路由路径不一致
• pathType: ImplementationSpecific：使用正则路径时，该类型比Prefix更适配正则匹配逻辑

2. 配置React应用基础路径 #

确保React应用生成的路由URL包含/dev前缀：

• Create React App项目：在package.json中添加"homepage": "/dev/"
• React Router v6+：在路由根组件中设置basename属性：

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter basename="/dev">
    {/* 你的路由组件内容 */}
  </BrowserRouter>
);

效果验证 #

调整完成后，点击导航按钮时会生成https://myapp.host.com/dev/profile的URL，Ingress会将该请求重写为/profile转发给后端服务；刷新页面时，Ingress能正确识别路径并转发，React应用也能匹配到对应的路由规则，正常加载页面。

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