Azure Static Website with Custom Domain via Azure Storage account and CDN

2022-09-23 azureazure-storagecloud-network

This diagram shows you how to setup a static website on Azure using Azure Storage account and Azure CDN.

Azure Storage account supports Static website capability and also allows you to bind a custom domain to access the content. For HTTP only, you can just use built-in Azure Storage account capabilities; for HTTPS, we can have to use Azure Front Door or Azure CDN (classic) services.

For HTTPS, we can add a custom domain for the Azure CDN endpoint. As part of that setup, we can also choose CDN managed certificate or our own certificate as the following screenshot shows:

2022092341926-image.png

References

Quickstart - Create an Azure CDN profile and endpoint | Microsoft Learn

Integrate a static website with Azure CDN - Azure Storage | Microsoft Learn

(Storage account)
[Not supported by viewer]
DNS Records
CNMAE: www.mydomain.com -> ***.z**.web.core.windows.net
[Not supported by viewer]
Static website endpoint:
**/z**.web.core.windows.net
[Not supported by viewer]
http://www.mydomain.com
[Not supported by viewer]
Azure CDN Profile
[Not supported by viewer]
CDN endpoint:
***.azureedge.net
[Not supported by viewer]
https://www.mydomain.com
[Not supported by viewer]
Option 1 HTTP
[Not supported by viewer]
Option 2 HTTPS/HTTP
[Not supported by viewer]
DNS Records
CNMAE: www.mydomain.com -> ***.azureedge.net
[Not supported by viewer]
MsPortalFx.base.images-15 public:true sdk: MsPortalFx.base.images.Polychromatic.Browser() category: General image/svg+xml MsPortalFx.base.images-15 MsPortalFx.base.images-15 public:true sdk: MsPortalFx.base.images.Polychromatic.Browser() category: General image/svg+xml MsPortalFx.base.images-15 Icon-storage-86 public:true sdk:MsPortalFx.Base.Images.Polychromatic.Storage() category: Storage image/svg+xml Icon-storage-86 image/svg+xml Icon-web-43 public:true sdk:false category: App Services, Networking image/svg+xml Icon-web-43 image/svg+xml