Configure Azure Front Door with ImageEngine

Azure Front Door is a relatively simple CDN with limited support for cache customization.

Please note that this documentation is only for Azure Front Door standard and classic. Azure Front Door Premium is provided by Edgio, and ImageEngine will detect and treat all requests as Edgio. Read more about the differences here.

General flow

The image request from the client first hits the CDN which has the ImageEngine delivery address configured as origin. Upon a cache miss, the CDN makes a request to its origin; ImageEngine. ImageEngine detects the proper optimization algorithm to use. If the image is not in ImageEngine cache, ImageEngine fetches it from the (actual) origin. The response is cached with a cache key computed in the same way both on ImageEngine and the CDN.

The challenge for ImageEngine is to decide the best possible way to optimize an image while it is still cachable for the CDN in front.

To address this, ImageEngine works in a "default" mode and an "informed" mode.

Default mode

ImageEngine can detect the CDN making the request and based on that identify how the image can be optimized yet still compliant with the default caching strategy of the CDN.

Informed mode

Informed mode is when ImageEngine is informed that the CDN making the request has implemented ImageEngine support in a specific manner, ensuring that the cache key is computed the same way both in ImageEngine and in the CDN.

Default Mode

When ImageEngine detects that Azure Front Door is in front, ImageEngine will only optimize the image to its original format, not perform any resizing and not respond to any URL directives. This is because an Azure Front Door configuration may not include the query string in the cache key.

Informed Mode

To enable informed mode, ImageEngine must receive a request header informing ImageEngine how to treat the incoming request. This header is imgeng-input-cdn and may have two values:

• azure,1
• azure,2

This header can be added using the rules engine.

Then, from the Rule set list, associate the rule with a route.

azure,1 with support for directives

The azure,1 configuration has support for ImageEngine directives. This means that Azure must be configured to include the query string in the cache key. This is done in the route configuration:

Azurerouteconfig

Make sure that "Query string caching behaviour" is set to "Use Query String" or "Include Specified Query Strings".

In the latter case, enter imgeng as the value for the "Query String" property.

Lastly, make sure that the "Enable caching" checkbox is ticked.

azure,2 Azure Front Door as a proxy

When azure,2 is enabled, Azure Front Door acts as a proxy and ImageEngine will perform image optimization as usual. ImageEngine will then handle all caching and all traffic is served from the ImageEngine CDN. You may still use any Azure features like WAF or DDOS protection.

After adding the request header imgeng-input-cdn with the value azure,2, enter the route properties and disable (uncheck) the "Caching" checkbox. By doing this, all requests will be forwarded to ImageEngine and Azure will not perform any caching.

Conclusion

We've seen how ImageEngine can be utilized with Azure Front Door. This setup has several benefits:

Superior image optimization with Azure Front Door

Azure Front Door is relatively light on features compared to many other CDNs. With ImageEnigne Azure Front Door now can offer state of the art image optimization.

Azure Front Door features available on top of ImageEnine

If you're already using Azure Front Door in your tech stack, there is no switching cost and you can continue to use WAF an other features offered in Azure Front Door.