Next, I worked on integrating the storage account static website with Azure Content Delivery Network (CDN) and adding a custom domain. Adding a custom domain is nice as it is easier to remember than the storage account endpoint URL.
Links to the full series:
- Azure Resume Challenge – Part 1: Creating the website and Azure resources
- Azure Resume Challenge – Part 2: Integrating CDN and HTTPS (this post)
- Azure Resume Challenge – Part 3: Adding the Visitor Counter
- Azure Resume Challenge – Part 4: Deploying with GitHub Actions
Creating Azure CDN Profile and Endpoint
The Azure CDN enables delivering files faster and more reliably using servers closest to the users accessing the content. For this project, the Azure CDN provides HTTPS support using an SSL certificate and adding a custom domain for the website.
Sticking with the Azure CLI, I created an Azure CDN profile name “cdnp-azureresume”. A CDN profile is collection of CDN endpoints with the same pricing tier and provider. Next, I created the endpoint which will map the CDN to the storage account static website.
The name of the endpoint is appended by “azureedge.net”, showing the CDN is hosting the URL. In my case, the endpoint name is “cdne-jeffbrowntech-me”, so my CDN URL is cdne-jeffbrowntech-me.azureedge.net. The endpoint name must be globally unique across Azure.
I wrote a small script to assist in this deployment, which you can find here:
JeffBrownTech / azure-resume-project / New-AzureCdnEndpoint.ps1
Here are the values I used for the script parameters when creating my profile and endpoint:
New-AzureCdnEndpoint.ps1 -CdnProfileName cdnp-azureresume `
-CdnEndpointName cnde-jeffbrowntech-me `
-StaticWebsiteUrl stjbtazureresumeprod.z5.web.core.windows.net `
-CdnSku Standard_Microsoft `
-ResourceGroup azureresume-rg `
-Region westus
Back in the Azure portal, view the new resource from the storage account by navigating to Blob service > Azure CDN. The new endpoint is on the right along with the status of the endpoint.
Adding the Custom Domain
I bought the domain jeffbrowntech.me using my domain name provider. When adding a custom domain to your CDN endpoint, I verified to Azure that I owned the domain and endpoint by creating CNAME records in the domain’s DNS provider. Here are the two CNAME records I created, yours will change based on the name of your CND endpoint:
It can take a few minutes for DNS to propagate these new records, so the following steps may not work right away. For these next steps, I’m going to complete them in the Azure portal.
I selected the endpoint created in the previous section, in this case, cdne-jeffbrowntech-me.azureedge.net. In the endpoint’s overview section, select the + Custom domain button to add the custom domain. In the Add a custom domain window, enter the custom domain name and select Add.
Configuring HTTPS on CDN Custom Domain
With the custom domain added to the CDN endpoint, I enabled HTTPS. In the CDN endpoint Overview section, select the custom domain added in the previous section. You can also find it by navigating to Settings > Custom domains.
You can bring your own certificate stored in an Azure Key Vault to use on the endpoint, or use of Azure’s CDN managed certificates. I used this second option of the Azure provided certificate. I switched the Custom domain HTTPS setting to On and configure the type of certificate and minimum TLS version. Click Save.
Azure begins verifying request, validating the domain, and provisioning the certificate. This process can take a few minutes, but the Azure portal provides a status throughout the process.
Redirect HTTP to HTTPS
With HTTPS enabled, I want to redirect HTTP request to HTTPS for a secure connection. I created a redirect rule using the Standard rules engine as part of the CDN endpoint.
In the CDN endpoint, navigate to Settings > Rules engine. Select + Add rule and give the rule a name like EnforceHTTPS. Add a condition for when the request protocol equals HTTP, and add an action for a 302 redirect to the HTTPS protocol. Click Save.
With all this in place, when I navigate to http://www.jeffbrowntech.me, my DNS provider uses the CNAME record to direct the request to my Azure CDN endpoint, which redirects to HTTPS and displays the site.
Next Steps
I did resort to using the Azure portal during the challenge due to the tricky nature of the CDN. The CDN has a cache, so I was making changes and not sure if they were working. It’s best to make changes and wait at least 10 minutes during testing.
Next, I need write the Azure Function for performing the site visitor counter and storing the value in CosmosDB.
References:
Integrate a static website with Azure CDN
Add a custom domain to your endpoint
Configure HTTPS on an Azure CDN custom domain
