Azure Web App部署Angular应用后无法访问视频文件求助

以下是几个排查和解决的步骤：

• 修正虚拟目录配置
  你之前将虚拟目录指向单个视频文件是错误的，虚拟目录应该映射到文件夹而非单个文件。在Azure门户的Web App配置 -> 虚拟应用和目录中，设置：

  • 虚拟路径：/htmldelivery/assets/videos
  • 物理路径：site/wwwroot/htmldelivery/assets/videos
    不需要勾选“应用程序”选项，保存后重新测试访问。

• 验证文件实际存在性与路径
  通过Azure门户的「高级工具」（Kudu）进入调试控制台 -> 文件管理器，查看site/wwwroot下的目录结构，确认：

  1. test.mp4确实存在于htmldelivery/assets/videos/路径下
  2. 文件名大小写完全匹配请求URL（Azure Web App区分大小写，比如Test.mp4和test.mp4会被视为不同文件）

• 配置web.config处理静态文件与路由
  Angular应用的web.config需要正确配置，确保静态文件不会被路由规则拦截，同时添加MP4的MIME类型映射。在site/wwwroot下创建或修改web.config，内容如下：

  <configuration>
    <system.webServer>
      <staticContent>
        <!-- 添加MP4的MIME类型 -->
        <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
      </staticContent>
      <!-- Angular路由重写规则，排除实际存在的文件/目录 -->
      <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>
  

  这个配置会让Web App优先返回实际存在的静态文件，不存在的路径才重写到Angular的index.html。

• 检查Angular构建配置
  确认Angular项目的angular.json中，assets数组包含了视频所在的文件夹，确保构建时这些文件被复制到dist目录：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/htmldelivery/assets/videos"
  ],
  

  如果部署是通过CI/CD工具（如GitHub Actions）完成的，还要检查部署脚本是否正确将dist目录下的所有文件（包括视频）上传到Azure Web App的site/wwwroot。

• 清除浏览器缓存测试
  强制刷新浏览器（Ctrl+F5）或使用无痕窗口访问视频URL，避免旧的缓存响应导致的404错误。

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