如何有效地将Azure CDN与WebApp前端项目一起用于图像

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中更改img src对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。

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

Answer 1

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

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

然后，您可以自定义一个函数将图片网址转换为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应用程序类型将角度SPA配置为Azure CDN非常简单，并且https://azure.microsoft.com/en-us/documentation/articles/cdn-websites-with-cdn/显示没有其他步骤。

单击Azure CDN门户中的端点按钮，输入cdn服务的名称，选择Origin类型为web app，在Azure订阅中选择一个Web应用程序。等待最多90分钟，以便注册通过CDN网络传播。