将静态网站从 Azure 存储帐户添加到 Asp.net MVC 应用?

Add a static website from Azure Storage Account to an Asp.net MVC app?

我必须在 dotnet MVC 项目中包含一个 React 应用程序。我有一个简单的 React 应用程序,它只包含一个 KendoUI 网格。

这是我需要做的:

我有以下代码(ASP.net MVC):

评论的 div 是包含旧网格(将被静态 React 应用程序替换的网格)的 div。

我想在测试中添加静态 React 应用程序 div(ID 为 "scheduleSitesGrid2" 的应用程序)

我将我的静态 React 应用配置为寻找完全相同的 div(这里是 index.tsx):

也就是说,有没有一种方法可以让我使用 Azure CDN 轻松地将 React 应用程序包含在 MVC 应用程序中?我找不到关于使用 CDN 将 React 应用程序添加到 MVC 的任何其他问题。

我尝试将 CDN 包含在脚本标记中,但没有成功。我还想知道,由于 React 应用程序作为静态站点托管,它已经构建,所以我可能无法将它添加到 MVC div 中(因为它已经插入到 index.html React 应用程序的文件,如下图所示)。然后,除了 index.html 之外,我还需要将所有应用程序上传到 Azure。我说得对吗?

非常感谢!

和平!

如果我理解正确的话,您有一个使用某些应用服务计划托管的 MVC Web 应用程序,以及一个没有服务器端代码执行的 React 应用程序 Javascript?

如果这是正确的,那么您肯定会提供来自两个不同域的内容:一个用于您的 Web 应用程序,通过 CDN 呈现;另一个用于您的 Web 应用程序,通过 CDN 呈现;一个用于存储帐户,托管静态内容,仅通过存储帐户 URI 呈现。

两者确实可以通过单个 CDN 端点呈现,但您需要使用高级层并利用 URL 重写规则。您可以将默认路由配置为您的 Web 应用程序 URI,然后您可以配置重写规则,例如,将“/static/...”重写(翻译)为 "https://{{yourstaticstorage}}.storage.azure.com/yourstaticpath/...".

此处记录了 Verizon Premium 重写:https://docs.microsoft.com/en-us/azure/cdn/cdn-verizon-premium-rules-engine-reference-features#url-rewrite

如果你不想使用 Verizon Premium,你也可以看看 Azure Front Door。

https://azure.microsoft.com/en-gb/services/frontdoor/

从本质上讲,Front Door 是增强型 CDN。它内置 WAF 并允许您配置路由规则。在走这条路线之前一定要比较价格,因为我很确定你必须为每条路线规则付费。

您还可以在交付之前提取代码中的静态内容,但这不会缓存在 CDN 上,因为访问的每个动态页面都需要执行。您最好创建一个路由规则并使用 CDN/Front Door 检索和缓存的静态内容的相对路径。