如何在Azure上实现多Static Web Apps绑定通用自定义域名并按路径访问

核心方案：Azure Front Door + Static Web Apps路由适配 #

你之前尝试Front Door未成功，大概率是缺少了Static Web Apps侧的路由重写配置，以下是完整可落地的步骤：

1. 创建并配置Azure Front Door #

1.1 初始化Front Door资源 #

• 创建标准/高级版Front Door（经典版也支持，但高级版功能更完善），设置好前端终结点（后续绑定自定义域名用）。

1.2 配置后端池 #

为每个Static Web Apps单独创建后端池：

• 后端类型选择Static Web App，直接关联对应的app1、app2、app3实例。
• 保留默认健康探测配置（HTTP/HTTPS探测），确保后端状态正常。

1.3 配置路由规则 #

为每个子路径创建独立路由规则，关键是路径重写和主机头转发：

• 针对www.testing.com/app1/*：
  • 匹配路径设为/app1/*
  • 路径重写规则设为/{remainingPath}（将/app1之后的路径完整传递给后端Static Web App）
  • 选择app1对应的后端池
  • 开启Forward Host Header，值设为该Static Web App的默认域名（如app1.azurestaticapps.net）
• 同理复制配置app2、app3的路由规则，分别对应/app2/*、/app3/*路径。

1.4 绑定自定义域名 #

• 在Front Door的「自定义域名」菜单添加www.testing.com，通过CNAME记录完成DNS验证（将www.testing.com指向Front Door的前端终结点域名）。
• 开启HTTPS，选择Front Door托管证书，自动完成证书部署和续期。

2. 调整Static Web Apps的路由配置 #

这是解决问题的关键步骤，需要为每个应用修改staticwebapp.config.json，适配子路径访问：

针对app1的配置示例 #

{
  "routes": [
    {
      "route": "/*",
      "rewrite": "/app1/{route}",
      "allowedRoles": ["anonymous"]
    }
  ],
  "navigationFallback": {
    "rewrite": "/app1/index.html",
    "exclude": ["*.{css,js,png,jpg,gif}"]
  }
}

• app2、app3需替换配置中的/app1为对应子路径/app2、/app3。
• 该配置会将应用内所有路由请求重写为对应子路径格式，适配Front Door的转发规则，同时保证SPA单页应用的路由正常。

3. 验证效果 #

• 访问www.testing.com/app1、www.testing.com/app2，确认各应用内容正常加载。
• 跨域问题：所有请求处于同一域名下，不存在跨域限制。
• 存储隔离：各子路径的localStorage/sessionStorage完全独立，不会互相干扰。

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