We are using Sitecore version 10.3.0 with JSS and server-side rendering using a Node.js headless proxy. All of our resources are hosted in Azure.
We have a CDN (aaaa-cdn.azureedge.net) for media files, which is also pointed to the rendering host (aaaa-renderinghost.azurewebsites.net). In Sitecore's SitecoreCD, we have enabled CDN configuration, and this CDN URL is pointed there. There are no issues with media files; they load as expected.
The overall setup is almost a typical setup of a traditional (Non-Headless) managed cloud instance with Azure Front Door and CDN. The only difference from the traditional (Non-Headless) setup is that we have pointed the CDN to the Rendering Host instead of the SitecoreCD.
Please note, below the cache setup,
- In Azure Front Door, caching is enabled with "Cache every unique URL," default cache period, and compression enabled.
- In the CDN, compression is enabled for all formats.
Below overall error summary,
When we directly access app services, all the static files such as CSS, JSS, and favicon load. However, these files do not load from Azure Front Door, and we receive an error in the browser console with ERR_HTTP2_PROTOCOL_ERROR.
No logs from the rendering host and in Azure Front Door log all these files are getting 503 status!
When we disable the cache from FrontDoor, all static files are loaded as expected from Azure Front Door!