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

Question

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

• 我构建了React应用程序，并使用Azure存储帐户将其上传为静态网站。

• 然后我创建了一个指向静态React应用程序的Azure CDN

这是我需要做的：

我有以下代码（ASP.net MVC）：

注释的div是包含旧网格（将被静态React应用程序替换的网格）的div。

我想在测试div中添加静态React应用程序（一个ID为“ scheduleSitesGrid2”的应用程序）

我将静态React应用配置为寻找完全相同的div（这是index.tsx）：

话虽这么说，有没有办法我可以使用Azure CDN轻松地将react应用程序包含在MVC应用程序中？我找不到其他有关使用CDN将React应用添加到MVC的问题。

我试图将CDN包含在脚本标签中，但这没有用。我还想知道由于React应用程序是作为静态站点托管的，因此它已经构建，因此我可能无法将其添加到MVC div中（因为它已经插入到React应用程序的index.html文件中）如下图所示）。然后，除了index.html之外，我还需要将所有应用程序上载到Azure。我说的对吗？

非常感谢您！

和平！

Answer 1

如果我理解正确，那么您有使用某些应用程序服务计划托管的MVC Web应用程序，以及仅具有Javascript功能且没有服务器端代码执行的React应用程序？

如果是正确的话，那么您肯定会从两个不同的域提供内容：一个用于您的Web应用程序，通过CDN呈现；另一个用于Web应用程序。另一个用于存储帐户，用于托管静态内容，该静态内容仅通过存储帐户URI呈现。

这两者确实可以通过单个CDN终结点呈现，但是您将需要使用高级层并利用URL重写规则。您将默认路由配置为Web App 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前门。

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

从本质上讲，前门在类固醇上是CDN。它内置WAF，可让您配置路由规则。在选择这条路线之前，请先比较价格，因为我很确定您必须为每条路线规则付费。

您还可以在交付静态内容之前先将其提取到代码中，但是由于每次访问的动态页面都需要执行，因此静态内容不会缓存在CDN上。最好创建一个路由规则，并使用到CDN /前门检索和缓存的静态内容的相对路径。