3

我有一个前端 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 图像位置。我不确定我现在是否应该将 img src 引用更改为 js/html 中的 CDN 图像。

因此，对于我的要求，将 webapp 与 CDN 集成似乎也有点过头了。

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

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

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

4

1 回答 1

2

您可以创建一个 blob 存储帐户，并将其配置到 Azure CDN，如将存储帐户与 CDN 集成一文所示，并在 Angular 应用程序中进行一些修改以将您的图像 URL 关联到 Azure CDN。

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

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

    <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 门户中的Endpoint按钮，输入 cdn 服务的名称，选择 Origin 类型为web app，在您的 Azure 订阅中选择一个 Web 应用程序。等待最多 90 分钟，让注册通过 CDN 网络传播。 在此处输入图像描述

于 2016-08-03T07:59:55.793 回答