CODEWITHSUNDEEP
c#azurevue.jsasp.net-coreazure-cdn
Steven Pfeifer
Steven Pfeifer

Reputation: 387

How to best use Azure CDN for front-end of WebApp (backend is .net core Web API)

I have a front end WebApp built entirely with Vue, and a backend WebApi that serves the website built with ASP.Net Core. I would like to use Azure CDN with my WebApp as there is a fairly large demand on my App Service Plan just to serve the front javascript, html, and image files with the WebApp.

Can I serve the entire WebApp using Azure CDN? Or is this not advised since I'm having issues reaching the backend API from the CDN version of the website....

Should I instead only use the CDN for the images, scripts, and css files? Or is it acceptable to use the CDN for the full WebApp? I'm having a hard time setting all of this up and the documentation on Azure is not very straightforward in what I should aim to have on the CDN.

I essentially would like to know what I can do to make my WebApp load as fast as possible, and offload the requests for the front-end of the WebApp to a server that does not use the back-end API resources. Yet I would still like to reach my back-end API as all user accounts dynamically display data loaded from the API.

Thanks in advance for any help, any direction would be greatly appreciated.

Upvotes: 4

Views: 1568

Answers (1)

Steve
Steve

Reputation: 2345

You can follow the tutorial on how to configure static website hosting

Hosting the front-end involves 2 steps:

  1. Using Blob Storage to host a static website.

  2. Configure Azure CDN to configure the custom domain name for the static website.

In order to call the back-end from the front-end you have to ensure that both sites are exposed via the same domain. Or, enable CORS on the back-end so that the browser allows the front-end to consume responses from the back-end.

Upvotes: 2

Related Questions