CODEWITHSUNDEEP
angularjsazureweb-applicationsazure-blob-storageazure-cdn
Rodney
Rodney

Reputation: 5565

How to effectively use the Azure CDN with a WebApp front-end project for images

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.

Upvotes: 3

Views: 2326

Answers (1)

Gary Liu
Gary Liu

Reputation: 13918

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

Upvotes: 2

Related Questions