angularjs - 如何通过 WebApp 图像前端项目有效地使用 Azure CDN

Question

我有一个前端 Azure WebApp (AngularJS + HTML)，其图像托管在同一应用程序上，我的目标是引用 Azure CDN 上的所有图像文件。

起初我以为这篇文章是解决方案:https://azure.microsoft.com/en-us/documentation/articles/cdn-websites-with-cdn/

我尝试将整个应用程序复制到 CDN 上，这可行，但是似乎我需要告诉搜索引擎不要抓取 CDN 内容，否则我会遇到重复的 SEO 问题。我现在可以导航到 CDN 上的应用程序，但这并不是我想要的。我只是想在我的 JS 或 HTML 代码中使用 CDN 图像位置。我不确定现在是否应该更改 js/html 中对 CDN 图像的 img src 引用。

因此，对于我的要求来说，将 Web 应用程序与 CDN 集成似乎是多余的。

因此我的问题是:我是否应该设置一个 Blob 存储并将所有图像放在其中，然后将该存储帐户与 CDN 集成 ( https://azure.microsoft.com/en-us/documentation/articles/cdn-create-a-storage-account-with-cdn/ ) 还是我错过了一些基本的东西？

所有 CDN/WebApp Azure 文章都讨论更改 MVC 代码和捆绑，但我的前端是纯 HTML/JS。

任何建议表示赞赏...谢谢。

Answer 1

您可以创建一个 Blob 存储帐户，并将其配置到 Azure CDN，如文章 Integrate a Storage Account with CDN 所示。显示，并在 Angular 应用程序中进行一些修改，将图像 URL 关联到 Azure CDN。

为了方便实现，当您将静态 Assets 迁移到 Azure Blob 存储时，可以将目录结构保留在 Blob 存储中。例如，您的图像全部位于应用程序目录中的路径 images/ 文件夹中。您可以创建一个名为images的容器，并将镜像文件迁移到该容器中。

然后，您可以自定义一个函数将图像 URL 转换为 Azure CDN，并在 img 标记的 ngSrc 属性中设置。这是我的测试代码片段:

    <div>
        <img ng-src="{{parseUrl('images/test.jpg')}}" />
    </div>
    <script>
        var cdnUrl = 'http://<your_cdn_name>.azureedge.net';
        var app = angular.module("app",[]);
        app.run(function($rootScope){
            $rootScope.parseUrl=function(imgpath){
                return cdnUrl+"/"+imgpath;
            }
        })
    </script>

更新、配置具有 Web 应用类型的 Azure CDN。

在我的测试中，使用 Web 应用程序类型将 Angular SPA 配置到 Azure CDN 很简单，并且没有像 https://azure.microsoft.com/en-us/documentation/articles/cdn-websites-with-cdn/ 这样的额外步骤。显示。

点击 Azure CDN 门户中的端点按钮，输入 CDN 服务的名称，选择源类型为 Web 应用，选择您的 Azure 中的 Web 应用订阅。最多等待 90 分钟，以便注册通过 CDN 网络传播。