部署集成AD B2C的Angular14应用至App Service遇404问题求助

问题背景 #

我将集成AD B2C（用户流为signupsignin1）并采用authorization code flow PKCE的Angular 14应用部署到Azure App Service，操作流程如下：

• 参照官方文档完成B2C与Angular应用配置，迁移至Angular14并创建带登录按钮的home组件，本地（重定向URL：http://localhost:4200/home）运行正常。
• 部署配置步骤：
  1. 创建基于Node v16、Windows系统的App Service，获取URL：https://name-app.azurewebsites.net
  2. Angular端配置：
     • 添加web.config并修改angular.json将其纳入资源；
     • 在msalConfig中更新重定向URL为https://name-app.azurewebsites.net/home
  3. 在Angular应用注册中添加新重定向URI：https://name-app.azurewebsites.net/home
  4. 执行ng b构建应用
  5. 通过VS的Azure App Service扩展部署dist文件夹
  6. 在Azure门户配置App Service虚拟路径为site\wwwroot\name-project-angular并启动服务

出现的问题 #

主页可加载，但点击登录按钮时出现：

• 页面提示资源不存在；
• 控制台显示GET https://name-app.azurewebsites.net/home返回404；
• favicon.ico请求404
  同时存在Cookie SameSite属性、页面Quirks Mode警告。

疑问 #

msalConfig或应用注册的重定向URL是否错误？web.config配置是否有误？

排查与解决方案 #

1. 重定向URL配置验证 #

当前msalConfig和应用注册中的重定向URL完全匹配，格式也符合要求（无多余斜杠、HTTPS协议正确），这部分配置不存在问题，无需调整。

2. Web.config 配置（核心修复点） #

Angular是单页应用，Azure App Service的IIS必须通过web.config配置路由重写，否则直接访问子路由或登录回调时会返回404。检查并替换为以下正确配置：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
  </system.webServer>
</configuration>

同时确认：

• angular.json的assets配置已包含web.config，示例：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/web.config"
  ]
  

• 部署后site\wwwroot\name-project-angular目录下存在web.config，且内容与上述一致。

3. 虚拟路径与默认文档配置 #

• 进入Azure门户的App Service -> 配置 -> 默认文档，添加index.html并移至优先级最高位置；
• 确认虚拟路径site\wwwroot\name-project-angular指向的是dist打包后的完整项目目录，无层级错误。

4. 其他警告修复 #

• Cookie SameSite警告：在Azure AD B2C应用注册的「认证」->「Cookie设置」中，将SameSite属性设为Lax；
• Quirks Mode警告：确保src/index.html开头包含标准DOCTYPE声明：

  <!DOCTYPE html>
  <html lang="en">
  ...
  </html>
  

• favicon.ico 404：确认src/favicon.ico存在，且angular.json的assets配置已包含该文件，部署后检查dist目录下是否同步存在。

5. 部署步骤优化 #

• 使用生产环境构建命令：ng build --prod，确保打包优化后的生产版本；
• 部署时确认VS扩展的目标路径为site\wwwroot\name-project-angular，避免误覆盖根目录配置。

内容的提问来源于stack exchange，提问作者LUIS DIEGO CACERES GARCIA