CDN And Cloud Storage On Azure

In this article I want to show you how to use the Azure Account Storage and a CDN associate to the Storage account already mentioned.

Explaining the two concepts:

Azure Storage Accounts

Is a component on Azure platform used to storage files, data and anyother information we want to. The storage account can be:

Blob Storage: for store files like we use on our PC.

Files Storage: for File sharing using the SMB protocol, with this we can for example read and write the same file by multiple VMs..

Table Storage: for store data like noSql, is used to store data like database.

Queues Storage: for store and retrieve messages, to scale apps depending on traffic.

In this article we are going to focus on Blob Storage.

Azure CDN

CDN stands for Content Delivery Network and is a secure, reliable content delivery that allow our app access the static content faster lighten up the load of the server and enriching the client experience.

What you need to make it possible?

• Visual Studio 2015 or highter
• Azure Account (you could get a free account for a month on this url: https://azure.microsoft.com/en-in/free/)
• Basic knowledge of C#

Now Let’s Start

Open Visual Studio and create a new Asp.Net project:

You’ll have a screen like this:

Then go to the nugget package manager or Console Package Console and install the next packages WindowsAzure.Storage, Microsoft.WindowsAzure.ConfigurationManager:

The next step is create a page to upload the file to the Azure Storage Component for letter access it from the CDN will configure. Now let’s create the controller and page that will make the upload of the file.

using System.Web;

using System.Web.Mvc;

using Microsoft.Azure;

using Microsoft.WindowsAzure.Storage;

using Microsoft.WindowsAzure.Storage.Blob;

namespace PublishDataToAzureStorage.Controllers

{

   public class HomeController : Controller

   {

       public ActionResult Index()

       {

           return View();

       }

       [HttpPost]

       public ActionResult Index(HttpFileCollectionBase fileUpload)

       {

           string path = "";

           for (int i = 0; i < Request.Files.Count; i++)

           {

               var file = Request.Files[i];

               file.SaveAs(path);

           }

           return View();

       }

       private void UploadFile(string filename, string localFile, string containers = "container")

       {

           var connStr = CloudConfigurationManager.GetSetting("StorageConnectionString");

           // Retrieve storage account from connection string.

           CloudStorageAccount storageAccount = CloudStorageAccount.Parse(connStr);

           // Create the blob client.

           CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

           // Retrieve reference to a previously created container.

           CloudBlobContainer container = blobClient.GetContainerReference(containers);

           // Retrieve reference to a blob named "myblob".

           CloudBlockBlob blockBlob = container.GetBlockBlobReference(filename);

           blockBlob.UploadFromFile(localFile);

           blockBlob.Properties.CacheControl = "public, max-age=1";

       }

   }

}

The StorageConnectionString is given by Azure after we create the Azure Storage, so we’ll find where get it below.

Creating The Azure Storage Account.

After we create the free account at the link I gave you at the beginning of this article we’ll be able to logged in to Azure and start using the power of Azure as PaaS (Platform As a Service) and IaaS (Infrastructure as a Service) based on the credit limitation given to us with the free account.

And we access to the next link: https://portal.azure.com and after log in we are going to be able to see a page like this:

On the left screen we click on Storage Accounts and once there we click on Add button on top right corner. We are going to see something like this:

We are going to explain each field next:

Name: Is the unique name of the resource and with it the link to access the resource is generated.

Performance:Premium use SSD disk  and standar use magnetic disk.

Resource Group:choose the resource group.

Location: This is where your resource will be allocated.

We are going to add a name, choose South Central US at Location, use the subscription you want and then click to create button.

Azure will take awhile untill finish creating our Storage Account, after finish we are going to see something like this:

Now let’s see the created resource:

On Settings category we have the access key option where we get the key to allow our app connect to the Storage Account,

Just copy the string with blue color next to key1 label and copy it to your web.config file with the name StorageConnectionString  we saw earlier in this article.

After getting the key we are going to create a Container that will contain all our files. Go to the Storage Account Screen and click on Container located on Blob Service option, once there click on the button Container located at the left upper corner. The screen we’ll see is like this:

When you click on Container at left upper corner a pop up raised like this, and you choose a name and in Public Access Level choose Container.

Now let’s configure our CDN to point to our Storage Account;

On the screen of Storage Account we already created, look for the option Azure CDN located on the Setting block and we are going to see a window like this:

Explaining the fields we have to fill:

CDN Profile: this is the name of the CDN we want to create.

Pricing tier: we choose the price we feel comfortable.

CDN EndPoint Name: this is the name of the endpoint we’ll accessed latter.

Origin Hostname: this is the url we want to cache at the CDN.

After we finish we have a url with the name we selected and now you could upload the file to the azure CDN.

Let’s start finishing this article, run the application and upload a file. Try to access from the url generated and done.

With the app I upload the next image:

The name I used to name my CDN was proof, so to access my file with the endpoint generated is: https://proof.azureedge.net/adspm/star.png

Here is an example of the upload image app: https://github.com/edgarleonardo/PublishFileToAzureStorage

The key and container storage were change by ‘x’ so you just need to add you key and container name on the variable at web.config.

Now proof by yourself and practice, practice and practice.