Skip to main content

Creating a Static CDN Website on Azure

I run several websites for various different things, including some of my Home Automation, including a plant database for the garden where I print QR codes on the plant labels (along with the name of the plant) to give the full information about where we bought it, when and details of it's blooming/fruiting/etc. However, I want to do this cheaply and securely, so I use Microsoft Azure. 

In this post I'll document how I set up a simple static website using blob storage on Azure and their CDN product to protect the site with encryption and massive scalability. I also recommend you get the Microsoft Azure Storage Explorer and install it on your machine as it makes dealing with the files much easier than the portal (although you can do it all in the portal in a web browser). 

Initial Setup

I'm going to assume that you've already signed up for an Azure account and are using the initial credit or have signed up for some sort of pay account, be it pay-as-you-go or a full subscription. You will then need to set up a Resource Group with a name and a data centre location to host it in. You can select availability zones as well, but just remember that the more redundancy you add, the more it will cost. Here, we're going to build something that will cost you a couple of pennies a month. 

Next you will need to add a Storage Account for our Blob storage, which is just the ability to store blobs of data, in our case HTML, CSS and JavaScript files. Once you've created this, you will see a Static Website option in the left hand menu list. Make sure that this service is enabled with a default document name entered (index.html is usual). You can add an error page here as well if you want. You should also see a URL here to access your website, similar to: https://<storage_account_name>.z16.web.core.windows.net/. 

Now, either in the Storage Browser in the portal or Azure Storage Explorer app on your desktop, navigate to the Blob Containers > $web folder and upload at least one HTML page called index.html (or whatever you set the default document to earlier). Then you can open the URL in a new tab and see your site. 

Custom Domain & CDN

However, you'll probably want a better URL and use a custom domain. You can do this the simple way, by following these 4 steps: 

  1. Get the hostname of your storage account (the URL above)
  2. Create a canonical name (CNAME) record in your DNS with something like www pointing to your core.windows.net URL
  3. Register your custom domain with Azure under Security + Networking > Networking and selecting the Custom Domain tab at the top of the page
  4. Test!
This will only work for HTTP connections though, as the HTTPS certificate will be registered to your core.windows.net URL. If you want to use a secure connection you have several options around creating your certificate, including using an external service and importing, but you can just enable the CDN for this site and then Microsoft will take care of it for you. 

So, let's create an Azure CDN endpoint to create our certificates and enable the CDN features:

  1. In the portal under your storage account, select Security + Networking > Azure CDN
  2. Under the New endpoint section fill in the details with a resource name, pricing tier (I use Microsoft CDN (classic) as it's cheap and easy), pick a globally unique endpoint name and finally select your static website from the Origin hostname drop down
  3. Click Create and wait for a few seconds, then you should have a URL at <name>.azureedge.net or something similar. 
  4. This will create an HTTPS endpoint, but let's enforce the use of HTTPS
  5. In the CDN page, go to Settings > Rules engine to set a new rule
  6. Click + Add rule at the top of the page and enter a name for the rule, such as 'EnforceHTTPS'
  7. Add condition: if Request Protocol > Equals > HTTP
  8. then add action: URL Redirect > Found (302) > HTTPS (and leave the other boxes blank to just copy the URL over)

Now anyone navigating to your site via HTTP will automatically be transferred to the HTTPS version. This is all very good, but we still want to use our custom domain name. If you're happy to use a subdomain (do this, it's much easier) such as www.yourdomain.com then Azure will do everything for you around certificate management for free. Azure won't create root certificates for you though (i.e. yourdomain.com) so, you'll have to look up one of the many tutorials online to do this, but you'll need to pay for a certificate from an external provider. For now, let's assume you're using the easy route:

  1. Create a CNAME record in your DNS with www (or some other subdomain) pointing to the CDN endpoint, which should be something like yourdomain.azureedge.net
  2. Under your CDN endpoint in the Azure portal, select Settings > Custom domains and click the + Custom domain button at the top of the page
  3. Add your domain here, e.g. www.yourdomain.com and save it (it will put a Green tick and allow you to save only if you've created the correct DNS entry above)
  4. Click on the newly created domain and then toggle the Custom Domain HTTPS to ON
  5. Leave the defaults of CDN managed and TLS 1.2 selected and save your updates
  6. Wait for the process to complete, which will take a few minutes
  7. Once complete, navigate to your new site! 



Labels:

Comments

Post a Comment

Popular posts from this blog

Netgear R9000 X10 VLANs on dd-wrt

As part of my Smart Home build, I need a proper network with segregated sub-networks for our computers, IoT & media devices, management and, of course, guests. The full network design and decision process will be the subject of another post, but I obviously need wi-fi - at least 3 different wi-fi networks in fact.  All the forum posts and information I can find say that the R9000 doesn't support VLANs in dd-wrt. I need VLAN support so that I don't have to have 3 or more different APs (one for each network SSID). Looking at the hardware spec (and the fact that the stock firmware supports limited VLANs), I figured that it should support VLANs, so I trawled the forums, looked at the code and learned about the toolsets included in dd-wrt and I made it work!  This post covers how I set up VLANs on my Netgear R9000 Nighthawk X10 in dd-wrt. I'm sure you will want a different setup (in fact this isn't my final setup either, but it shows the principle).  Pre-requisites I am ...
Post a Comment
Read more

Interactive Floorplan in Home Assistant with Daylight Simulation

When I started looking at a Smart Home controller for my new house, something that struck me as being quite 'cool' (if you're a geek like me) was a 3D floorplan with interactive icons. When I settled on Home Assistant, there were several people showing implementations with simulated lights turning on and off and switching between day and night. So, I decided to create an interactive floorplan for my home, but I also wanted to simulate the amount of daylight in the image and add other elements, like motion sensors, and coloured lights, etc. Below is the Ground floor as a work in progress.  A few basic pre-requisites that you'll need (all of which have plenty of tutorials on how to set them up): Home Assistant up and running Home Assistant Community Store  (HACS) installed in Home Assistant Config Template Card frontend add-on through HACS to enable JavaScript and CSS support A means to upload image files to Home Assistant (I use the Samba Share Add-on) Some smart lightbu...
Post a Comment
Read more

Multiple Philips Hue Bridges and Alexa (or Google Assistant) using Home Assistant

Philips Hue bulbs are fantastic and hugely flexible when paired with the Hue Bridge. Out of the box the accessories support a range of features and will do most of what people want. However, if you are prepared to go a little bit deeper with them and use the built-in Hue Bridge API, you can get very sophisticated lighting automation and other information. For example, the Rules engine in the Hue Bridge allows for rules to be triggered by other rules and events and they also allow you to set any action for any button press on their accessories (e.g. successive presses of the same button on a tap switch can dim the scene or cycle through as many scenes as you want). Something that Philips doesn't shout about is that their motion sensors also have temperature and lux sensors that you can query - also very useful. So what's the problem? Well, the Philips Hue app and integrations with Amazon Alexa, Google Home Assistant, etc., assume that you have exactly 1 Hue Bridge. I guess that ...
Post a Comment
Read more