Tutorial: Configure a CDN for Azure Static Web Apps

By adding Azure Front Door as the CDN for your static web app, you benefit from a secure entry point for fast delivery of your web applications.

With Static Web Apps, you have two options to integrate with Azure Front Door. You can add Azure Front Door to your static web app by enabling enterprise-grade edge, a managed integration of Azure Front Door with Static Web Apps. Alternatively, you can configure an Azure Front Door resource manually in front of your static web app.

Consider the advantages below to determine which option best suits your needs.

Enterprise-grade edge provides:

  • Zero configuration changes
  • No downtime
  • Automatically managed SSL certifications and custom domains

A manual Azure Front Door setup gives you full control over the CDN configuration including the chance to:

  • Limit traffic origin by origin
  • Add a web application firewall (WAF)
  • Route across multiple applications
  • Use more advanced features of Azure Front Door

In this tutorial, you learn to add Azure Front Door to your static web app.

Prerequisites

  • Custom domain configured for your static web app with a time to live (TTL) set to less than 48 hrs.
  • An application deployed with Azure Static Web Apps that uses the Standard hosting plan.

Enable enterprise-grade edge on the Static Web Apps resource

  1. Go to your static web app in the Azure portal.

  2. Select Enterprise-grade edge in the left menu.

  3. Check the box labeled Enable enterprise-grade edge.

  4. Select Save.

  5. Select OK to confirm the save.

    Enabling this feature incurs extra costs.

Prerequisites

Create an Azure Front Door

  1. Sign in to the Azure portal.

  2. From the home page or the Azure menu, select + Create a resource. Search for Front Door and CDN profiles, and then select Create > Front Door and CDN profiles.

  3. On the Compare offerings page, select Quick create, and then select Continue to create a Front Door.

  4. On the Create a Front Door profile page, enter or select the following settings.

    Setting Value
    Subscription Select your Azure subscription.
    Resource group Enter a resource group name. This name is often the same group name used by your static web app.
    Resource group location If you create a new resource group, enter the location nearest you.
    Name Enter my-static-web-app-front-door.
    Tier Select Standard.
    Endpoint name Enter a unique name for your Front Door host.
    Origin type Select Static Web App.
    Origin host name Select the host name of your static web app from the dropdown.
    Caching Check the Enable caching checkbox.
    Query string caching behavior Select Use Query String
    Compression Select Enable compression
    WAF policy Select Create new or select an existing Web Application Firewall policy from the dropdown if you want to enable this feature.

    Note

    When you create an Azure Front Door profile, you must select an origin from the same subscription the Front Door is created in.

  5. Select Review + create, and then select Create. The creation process may take a few minutes to complete.

  6. When deployment completes, select Go to resource.

  7. Add a condition.

Disable cache for auth workflow

Note

The cache expiration, cache key query string and origin group override actions are deprecated. These actions can still work normally, but your rule set can't change. Replace these overrides with new route configuration override actions before changing your rule set.

Add the following settings to disable Front Door's caching policies from trying to cache authentication and authorization-related pages.

Add a condition

  1. From your Front Door, under Settings, select Rule set.

  2. Select Add.

  3. In the Rule set name textbox, enter Security.

  4. In the Rule name textbox, enter NoCacheAuthRequests.

  5. Select Add a condition.

  6. Select Request path.

  7. Select the Operator drop-down, and then Begins With.

  8. Select the Edit link above the Value textbox.

  9. Enter /.auth in the textbox, and then select Update.

  10. Select no options from the String transform dropdown.

Add an action

  1. Select the Add an action dropdown.

  2. Select Route configuration override.

  3. Select Disabled in the Caching dropdown.

  4. Select Save.

Associate rule to an endpoint

Now that the rule is created, apply the rule to a Front Door endpoint.

  1. From your Front Door, select Rule set, and then the Unassociated link.

    Screenshot showing selections for Rule set and Unassociated links.

  2. Select the endpoint name to which you want to apply the caching rule, and then select Next.

  3. Select Associate.

    Screenshot showing highlighted button, Associate.

Copy Front Door ID

Use the following steps to copy the Front Door instance's unique identifier.

  1. From your Front Door, select the Overview link on the left-hand navigation.

  2. Copy the value labeled Front Door ID and paste it into a file for later use.

    Screenshot showing highlighted Overview item and highlighted Front Door ID number.

Update static web app configuration

To complete the integration with Front Door, you need to update the application configuration file to do the following functions:

  • Restrict traffic to your site only through Front Door
  • Restrict traffic to your site only from your Front Door instance
  • Define which domains can access your site
  • Disable caching for secured routes

Open the staticwebapp.config.json file for your site and make the following changes.

  1. Restrict traffic to only use Front Door by adding the following section to the configuration file:

    "networking": {
      "allowedIpRanges": ["AzureFrontDoor.Backend"]
    }
    
  2. To define which Azure Front Door instances and domains can access your site, add the forwardingGateway section.

    "forwardingGateway": {
      "requiredHeaders": {
        "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
      },
      "allowedForwardedHosts": [
        "my-sitename.azurefd.net"
      ]
    }
    

    First, configure your app to only allow traffic from your Front Door instance. In every backend request, Front Door automatically adds an X-Azure-FDID header that contains your Front Door instance ID. By configuring your static web app to require this header, it restricts traffic exclusively to your Front Door instance. In the forwardingGateway section in your configuration file, add the requiredHeaders section and define the X-Azure-FDID header. Replace <YOUR-FRONT-DOOR-ID> with the Front Door ID you set aside earlier.

    Next, add the Azure Front Door hostname (not the Azure Static Web Apps hostname) into the allowedForwardedHosts array. If you have custom domains configured in your Front Door instance, also include them in this list.

    In this example, replace my-sitename.azurefd.net with the Azure Front Door hostname for your site.

  3. For all secured routes in your app, disable Azure Front Door caching by adding "Cache-Control": "no-store" to the route header definition.

    {
        ...
        "routes": [
            {
                "route": "/members",
                "allowedRoles": ["authenticated", "members"],
                "headers": {
                    "Cache-Control": "no-store"
                }
            }
        ]
        ...
    }
    

With this configuration, your site is no longer available via the generated *.azurestaticapps.net hostname, but exclusively through the hostnames configured in your Front Door instance.

Considerations

  • Custom domains: Now that Front Door is managing your site, you no longer use the Azure Static Web Apps custom domain feature. Azure Front Door has a separate process for adding a custom domain. Refer to Add a custom domain to your Front Door. When you add a custom domain to Front Door, you'll need to update your static web app configuration file to include it in the allowedForwardedHosts list.

  • Traffic statistics: By default, Azure Front Door configures health probes that may affect your traffic statistics. You may want to edit the default values for the health probes.

  • Serving old versions: When you deploy updates to existing files in your static web app, Azure Front Door may continue to serve older versions of your files until their time-to-live expires. Purge the Azure Front Door cache for the affected paths to ensure the latest files are served.

Clean up resources

If you no longer want to use the resources created in this tutorial, delete the Azure Static Web Apps and Azure Front Door instances.

Next steps