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.
You can follow the tutorial on how to configure static website hosting
Hosting the front-end involves 2 steps:
Using Blob Storage to host a static website.
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.