将静态网站从 Azure 存储帐户添加到 Asp.net MVC 应用?
Add a static website from Azure Storage Account to an Asp.net MVC app?
我必须在 dotnet MVC 项目中包含一个 React 应用程序。我有一个简单的 React 应用程序,它只包含一个 KendoUI 网格。
我构建了 React 应用程序并使用 Azure 存储帐户将其作为静态网站上传。
然后我创建了一个指向静态 React 应用程序的 Azure CDN
这是我需要做的:
我有以下代码(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 检索和缓存的静态内容的相对路径。
我必须在 dotnet MVC 项目中包含一个 React 应用程序。我有一个简单的 React 应用程序,它只包含一个 KendoUI 网格。
我构建了 React 应用程序并使用 Azure 存储帐户将其作为静态网站上传。
然后我创建了一个指向静态 React 应用程序的 Azure CDN
这是我需要做的:
我有以下代码(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 检索和缓存的静态内容的相对路径。