All Articles

Static website hosting in Azure Blob Storage

Static website hosting in Azure Blob Storage

Given you have a react web app, you want to deploy it onto Azure. As it doesn’t have any server-side code, you can deploy it on Azure Blob storage, replicated on Azure CDN. All the requests would be served by CDN and it would be fast, reliable, and cost-saving.

Setting up

Create a storage account with blob storage. Then enable static website on the storage account. It’ll ask you what would be the name of the default file. I chose index.html, as it’s the default html file of my react app.

Enable Static website

Once enabled, it’ll create $web directory / folder on the blob container.

image

It shows the endpoint: https://contoso.web.core.windows.net

Uploading content

You can use any of these tools to upload content to the $web container.

I used Azure Storage Explorer for testing purpose, but would set up an Azure Pipeline to deploy the change automatically whenever a new commit gets pushed.

Public access level of the web container

The files at the primary static website endpoint are served through anonymous access requests, which means public read-only access to all files.

image2

I used Public access level: Blob, so that the primary static website endpoint would be https://contosoblobaccount.z22.web.core.windows.net/index.html.

Integrate a static website with Azure CDN

You can enable Azure CDN for your static website

  • Go to your storage account overview
  • Under the Blob Service menu, select Azure CDN to open the Azure CDN page
  • Specify your static website endpoint in the Origin hostname field.

image4

  • Update Origin fields like these. Otherwise, you would have the infamous XML error

image5

Map a custom domain

Go to Custom domains menu and set up your custom domain. You can use cname mapping. Also, provision SSL certificate, so that you wouldn’t get security warning.

Create a CNAME DNS record with your domain provider. The domain should point to xxxx.azureedige.net. After Azure CDN verifies the CNAME record that you create, traffic addressed to the source custom domain would be routed to the specified destination.

Resources