如何最好地将 Azure CDN 用于 WebApp 的前端（后端是 .net core Web API）答案

【问题标题】：How to best use Azure CDN for front-end of WebApp (backend is .net core Web API)如何最好地将 Azure CDN 用于 WebApp 的前端（后端是 .net core Web API）
【发布时间】：2019-08-26 21:30:19
【问题描述】：

我有一个完全使用 Vue 构建的前端 WebApp，以及一个为使用 ASP.Net Core 构建的网站提供服务的后端 WebApi。我想将 Azure CDN 与我的 WebApp 一起使用，因为我的 App Service Plan 有相当大的需求，只是为 WebApp 提供前端 javascript、html 和图像文件。

我可以使用 Azure CDN 为整个 WebApp 提供服务吗？还是不建议这样做，因为我在从网站的 CDN 版本访问后端 API 时遇到问题......

我应该只对图像、脚本和 css 文件使用 CDN 吗？或者是否可以将 CDN 用于完整的 WebApp？我很难设置所有这些，Azure 上的文档对于我应该在 CDN 上拥有的目标并不是很简单。

我基本上想知道我可以做些什么来使我的 WebApp 加载尽可能快，并将 WebApp 前端的请求卸载到不使用后端 API 资源的服务器上。但我仍然希望访问我的后端 API，因为所有用户帐户都会动态显示从 API 加载的数据。

提前感谢您的帮助，任何方向将不胜感激。

【问题讨论】：

标签： c# azure vue.js asp.net-core azure-cdn

【解决方案1】：

您可以按照教程on how to configure static website hosting

托管前端涉及两个步骤：

使用 Blob 存储托管静态网站。
配置 Azure CDN 为静态网站配置自定义域名。

为了从前端调用后端，您必须确保两个站点都通过同一个域公开。或者，enable CORS 在后端，以便浏览器允许前端使用来自后端的响应。

【讨论】：

将整个前端 SPA 放在 CDN 上会不会是个好主意？或者我应该只尝试将图像、css、js 文件等放在 CDN 上并从我的源站引用这些文件。感谢您的快速回复！
可以把整个SPA放到CDN上。 CDN 非常擅长提供静态资产，通过使用它来做到这一点，您可以确保只有需要某种计算的请求才会被定向到您的 Web API。
我仍然在设置自定义域时遇到问题，但如果您能偶然提供帮助，请在新问题中添加此问题stackoverflow.com/q/57665919/7242722