Azure DevOps部署Angular应用至App Service后无法显示求助

核心排查方向 #

• 确认部署文件位置
  Azure App Service默认从site/wwwroot目录加载Web内容，务必确保Angular编译后的dist文件夹内容直接上传到wwwroot根目录，而非子文件夹。如果文件存放在子目录，App Service无法找到入口index.html，会触发访问错误。
• 校验Angular构建产物
  构建时必须使用生产环境命令：

  # Angular 11及以下
  ng build --prod
  # Angular 12+
  ng build --configuration production
  

  检查编译后的index.html，确保所有静态资源（JS、CSS、图片）的路径正确，避免相对路径错误导致资源加载失败。
• 查看App Service运行日志
  登录Azure门户进入目标App Service，依次打开日志→应用服务日志，开启「文件系统日志」；再进入日志流，实时查看网站运行时的错误详情，比如404、500错误的具体触发原因。
• 配置SPA路由 fallback
  Angular作为单页应用，刷新非首页时会触发404，需配置路由重定向：
  • 若使用Linux App Service，在配置→常规设置中设置启动命令：

    pm2 serve /home/site/wwwroot --no-daemon --spa
    

  • 若使用Windows App Service，在wwwroot目录添加web.config文件：

    <?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="./index.html" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>
    

• 检查FTP部署完整性
  核对FTP上传的文件与本地编译产物是否一致，确认index.html、main.js、styles.css等核心文件未遗漏或损坏，必要时重新上传完整的构建包。

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