Introduction

Working with Azure web app is always fun. I was facing a CORS issue in my WordPress web application recently. Here in this post, I am going to share with you the solution that helped me. I was using Azure CDN to serve all my files and all the files were loading fine except the fonts and icons because I was getting the CORS issue. Here is the fix. Preceding is the image of my browser console, where you can see the error clearly.

Here is how my blog looked like when the icons were not loading.

Fix for “Acces to font CROS policy issue”

The first thing to do is to allow requests from all the origins, we can easily do this in Azure web application. Just login to your Azure portal, and go to your Azure web application. Click on the CORS menu under API and * as the allowed origin.

When you are done, just click on the Save button.

By default files with .woff2, .woff, and .ttf extensions are not served by IIS in Azure App Service.

Azure app service IIS config

Now we should edit our web.config file with the configuration for these files. The web.config file will be present in the root folder where your index file is. You can use windows explorer to FTP to get this file or use FTP clients such as FileZilla or use the deployment tool Kudu in the Azure portal.

There should be separate configuration entries for each font file types. We will add these configurations in the system.webServer tag which is the child tag of configuration tag.

You can also do this by adding the extension called “Enable Static Web Fonts”. To add an extension, click on the Extensions menu from the left pan and then click on +Add.

Now click on the “Choose extension” option and select the “Enable Static Web Fonts” extension.

Now accept the legal terms and click OK.

Conclusion

When you are done configuring, just visit your azure web application, you should now see that all the fonts, icons are loaded.

About the Author

I am yet another developer who is passionate about writing and video creation. I have written close to 500 blogs on my blog. And I upload videos on my YouTube channels Njan Oru Malayali and Sibeesh Passion. Please feel free to follow me.

• GitHub
• medium
• Twitter

Your turn. What do you think?

Thanks a lot for reading. Did I miss anything that you may think which is needed in this article? Could you find this post useful? Kindly do not forget to share your feedback.

Kindest Regards
Sibeesh Venu

Introduction

Here, in this article we are going to a see how we upload contents to our Azure container in our CDN storage in a WordPress folder format. You may be thinking what is so special in WrdPress folder format, what makes the difference in other formats? When I say WordPress folder format, I mean one folder in an another folder. In WordPress we usually have the structure as wwwroot/wp-content/uploads/2017/05/. The real problem is, we can not create a container inside a container. Yeah, you heard it right. But, you don’t need to worry about it, there is always few ways we can achieve this need, in this post I am going to show you that. I hope you will like this. Now let’s begin.

Background

I recently created a Azure CDN for my website, and when I was just trying to upload the files to my Azure storage, I got stuck with the problem, that we can not create a container inside a container.

No option to upload a container inside a container

If it is possible, changing URLs of my entire images and other contents would have been pretty much easier, hope you know what I mean? We could have just uploaded the root folder and change the main URL to our CDN endpoint. In my case, change the URL http://sibeeshpassion.com/ to http://cdn.sibeeshpassion.com/ could fix the issues, and with some plugins, we can easily do that.

In this post, we are going to see two possible solution we can use.

Use “/” in the Azure blob

One good thing here is we can always create virtual folders by having the “/” character as a delimiter/part of the blob name to build the hierarchy we need. In our case it is wwwroot/wp-content/uploads/2017/05/. Though the Blob service in Azure storage is based on flat storage scheme, not a hierarchical scheme, we can still specify a character or string delimiter within a blob name to create a virtual hierarchy. For example, we can always create unique blobs as preceding

You can follow this post for getting more information abut this.

Upload the folders via tools like Storage Explorer

This step is pretty much easier than the above mentioned way. Here we are going use the tools like Storage Explorer to do the task for us. Uploading each contents manually and renaming them in hierarchical format would be a tough task, am I right? If you are having around 20-50 images or contents in your site, that won’t be a problem. But my case was bit different, as I had around 5000 images and other contents, so I personally selected this method.

To get started, you will have to download the tool Microsoft Azure Storage Explorer, once you download, please install it and open it.

Now, add your Azure account in Storage Explorer.

Add Account in Microsoft Azure Storage Explorer

Once you add your account, the tool wish list down all of your storage and resources you have with that account. Now go to your storage account and create a container. Let’s create and name our container as wp-content.

Creating a BLOB Container

Now what is pending from our end is, uploading the folders. Let’s create one sample folder with one image.

Files and Folders to Upload

Now click on the upload button and select the root folder you need to upload.

Select the Folder to be Uploaded

Once you are done uploading, I am sure that you can see those files in your storage account. Please be noted that it follows the same hierarchy we needed.

Select the Uploaded Files

Now if you just copy the file URL and open it in the browser, you can see the content you have just uploaded.

Please be noted that, the default access policy of a container is private, thus you will not be able to load the contents via browser. Most probably you will be getting a 404 error. To fix this you will have to change the access policy wither to blob or container. You can follow this post: Fix For 404 ResourceNotFound Error After Uploading to Azure Container

Just for the reference you can always login to your Azure portal and check the blob, there you can find the hierarchical blob.

Hierarchy Folder Structure in Azure Storage Container

Thanks for reading, I will come back with another article which explore Azure CDN. Happy Uploading!.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Introduction

This post is going to walk through about Azure Content Delivery Network (CDN). Before we go deep into Azure CDN, it is recommended that you must know What is a CDN and What is the use of a CDN? So let’s go and try to answer those.

What is a CDN

In our day to day life, we all open websites many times, how fast you area getting responses from those sites? Some might be loading very fast, others may be slow, have you ever thought why there is such a huge delay in giving response? There are a lot of possible reasons behind it, here we are going to discuss about one reason and a solution that we can do, that is CDN. With the help of a CDN, we can reduce the physical distance between the user and our website server, and we can cache our images and other contents, so that the contents can be serced quickly.

What is a Azure CDN

Azure CDN, caches all the static contents that you have in your website, in different locations. Using a Azure CDN, can reduce the number of riund trips for getting the required contents, hence we get better performance and user experience.

Image Courtesy: Microsoft Docs

Advantages of having a Azure CDN are listed below.

• Better performance for your apps and services
• Global distributed network
• Highly scalable infrastructure
• Active redundancy and failover
• High reliability
• Robust security

Background

I own a personal website(http://sibeeshpassion.com/) and I wanted to make sure the end users of my site, get a better experience, creating a CDN is the first step towards it. And in this article I am just sharing how a Azure CDN can help in that. I hope you will like this.

Creating a Azure CDN

To create a CDN, you must login to https://portal.azure.com/ and then click on the New icon.

Now, search for CDN.

Our next step is to create the CDN profile, to do so, you must fill the form according to your preferences.

Please be sure that you are checking your price tier and, as per your needs, you can select one. Here I am selecting S1 Standard Verizon.

As we have created our CDN Profile, now it is time to create an End Point. Navigate to your CDN profile and click on the End Point.

You must add the required data in the upcoming Add and end point form. Here, the name is the name of your CDN end point, that will be created as .azureedge.net.

Once you are finished, you can see that your CDN end point is in running.

Creating a Custom Domain

We have successfully created an Azure CDN, but is that really over? For some people it is, but for others it is not. Let’s see why? We have an option to add a custom domain for our CDN, that’s cool right? If you noticed well, we have created a CDN as https://cdn-sp.azureedge.net but it would be great we can get one as https://cdn.sibeeshpassion.com right?. So here in this step, we are going to see how we can get a custom domain for our CDN.

To start with, login to your Azure Portal and browse for the CDN profile we have just created and click on the end point to which you want to map your custom domain.

Now login to your Domain Registrar’s website and navigate to DNS records (If you could not find DNS records, search for Domain Name or Name Server Management). Here I am using BigRocks, and the screenshots may be different for other service providers.

Navigate to the CNAME creation page, please check in advanced settings if you could not find it in default settings page. And fill the required fields.

Now, go back to azure portal, and give the custom domain name, we created in the DNS management settings(cdn.sibeeshpassion.com), in the Add a custom domain form.

Click Add. If everything goes fine, you should be able to enable the custom domain and the process will get started. The process includes the following tasks.

• Submitting request
• Domain validation
• Certificate provisioning
• Complete

The domain validation will be automatically done if you had added a CNAME in your host provider DNS configuration which points to your CDN host name. If not, you will get a mail (The mail id in the WHOIS database), please wait for it.

In the certificate provisioning task, you can either have your own certificate in the Azure Key Valut and use it, or an auto generated one from Azure. The process may take up to 6 hours, yes it is quite a lot of time.

If everything goes well, the process will be completed, and you can see it in your custom domain overview.

You can see the complete status when you click on your custom domain.

Please be noted that, the verification process may take few minutes or hours. If you are sure that the CNAME configuration is correct, please wait some more time and check if you are getting any error.

Update to Premium

I recently changed my Azure CDN to premium, which offers wide variety of services. You can compare the features here. The premium gives you a separate portal to manage your CDN, https://cdn.windowsazure.com. You can see some of the features in the preceding image.

That’s all for today, I will come with another article which explore Azure CDN more. Till then, bye.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu