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.
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.
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.
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
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.