配置Azure CDN以提高Angular性能（6/7）

此博客文章是“在Azure上部署Spring Boot和Angular应用程序”系列文章的一部分，这里是文章的完整列表：

• Creating a Spring Boot and Angular application for Azure (1/7)
• Creating and configuring Azure Web App and MySQL to host a Spring Boot application (2/7)
• Using Azure Pipelines to build, test and deploy a Spring Boot and Angular application (3/7)
• Using Azure Application Insights with Spring Boot (4/7)
• Using Azure Application Insights with Angular (5/7)
• Configuring Azure CDN to boost Angular performance (6/7)
• Configuring Azure Redis Cache to boost Sping Boot performance (7/7)

每次发布文章后，链接都会更新。

Performance issues with our Angular application

我们当前的Angular应用程序运行良好，实际上，在使用Chrome审核工具进行测试时，其生产版本甚至获得了完美的“ 100”分。 JHipster团队一直在努力为您提供最佳的应用程序，但我们仍然可以使其更好！

当我们将所有内容生成到同一个项目中时，所有的客户端代码都将由Spring Boot提供服务。 这是我们经常听到的关于“全栈”项目的批评之一，这些项目通常是由JHipster生成的，这些人没有仔细观察应该如何托管它。

首先，这对于小型项目来说完全可以正常工作，并且由于没有其他相关成本，因此也更具成本效益。

其次，可以通过添加HTTP / 2支持进行改进：默认情况下，JHipster中禁用了该功能，但是有一个jhipster.http.version可以设置为使用HTTP / 2的属性。 这是仅JHipster的解决方案，因此，如果您直接使用Spring Boot，则将需要一些手动设置。

最后但并非最不重要的一点是，最好的解决方案是使用内容交付网络（CDN），例如：

• 它将立即提供HTTP / 2支持它将资产更靠近您的用户本地化，从而为他们带来更好的性能

Azure CDN

We are going to use Azure CDN in this post, as it is fully integrated with Azure Web App, and very easy to use.

在价格方面，它是市场上较便宜的产品之一，每月费用不到30美元。 再说一次，如果您精打细算，那就不要一开始就使用CDN：“正常”的Spring Boot + Angular应用程序（如JHipster创建的应用程序）开箱即用。 重要的是能够稍后扩展，并在需要时添加CDN。

Conditions to use a CDN correctly

CDN将缓存所有资产：这意味着在向您的服务器提出一些请求之后，所有请求都将直接从CDN进行服务，并从中受益。 这意味着您的应用程序需要进行特定的编码才能与缓存一起正常工作：

• 静态资产的名称中应包含一个哈希，因此，当发布新版本时，客户端浏览器将获取新内容。必须从服务器发送正确的HTTP标头，以便仅缓存正确的内容。在对我们的Spring Boot后端进行HTTP调用时，请求不应通过CDN。

Angular应用程序通常会满足这三个条件，因为这些最佳实践现在已在社区中广为人知。 当然，JHipster密切关注这些内容，因此当您使用JHipster进行“生产”构建时：

• 所有资产将被缩小，并且名称中将具有特定的哈希值。Spring Boot将发送正确的HTTP标头。有一个参数叫做SERVER_API_URL在Webpack构建中，指向特定的API服务器。

CORS considerations

由于我们的内容将不会与我们的数据在同一服务器上提供，因此应该出现CORS（跨源资源共享）问题。 这意味着，默认情况下，您的API服务器将不会回答来自另一个域的请求：这对您的API服务器很有帮助（否则其他人可能会使用它），但最重要的是对您的用户（因为这为许多攻击打开了大门） ）。

使用Spring Boot，默认情况下具有此保护。 JHipster在其之上提供了一种易于使用的配置机制，但这只是简化了Spring Boot提供的功能。

在生产中，您只应允许在允许来源以下参数-我们正在使用*，因此可以从任何地方接受请求，这里的测试更容易：

jhipster:
  cors:
    allowed-origins: '*'
    allowed-methods: '*'
    allowed-headers: '*'
    exposed-headers: 'Authorization,Link,X-Total-Count'
    allow-credentials: true
    max-age: 1800

Configuring Azure CDN

在您的Azure Web应用程序中，选择“网络”，然后选择“ Azure CDN”。

然后，您可以创建一个新的CDN终结点，该终结点将在现有的Azure Web App之上运行。 当然，您还应该将DNS服务器配置为指向该CDN，以便您的用户在此处使用您自己的域名。

这就是所有要做的事情，您现在可以测试一切正常：

• 使用浏览器，您可以检查自己是否正在使用HTTP / 2访问Web应用程序。 进行Chrome审核还应该表明您现在尊重这种最佳做法。如果使用的是JHipster，则可以访问“指标”屏幕，该屏幕允许您监视发送到服务器的HTTP请求的数量。 您可以直接使用CDN和Web应用程序对应用程序进行一些“强制重新加载”：使用CDN时，应减少向应用程序发送的HTTP请求。

The changes done in our application for this blog post are all available in this commit.

from: https://dev.to//azure/configuring-azure-cdn-to-boost-angular-performance-6-7-5ebe