Deploy a Static Website with CDN Acceleration on Azure

Architecture Overview

This architecture pairs Azure Blob Storage’s static website hosting feature with Azure CDN to serve static content globally. The storage account holds your HTML, CSS, JavaScript, and image files. Azure CDN caches those files at edge locations around the world, reducing latency for visitors regardless of their geographic location.

The storage account’s static website feature provides a primary web endpoint that serves files directly. Azure CDN sits in front of this endpoint, caching responses and serving them from the nearest edge location. HTTPS is enforced at the CDN layer, so all traffic between visitors and the CDN is encrypted even though the underlying storage endpoint uses HTTP.

This pattern is cost-effective for sites with variable traffic. You pay for storage based on the amount of data stored, and CDN charges are based on data transferred from edge locations. For most static sites, this is significantly cheaper than running a virtual machine or App Service, and it scales automatically to handle traffic spikes without any configuration changes.

Storage Account with Static Hosting

The storage account is provisioned with the static website hosting feature enabled. This creates a special $web container where you upload your site files. Azure automatically serves the configured index document when visitors request the root URL and returns the error document for missing pages. The storage account provides a primary web endpoint URL that you can use directly or place behind a CDN.

Azure CDN Profile and Endpoint

The CDN profile defines which CDN provider tier to use. The endpoint is configured with the storage account’s web endpoint as its origin, meaning CDN edge servers fetch content from your storage account when the cache is empty. HTTP access is disabled at the CDN endpoint so all traffic is served over HTTPS. Query string caching behavior can be configured based on whether your application uses query parameters for content variation.

File Upload

HTML files are uploaded to the $web blob container with the appropriate content type set so browsers render them correctly. You can upload any static file type including CSS, JavaScript, images, and fonts. The files are accessible through both the direct storage endpoint and the CDN endpoint.

Common Customizations

• Add a custom domain: Configure a custom domain on the CDN endpoint and provision a managed HTTPS certificate for it, eliminating the need for the default Azure-provided URL.
• Set cache rules: Define CDN caching rules to control how long content stays cached at edge locations. Shorter TTLs for HTML pages ensure updates propagate quickly, while longer TTLs for images and scripts improve performance.
• Add geo-filtering: Restrict access to your site from specific countries or regions using CDN geo-filtering rules if your content has geographic licensing requirements.
• Enable compression: Turn on CDN compression for text-based content types (HTML, CSS, JavaScript) to reduce bandwidth usage and improve load times.