【问题标题】:How can I leverage CDN with my AngularJS app on ASP.NET MVC?如何在 ASP.NET MVC 上将 CDN 与我的 AngularJS 应用程序结合使用?
【发布时间】:2016-03-01 21:05:13
【问题描述】:

我有一个MVC 项目,它实际上只是为angular 应用程序服务。这将是一个公共应用程序,我希望它会获得大量流量,因此我尝试使用 CDN 来保持对我的服务器的请求较少。

我找到了很多关于如何从CDN 获取angular 本身的文章,但我正在寻找的是我的文件(csshtmljsmedia)从CDN 获得服务。例如,如果我有一个directive,则需要从CDN 提供模板,但我无法对其进行硬编码,因为模板可能尚未上传到测试或生产环境.

更新: MVC 应用程序仅提供初始布局和主页。一旦我的角度脚本加载 MVC 就不再使用了。后端是一个单独的 Web API 应用程序。

【问题讨论】:

    标签: angularjs model-view-controller cdn


    【解决方案1】:

    您可能问错了问题,但您在如何针对高流量进行优化方面走在正确的轨道上。

    首先,了解如何将 Angular 应用程序作为静态文件提供服务。在我过去的一个项目中,我的 Visual Studio 解决方案中有两个项目,一个是 Web API 后端,另一个是只提供静态内容的 Web 项目。您可以将 Visual Studio 配置为在 localhost 的不同端口上同时运行这两个项目。这并不能回答你的问题,但像这样设置开发会让你更近一步。

    接下来,一旦您知道项目的前端和后端与服务器级别分离,请确保您不会从跨域请求中获得 CORS 问题。如果您要从子域提供后端服务,CORS 可能是个问题。仔细研究一下,您可能需要在 MVC 应用程序中添加一些代码来解决该问题。

    既然您已经了解了所有这些,请了解如何使用 CDN 服务。有许多产品具有如何部署内容和 SSL 证书的细节,每个产品都有所不同。 Amazon Web Services、Microsoft Azure 和许多其他公司都提供 CDN 服务,但在您查看这些内容之前,请确保您实际上可以从您的开发机器上的不同端口为您的后端提供服务,并且它仍然可以工作。

    【讨论】:

    • 是的,我忘了明确说明,但我的应用完全按照您的描述进行了拆分。 MVC 直接提供的唯一服务是布局和主页,它们只加载脚本。但其他所有文件都只是一个静态文件。并且后端是托管在单独应用程序上的 Web API 服务,CORS 不再是问题。
    • 在这种情况下,如果他们的文档对您没有帮助,请选择一个 CDN 并再次询问您的问题。每个 CDN 的程序都略有不同。您也可能只需要像 Amazon S3 的 azure blob 存储这样的静态托管,而无需在其前面使用 CDN。它仍然可以从您的服务器卸载连接,而无需麻烦或管理 CDN 上的缓存文件。
    【解决方案2】:

    我最近在想一个好的解决方案... 在本地测试(grunt serve)中,我使用当前未缩小的 .js/.css 文件,但是在创建构建(grunt build)时,我想将这些文件指向我的 Angular 项目中的 CDN。 我正在考虑您的 grunt(gulp/webpack/etc) 构建(它为构建创建缩小的本地文件),您可以通过以下方式将某些 url/文件添加到您的 CDN https://github.com/callumlocke/grunt-cdnifyhttps://github.com/tactivos/grunt-cdn(但它仍会使用您的非缩小文件进行 grunt 服务)。

    如果上传到 CDN 并使文件失效是一个 grunt/gulp/webpack 插件,那就太酷了。 然后,您可以将其作为产品构建的一部分自动化。 猜测像 Jenkins/etc 这样的构建系统会将您的应用程序上传到任何地方。 然后使用像这样的 grunt/gulp 插件可能会使您的文件无效: https://github.com/keycdn/grunt-keycdn 如果您使用该 CDN 服务。 我猜你的构建系统像 Jenkins 也可以通过它自己的 CDN 上传/失效插件为你完成这项工作。

    我知道这个答案特别提到了 grunt,但是 gulp/webpack/etc 也应该有类似的插件。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-01-10
      • 1970-01-01
      相关资源
      最近更新 更多