如何将 Azure CDN 端点正确映射到 blob 存储容器中的 Angular 7 项目

Question

我一直在尝试为 Angular 7 项目创建 Azure CDN 端点到 blob 存储容器。

执行了以下步骤。

创建了一个标准的 HOT LRS Blob 存储。
在创建的 blob 下，创建了一个可以访问 blob 匿名读取权限的容器。
已将 dist/* 上传到容器。
已使用标准 Verizon 创建 CDN 配置文件
创建了一个端点，其源主机名设置为上面的点 1，源路径为 blob 容器。

现在，我的端点主机名看起来 https://<myendpoint>.azureedge.net

当我从浏览器导航到此 link 时，没有任何默认 XML 显示。当我导航到 https://<myendpoint>.azureedge.net/<blobcontainer>/index.html 时，索引页面显示但以 net::ERR_ABORTED 404

结尾

它试图从路径 https://<myendpoint>.azureedge.net/ 而不是路径 https://<myendpoint>.azureedge.net/<blobcontainer>/ 下载支持文件，例如 styles.hash.css, runtime.hash.js 等，因为这些文件不存在，我得到这个错误。

如何正确地将 Azure CDN 端点映射到 blob 存储容器中的 Angular 7 项目？

我尝试了什么？

我删除了 orginpath 到我的端点
Blob 容器对 blob 和容器的匿名访问
我做了 purgeall 多次

更新：同样在 Azure VM 的 IIS 端口 XX 和 E:\XX 中的虚拟目录中工作

这是我的 dist/index.html，由 angular cli.

生成

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.5/jspdf.plugin.autotable.min.js"></script>
<!-- Other CDN content -->

<link rel="stylesheet" href="styles.d53c073df9bdc9d8dc56.css"></head>
<body>
  <app-root> </app-root>
<script type="text/javascript" src="runtime.e34dbbfe0677512b179e.js"></script>
<script type="text/javascript" src="polyfills.24a4835bc4e54cff0563.js">
</script><script type="text/javascript" src="main.3d2c3408bf112b226574.js"></script>
</body>
</html>

还有很多博客建议在 blob 存储帐户上切换静态网站，但我在 Azure 门户 --> 存储帐户 --> Blob 或 Blob --> 容器中找不到这样的选项。

Answer 1

只需缩小评论范围作为此问题的答案即可获得更多参考。

Azure 存储 通用 v2 帐户 允许您提供静态内容（HTML、CSS、JavaScript 和图像文件）直接来自名为 $web 的存储容器。您可以在 Azure 门户中 Settings--->Configuration--->upgrade 将您当前的存储帐户升级到 V2，然后您可以在存储帐户的设置中看到 Static website 选项。

接下来，通过 Azure 门户将您的资产上传到 $web 容器。

要为此静态网站配置 CDN 终结点，除了 storage 选项外，您还可以 select custom origin作为 origin type。如果是这样，您可以将 storageaccount.z19.web.core.windows.net 之类的主要端点主机名作为 origin hostname.

放在静态网站中

更多参考：Static website hosting in Azure Storage

如何将 Azure CDN 端点正确映射到 blob 存储容器中的 Angular 7 项目

How do I correctly map Azure CDN endpoint to Angular 7 Project in blob storage container

azure

azure-cdn

azure-blob-storage