Azure WebApp部署两个Vite React应用遇/admin路由问题求助

核心问题分析 #

Azure Windows WebApp默认的IIS配置会将所有路由请求转发到根目录的web.config，导致/admin下的子路由被错误解析到客户应用的路由规则中，触发404。需要为每个虚拟应用单独配置web.config，确保各自的路由请求被正确处理。

具体解决步骤 #

1. 为/admin_portal目录添加独立的web.config #

在admin_portal部署目录下创建或修改web.config，配置IIS URL重写规则，让所有/admin开头的子路由都指向admin应用的入口文件：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Routes Admin" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/admin/.*" />
          </conditions>
          <action type="Rewrite" url="/admin/index.html" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
    </staticContent>
  </system.webServer>
</configuration>

2. 根目录（customer_portal）的web.config调整 #

确保根目录的web.config规则只处理非/admin开头的请求，避免覆盖admin应用的路由：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Routes Customer" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/admin/.*" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
    </staticContent>
  </system.webServer>
</configuration>

3. 验证Vite配置的正确性 #

确认两个应用的vite.config.js配置无误：

• 客户应用：

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

• 管理应用：

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

注意管理应用的base末尾要加斜杠，避免资源路径解析错误。

4. Azure虚拟应用配置检查 #

确保Azure门户的虚拟应用与目录配置正确：

• 虚拟路径：/，物理路径：site\wwwroot\customer_portal
• 虚拟路径：/admin，物理路径：site\wwwroot\admin_portal
  并且勾选每个虚拟应用的应用选项（标记为独立Web应用）。

验证部署 #

重新部署两个应用后，访问/admin/login等子路由，应该会正确加载管理应用的路由，而非跳转到客户应用的404页面。

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