Azure static website

In this post I describe how this static website is hosted in Microsoft Azure using a serverless architecture and how to add a contact form. This will be a pretty high level post, for details feel free to reach out to me using the contact form.

Azure Storage Account

It is possible to host a website directly from an Azure Storage Account without running a web server yourself.

You simply enable the Static website feature and a container called $web will be created. You then upload your files to that container and configure which file is the index document (e.g. index.html) and which file is the error document (e.g. 404.html). It will give you an endpoint that looks something like https://<account>.<zone>.web.core.windows.net/ which you can use to access the website.

You could, and probably should, stop here. But I would like to use this website to learn a bit more about Azure Front Door.

Azure Front Door

The next step was to add Azure Front Door in front of the static website. It will have a Point of Presence near to the end user, it can do load balancing, it can redirect HTTP to HTTPS, it protects against DDoS attacks and probably a whole lot more.

Azure Front Door is very easy to configure with the designer. You first add your custom domain to the Frontends and add or create a certificate for TLS. After that you add the Storage Account as a Backend Pool. To tie them together you create some Routing rules.

To redirect HTTP to HTTPS you need two Routing rules. The first one only accepts HTTPS and forwards to the back-end. The second one only accepts HTTP and redirects it to HTTPS.

Azure Function App

Finally it is time to add some functionality to the website, a contact form.

To accomplish this we need three components. First of all we need a form on the website where the user can enter their message. To keep things serverless we also need an Azure Function App with an HTTP Trigger. This function will run every time the corresponding URL is requested. Finally, we need a way to deliver the message. For this we use SendGrid, which can be set up from within the Azure Portal directly and allows you to send 25k e-mails per month.

Azure Function App behind Front Door

Your Function App will have an endpoint that looks something like https://<function-app>.azurewebsites.net. To fix that you can use Front Door to create a route from https://www.schaap.io/api to your Function App.

You simply add the Function App as a Backend pool in Front Door and add a Routing rule to make sure the API URLs get routed to the right place. This will lead to the situation in the diagram above.

Turns out you actually need a lot of servers to run a serverless website. 😃