如何解决Azure容器实例中React.js Vite+Caddy自定义路由的异常问题

问题分析 #

核心矛盾在于React Router的basename与Vite的base配置不匹配，加上Caddy反向代理的路径处理规则，导致要么资源加载失败，要么触发无限重定向。

分步解决方案 #

1. 对齐React Router的basename配置

把Router的basename改成和自定义路由一致的/react-app/，确保路由路径与URL前缀完全匹配：

ReactDOM.createRoot(document.getElementById('root')).render(
  <Router basename="/react-app/">
    <Routes>
      <Route path="/" element={<Login />} />
      <Route path="/app" element={<App />} />
    </Routes>
  </Router>
)

2. 修正Vite开发服务器的资源路径配置

在Vite配置中添加server.origin，让Vite生成的资源URL包含自定义路由前缀，同时保留生产环境的base配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 3001,
    strictPort: true,
    // 替换成你的实际域名（FQDN）
    origin: 'http://your-fqdn/react-app'
  },
  base: '/react-app/',
  preview: {
    port: 3001,
  }
})

这个配置会让Vite生成的JS、CSS等资源路径指向http://your-fqdn/react-app/...，用户访问这些资源时，Caddy能正确转发到Vite的dev server。

3. 确认Caddy反向代理规则

保持Caddy的handle_path配置不变，它会自动移除/react-app前缀后转发请求到Vite的3001端口：

your-fqdn {
    handle_path /backend* {
        reverse_proxy http://localhost:8000
    }

    handle_path /react-app* {
        reverse_proxy http://localhost:3001 {
            header_up Host {host}
            header_up X-Forwarded-Host {host}
            header_up X-Forwarded-For {remote}
            header_up X-Forwarded-Proto {scheme}
        }
    }

    handle {
        reverse_proxy http://localhost:3000
    }

    handle {
        reverse_proxy http://localhost:5000
    }
}

举个例子：

• 用户访问http://your-fqdn/react-app/，Caddy会转发到http://localhost:3001/，对应React Router的path="/"（Login组件）
• 用户访问http://your-fqdn/react-app/app，Caddy转发到http://localhost:3001/app，对应React Router的path="/app"（App组件）

问题根源解释 #

• 不修改basename导致资源加载失败：React Router默认用根路径，Vite生成的资源路径是/src/...，但用户实际访问的是/react-app/src/...，Caddy没有匹配到对应的转发规则，导致资源404。
• 修改basename后无限重定向：Vite开发服务器默认不知道自己在反向代理后面，生成的资源路径不带/react-app前缀，浏览器请求这些路径时被Caddy转发到其他服务（比如3000或5000端口），进而触发重定向循环。配置server.origin后，Vite会生成带正确前缀的资源URL，解决这个问题。

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