3

I have a frontend Azure WebApp (AngularJS + HTML) with images hosted on the same app and my goal is to reference all the image files on the Azure CDN instead.

At first I thought this article was the solution: https://azure.microsoft.com/en-us/documentation/articles/cdn-websites-with-cdn/

I tried replicating the entire app onto the CDN and this works, however it seems as though I need to tell search engines not to crawl the CDN content or I will get duplicate SEO issues. I can now navigate to the app on the CDN which is not quite what I want. I just wanted to use the CDN image locations in my JS or HTML code. I am not sure if I am now supposed to change the img src references to the CDN images in the js/html.

So it also seems as though for my requirements integrating the webapp with the CDN is overkill.

Hence my question is: Should I set up a Blob storage and put all my images on that and then intregrate that storage account with the CDN instead (https://azure.microsoft.com/en-us/documentation/articles/cdn-create-a-storage-account-with-cdn/) or have I missed something fundamental?

All the CDN/WebApp Azure articles talk about changing MVC code and bundling but my frontend is pure HTML/JS.

Any advice appreciated... thanks.

Rodney
  • 5,417
  • 7
  • 54
  • 98

1 Answers1

2

You can create a blob storage account, and config it to the Azure CDN as the article Integrate a Storage Account with CDN shows, and do a few modifications in your Angular application to associate your image urls to the Azure CDN.

For easy implement, when you migrate your static assets to Azure Blob Storage, you can keep the directory structure in the blob storage. E.G, your images are all in the path images/ folder in your application directory. You can create a container named images, and migrate the image files into this container.

Then, you can custom a function to convert the image urls to Azure CDN, and set in ngSrc attribute of img tag. Here is my test code snippet:

    <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>

update, config an Azure CDN with web app type.

In my test, to config an angular SPA to Azure CDN with web app type is simple, and there is no additional step as https://azure.microsoft.com/en-us/documentation/articles/cdn-websites-with-cdn/ shows.

Click the Endpoint button in the Azure CDN portal, input the name of the cdn service, select the Origin type as web app, select a web app in your Azure subscription. Wait up to 90 mins for the registration to propagate through the CDN network. enter image description here

Gary Liu
  • 13,758
  • 1
  • 17
  • 32
  • Ok, that is a good idea, thanks. However, do you know the difference or when/why you would use a CDN with the whole AppService or just with the Blob Storage? It sounds like in my case if I just want CDN images then integrating with the AppService is not the way forward. – Rodney Aug 03 '16 at 08:15
  • If your images will be used in multi applications, it is appropriate to use Azure CDN with storage type, but if your images only will used in your web application, you can use Azure CDN with web app type. And config a SPA to Azure CDN with web app type is simple, please refer to my update – Gary Liu Aug 04 '16 at 01:55
  • Ok, I still don't really understand how the CDN works with the WebApp - for example, it creates a duplicate of my whole webapp - so if I navigate to cdn.x.com it shows the exact same site as www.x.com. So should the CDN site be restricted by some method to prevent search engine indexing to reduce duplicate content issues? – Rodney Aug 07 '16 at 09:55
  • Azure CDN caches static web content, and you can refer to https://azure.microsoft.com/en-us/documentation/articles/cdn-overview/ to understand how it works. – Gary Liu Aug 08 '16 at 08:36