Using Windows Azure Content Delivery Network for Azure Blob Storage

Using Windows Azure Content Delivery Network (azure CDN) for Azure Blob Storage.

Hi there!! Before proceeding on the usage of Azure content delivery network I will highly recommend that you should know What is azure CDN?

Alright, so I will be creating a sample application which will display some cute images from blob storage. Then I will configure CDN on Azure Portal for images present blob storage. Then I will show the how latency, performance, response time gets improved with the help of Azure content delivery network.

Guys, frankly speaking I don’t have money to pay the cost of Azure account. So I have created CDN demo application using Azure Free Account. Azure free account expires in one month so I won’t be able to keep the URL live. Nonetheless, following description will guide you thoroughly to understand azure CDN usage with blob storage.

Here we go!!!

First create a storage account on azure management portal. Then download cloud storage studio – Cerebrata. This cerebrate cloud storage studio is my favorite because; it offers 30 days free trialJ.

Once cloud storage studio is downloaded, add some images into blob storage and then you are done. Sample screenshot of cerebrata cloud storage studio with uploaded images by me is as follows –

Now open visual studio 2010 and I am hoping that you have Azure SDK 1.4 installed. Create a sample cloud service with web role as shown –

Open about.aspx page and add some image controls, a button and design accordingly as shown below. Button click event will be used to populate images controls with image data from blob storage or CDN endpoint.

<h2>

        About

        Azure CDN</h2>

    <br />

    <table class="style1">

        <tr>

            <td>

                <b>Images -<br />

                <br />

                </b><asp:Button ID="btnGetImages" runat="server"

                    onclick="btnGetImages_Click" Text="Get Images" />

                <br />               

            </td>

            <td>

                <asp:Image ID="Image1" runat="server" Height="300px" Width="300px" />

                <asp:Image ID="Image2" runat="server" Height="300px" Width="300px" />

            </td>

        </tr>

        <tr>

            <td>

                &nbsp;</td>

            <td>

                <asp:Image ID="Image4" runat="server" Height="300px" Width="300px" />

                <asp:Image ID="Image5" runat="server" Height="300px" Width="300px" />

            </td>

        </tr>      

       

    </table>

Configure CDN on azure management portal. Detailed steps to configure CDN I have mentioned here.

Once the azure CDN endpoint is setup after 60 minutes, add following code to button click event on About.aspx page.

protected void btnGetImages_Click(object sender, EventArgs e)

        {

            Image1.ImageUrl = "http://kunalstorage.blob.core.windows.net/kunalcdncontainer/Desert.jpg";

            Image2.ImageUrl = "http://az32228.vo.msecnd.net/kunalcdncontainer/Desert.jpg";

            Image4.ImageUrl = "http://kunalstorage.blob.core.windows.net/kunalcdncontainer/Penguins.jpg";

            Image5.ImageUrl = "http://az32228.vo.msecnd.net/kunalcdncontainer/Penguins.jpg";

                    }         

That’s it, you are done. If you observe in above code, Image1 and Image3 will populate image from blob storage URL whereas Image2 and Image4 will populate images from azure CDN endpoint URL.

For the first request, all images will be served from blob storage and cached in CDN endpoint. For subsequent request in TTL interval, images for Image2 and Image4 will be served from CDN endpoint and hence they gets downloaded faster on web page as shown below –

Next, to prove how CDN improves performance let’s try the technique mentioned in Azure Training.

What is Hop – A hop is a term used to describe the complete path a data packet takes over the network as it reaches to its destination address. The tracert command output shows each hop in the route, three measured round trip time in milliseconds and each IP address the data packet visits during travel.

Open the command prompt window. To get the number of hops for blob storage, write following command –

Tracert yourblob.windows.blob.core.windows.net

The output of this command is as shown below –

Now run the same command against CDN endpoint. The output is as shown –

It can be easily observed from above two figures that, CDN endpoint URL requires less number of hops to access the image as compared to blob URL. Hence Round trip times are significantly lower, hence latency is lower.

Hope above article helps you to understand windows azure CDN in better way. The above post explains you the usage of CDN with blob storage. If you are interested steve marx has given wonderful topic on windows azure cdn for web application.

Cheers…

Happy Programming!!!