Search code examples
c#azurevue.js.net-coreazure-cdn

How to configure Azure CDN with front-end SPA and Azure WebApp with .Net Core WebApi to same custom domain?


I would like to have https://example.com as the custom domain for the Azure CDN I have setup, and https://example.com/api as the rest api endpoint to catch all of the calls from my SPA to the back-end .Net Core Web API providing the data.

How can I setup a custom domain on an App Service to serve the https://example.com/api and use the same custom domain for the Azure CDN to serve all of the front-end SPA web pages?

Right now, I have the custom domain configured for the App Service only, but I would like to move the front-end SPA to an Azure CDN to free up as many resources as possible for the Web API.

Thank you in advance, any direction would be greatly appreciated.


Solution

  • You can introduce another resource like Azure Front Door that can act as a proxy and hides both the CDN and your App Service behind a single domain.

    Front Door allows you to configure routing rules so that requests for /api get routed to the App Service and requests for static assets get routed to the CDN.

    You can then set your DNS CNAME to Front Door and all requests will be sent there rather than directly to the CDN or your App Service.

    This gives you the advantage of not needing to worry about CORS, because from an outside perspective everything is coming from the same domain.

    It also has additional benefits like allowing you to configure request throttling, SSL termination and global load balancing to name a few.