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.
Once enabled, it’ll create $web directory / folder on the blob container.
It shows the endpoint: https://contoso.web.core.windows.net
You can use any of these tools to upload content to the $web container.
- Azure CLI
- Azure PowerShell module
- Azure Storage Explorer
- Azure Pipelines
- Visual Studio Code extension
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.
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.
- Update Origin fields like these. Otherwise, you would have the infamous XML error
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.