HOSTING A STATIC WEBSITE ON AZURE STORAGE WITH AZURE CDN

Oluwagbenga Balogun — Wed, 16 Nov 2022 03:16:46 +0000

INTRODUCTION
A colleague reached out to me some time ago and wanted to host a static website on Azure storage. We haven’t had time to go through the steps and achieve his goal which is to host a static website on Azure.
Now I made this demo for those who would like to host a static website on Azure cloud, specifically into an Azure Storage Account using the Azure portal. I would make this demo a step by step walk through so even you that are new to the cloud can easily host your static website on Azure Storage.

WHAT ARE THE BENEFITS OF HOSTING YOUR STATIC WEBSITE ON AZURE?
Okay so why should you host your static website on Azure? there are good reasons for wanting to do this as I have highlighted below;
• Simplicity: All you have to do is upload your web folders and files to a container.
• Saving on hosting cost: Cheaper compared to buying hosting fee from a web hosting company.
• Better Performance: Azure CDN can be configured to get a better performance delivering contents to your end users around the world.
Combining Azure CDN with blob storage provides a low-cost and highly reliable static website hosting solution. These static sites have only CSS, HTML, JS files, fonts, etc.

PREREQUISITES
There are some prerequisites we have to put in place before we proceed with this demo:
• Create a Microsoft Azure account, if you currently don’t have you can create one here
• Create a subscription
• Have a registered domain

NOTE: To those that are new to the Azure platform, when you create a free account, you get a $200 free Azure credit to create resources for 30 days and a subscription is automatically created.

OUTLINE OF WORKFLOW
Below is the workflow of what we would be doing in this demo,

Our static website would have a custom domain with which our end users would be able to access our website from the public web.

After all prerequisites has been put in place, let’s get started.

• CREATE A RESOURCE GROUP
A resource group is a container where all related resources reside in. Now let’s proceed and create a resource group. See below images for visual guide.

• CREATING A STORAGE ACCOUNT
After creating the resource group static-website-demo-rg for this demo, the next step is to create a storage account inside the static-website-demo-rg RG. See images below,

Goto the newly created storage account resource which is staticwebsitehosting1 for this demo. This is where most of the task would take place. As shown in image below, this is the interface you should see when you goto the storage account.

Click on capabilities and you see that the storage account at the moment is not configured for static website hosting and Azure CDN is also not configured as shown in the image above.

ENABLING STATIC WEBSITE ON STORAGE ACCOUNT
Now click on static website and enable the storage account to host static content webpages.
Enter the index.html inside the index document block, you can also specify a root file for 404 error but we are not interested in that for this demo. Save and when it is enabled a primary endpoint https://staticwebsitehosting1.z13.web.core.windows.net is created automatically this is just a generic URL for your end users to access your website contents.
See images below

Also, after enabling static website a container $web is automatically created, this container would hold your web content files and folders.

If we check capabilities under the storage account overview, we see that static website has been configured.

UPLOADING WEB CONTENTS TO CONTAINER
Now it's time to upload our website contents to the container $web. You might be thinking uploading the web content to the container from the portal should be easy by just clicking the upload button and upload the web folders and files to the container. Unfortunately, you cannot upload folders to the container from the portal directly except for files.
Here is our web content below,

see below image you can only upload files to the container. For our web contents only index.html and README.txt can be uploaded which does not work for us because all folders and files has to be uploaded

• DOWNLOADING AZCOPY
To upload our web contents to the container we would make use of a tool called AzCopy. AzCopy is a CLI (command-line) tool that moves data into and out of an Azure Storage.
Next step is to download the AzCopy tool that best fits your environment here -> https://docs.microsoft.com/en-us/azure/storage/common/storage-use-azcopy-v10#download-azcopy.
Unzip the AzCopy file, for this demo I have the AzCopy unzipped folder copied to a folder "azmove" in my C:\ drive root. You can add the directory location of the AzCopy executable to your system environment variable path for ease of use, but for this I will navigate to the folder where we have the AzCopy executable and copy the file full path somewhere like a notepad. See Image below

• AUTHORIZE AZCOPY TO ACCESS STORAGE ACCOUNT
We would need to authorize AzCopy to access the storage account so we can upload the web contents to the container. We would provide authorization credentials to AzCopy by using shared access signature (SAS) token generated from the storage account. Click on the shared access signature on the left pane under "security + networking".
Explaining the key options
Allowed service - check blob only because we want to take into consideration one of cloud best practices which is least privilege concept. This SAS token is only intended for the blob service and no access should be granted to your file, queue or table service using the generated SAS token.
Allowed resource type - check container as this is the only resource, we want the SAS token to access.
Start and expiry date/time - set the period you want this SAS token to be valid through. Put into consideration security best practices, expiry date shouldn't elapse the period SAS token is expected to be used.
Leave other options as it is and proceed to click on generate SAS and connection string.
See Images below,

SAS token is generated as you can see in the last image above.
Copy the SAS token somewhere like a notepad, once you leave this page you cannot retrieve the token any longer. As you can see in the image below I have copied all important path, urls, token to one point.

AzCopy script
.\azcopy copy "{path to the website folder on your local pc}" "{path to the container hosting the website}{SAS token}" --recursive
Explaining the contents of AzCopy scripts
.\azcopy copy - This command copies source data to a destination location, be it from your local computer to a storage account or from a storage account to your local computer.
--recursive - This flag is necessary because we want to make sure it copies all sub-folders inside folders and files
{path to the website folder on your local pc} - This is the source destination of your web contents, to be uploaded to the container. See image below

{path to the container hosting the website} - This is the target destination which is your container. To get the URL/path to your container see the images below

Now if you remember we are making use of AzCopy because we cannot upload folders to the container using Azure portal, if we copy the source folder to the container, our web content would be nested inside another folder and this would not work. We need all folder and files of the web content to sit at the root of the
container. I have created an AzCopy scripts for each folder and file to be run and pushed to the container. see image below

• RUNNING THE AZCOPY SCRIPT
On your local pc launch cmd or PowerShell to run the AzCopy script. For this demo I am making use of cmd.

Change the current working directory to where you have the AzCopy executable file by running "cd {file path to where the azcopy exec file is}" as shown below

Copy the AzCopy script we coined together on notepad and past the script in cmd and run one after the other.
Note: Do this for all the remaining scripts.

After successfully uploading the web contents, and you refresh your container you would get your web contents inside the $web container.

Remember the primary endpoint link https://staticwebsitehosting1.z13.web.core.windows.net/ that was generated when you enabled static website on your storage account? now that is the link for your end users to access your content on the public web. See image below

CONFIGURING AZURE CDN
Now it's time to configure Azure CDN, firstly let's try to understand what Azure CDN is and its benefits to our end users.
Azure Content Delivery Network (CDN) is designed to send web contents such as audio, video, images, and other files faster and more reliably to your end users using servers that are closest to the end users. This helps to increase speed and availability, resulting in significant user experience improvements.
Below image shows Azure CDN is not configured yet.

Click on Azure CDN on the left pane under the “security + networking” and create a new endpoint.
Give it a CDN profile name, select the pricing tier "select Microsoft CDN (classic)" give the CDN endpoint a name.
Origin hostname - you have to select the origin server from which CDN endpoint pulls content from. I would be using my primary endpoint which is "staticwebsitehosting1.z13.web.core.windows.net" now proceed to create the CDN. See image below,

The last image above shows our CDN endpoint is ready and running.
Click on the newly created CDN endpoint, you can see 2 URLs one is the CDN endpoint and the other is the origin hostname aka primary endpoint for our static website. See image below,

Now that Azure CDN has been successfully configured for our setup, we can proceed to load the URL of the CDN endpoint which is https://swcdn.azureedge.net
Note: It would take some time for Azure CDN to load your content you might get the blue screen error or "the account being accessed does not support http" error. Just give it sometime and refresh after some minutes. See Images below

CONFIGURING A CUSTOM DOMAIN TO YOUR AZURE CDN ENDPOINT
Now can you imagine your end users accessing your webpage using the URL https://swcdn.azureedge.net of course you wouldn’t want that, you would want them to access your webpage using your preferred domain name which can be an existing one for your business or a newly registered domain name.
For this demo I would be using an existing domain I registered on Azure "theproliproject.com" and another registered on Namecheap “mast***.org”. I will be making 2 demonstrations for domain registered on Azure portal and domain registered by a different registrar.
• Domain registered on Azure portal.
Goto App Service Domain and select the domain. See image below

What we want to do? we want to create a CNAME record with the DNS provider for "theproliproject.com" that points to "swcdn.azureedge.net" doing this we would be able to associate the domain to the CDN endpoint. After selecting the domain, click on manage DNS records and click on record set.

For this demo I am making use of a sub domain staticweb.theproliproject.com
• Enter the name i.e. the subdomain name
• Enter the type - you are creating a CNAME record, this is because you are mapping/pointing your host name to another name record which is "swcdn.azureedge.net"
• Leave Alias record set to No
• TTL - leave at default
• Alias - is the CDN endpoint "swcdn.azureedge.net"
Click ok after entering the appropriate information’s. See images below

After successfully creating the DNS record, we can proceed to Azure CDN and map our custom domain to Azure CDN. Goto the Azure CDN and click on custom domain
Enter custom hostname - enter your subdomain here for this demo "staticweb.theproliproject.com" click add

If you load the staticweb.theproliproject.com in your web browser you would get the warning: potential security risk ahead warning message. If you proceed to accept the risk and continue the website loads but with the SSL certificate missing as shown in image below

Now let us proceed to enable https which enables you to deliver your web contents to your end users securely over the public web.
To enable https, click on the custom domain just created and toggle the enable https feature.
See image below

After enabling https, Azure then undergoes the following processes;

Submits your https request
Validates your domain.
Provision a certificate for your domain. See image below,

After the process is completed, you can reload the URL in your browser and your website should be secured with a SSL certificate.
Note: it might take up to 5 minutes for this process to get completed.
See image below

• Domain registered with another registrar
Login to your account dashboard of your registrar/host account and navigate to where you can manage your domain.
Enter a CNAME record with the host name which is your preferred subdomain name e.g., for this demo "staticweb" and the value which is the Azure CDN endpoint "swcdn.azureedge.net". See image below,

Once the CNAME record is successfully added, proceed to Azure portal and add the custom domain under the Azure CDN configuration as shown in the image below,

If you proceed to load the website without enabling https you would get security warning error as shown in the image below

Now proceed to enable https

Now your website is secured proceed to reload the URL.

RESOURCES
https://github.com/balop3e/static-website-demo
https://aka.ms/downloadazcopy-v10-windows
https://mega.nz/file/YKdBXYIQ#nBlYomzljIKF9QXLmdvQwhA45iKLOw-lNXyuaJ6uPVU

CONCLUSION
In this demo we just saw how to host a static website on Azure using the Azure portal. In future posts, I will be hosting this static website using Azure DevOps Pipelines, Git, GitHub and Terraform.

DEV Community: Oluwagbenga Balogun

HOSTING A STATIC WEBSITE ON AZURE STORAGE WITH AZURE CDN