Migrating Azure Front Door to Cloudflare Storage

Introduction

If you have a static web app stored in Azure Storage, you can leverage Cloudflare Storage Connectors to simplify your infrastructure and reduce costs. The storage connector provides hostname rewrite capabilities without requiring a Cloudflare Enterprise plan, allowing you to have multiple hostnames point to the same storage account.

Out of the box, Azure Storage accounts only allow you to set a single custom domain, which prevents you from having multiple hosts point to it. Cloudflare Storage Connectors solves this limitation elegantly.

Prerequisites

• A static website hosted in Azure Storage
• A Cloudflare account with DNS management for your domain
• Your Azure Storage static web endpoint (e.g., mystaticsite.z20.web.core.windows.net)

Step 1: Configure DNS Records

First, add the DNS records you want pointed to the storage account in Cloudflare:

1. Navigate to your Cloudflare dashboard
2. Select your domain
3. Go to DNS > Records
4. Add an A or CNAME record for your desired hostname
5. Point the record directly to your Azure static web endpoint: mystaticsite.z20.web.core.windows.net
6. Enable the proxy (orange cloud icon) to route traffic through Cloudflare

Step 2: Setup Cloud Connectors

Reference: Cloudflare Cloud Connector Documentation

1. Navigate to Rules > Cloud Connectors
2. Click Create Cloud Connector
3. Select Azure as the provider
4. Enter your storage endpoint: mystaticsite.z20.web.core.windows.net
5. Configure the filter expression (I recommend using hostname matching)

Cloudflare will automatically set the correct host header when forwarding requests to your Azure Storage account.

Step 3: Setup SPA Rewrites (for Single Page Applications)

If you’re hosting a Single Page Application (SPA), you’ll need to configure URL rewrites to ensure all routes are directed to your index.html:

1. Navigate to Rules > Overview
2. Click Create Rule
3. Select URL Rewrite Rule
4. Click Edit Expression

Use an expression like this to rewrite all non-asset requests to your SPA entry point (replace test.robododd.com with your actual hostname):

(http.host eq "test.robododd.com" and not starts_with(http.request.uri.path, "/assets/") and not starts_with(http.request.uri.path, "/static/") and not ends_with(http.request.uri.path, ".js") and not ends_with(http.request.uri.path, ".css") and not ends_with(http.request.uri.path, ".ico") and not ends_with(http.request.uri.path, ".png") and not ends_with(http.request.uri.path, ".jpg") and not ends_with(http.request.uri.path, ".svg") and not ends_with(http.request.uri.path, ".woff") and not ends_with(http.request.uri.path, ".woff2") and not ends_with(http.request.uri.path, ".ttf"))

Then configure the rewrite:

• Type: Dynamic
• Expression: /index.html

This ensures that requests for routes like /about or /contact are rewritten to /index.html, allowing your SPA router to handle navigation.

Step 4: Setup Cache Rules

Optimize performance by configuring cache rules for static assets:

1. Navigate to Cache > Cache Rules
2. Click Create Rule
3. Click Edit Expression and enter (replace with your actual hostnames):

(http.host in {"test.robododd.com" "test2.robododd.com"} and http.request.uri.path matches "\.(js|css|woff|woff2|ttf|ico|jpg|jpeg|png|gif|svg)$")

Configure cache settings:

• Cache Eligibility: Eligible for cache
• Cache TTL: Choose based on your needs (e.g., 1 day for frequently updated sites, 1 month for stable assets)
• Browser TTL: Respect existing headers or set a custom value

Conclusion

You should now have a fully functional static website served through Cloudflare CDN, backed by Azure Storage. This setup provides:

• Multiple custom domains pointing to a single storage account
• Global CDN performance with Cloudflare’s edge network
• SPA routing support through URL rewrites
• Optimized caching for static assets
• Cost savings compared to Azure Front Door

Your site should be live and ready to go!