设置CloudFront来托管您的Web应用程序

在我的上一篇文章中，我们介绍了如何设置一个网络应用程序，该应用程序可提供来自CloudFront的CSS和JavaScript的大量和捆绑。我们将其集成到VITE中，以便当应用程序在浏览器中运行时，从应用程序的根HTML文件中请求的资产将从CloudFront中作为CDN提取。

虽然CloudFront的边缘缓存确实提供了好处，但是从这些位置为您的应用程序的资源服务并非没有自己的成本。让我们看一下我自己的Web应用程序的WebPagetest跟踪，并使用上一篇博客文章的配置运行。

这篇文章将向您展示如何解决这个问题。我们将介绍如何在CloudFront上托管整个Web应用程序，并将CloudFront转发（或“代理”）不可访问的数据，AUTH等请求到我们的基础Web服务器。

请注意，这比我们在上一篇文章中看到的要多得多，并且根据您的Web应用程序的确切需求，指令可能会有所不同，因此里程可能会有所不同。我们将更改DNS记录，根据您的Web应用程序，您可能必须添加一些缓存标头，以防止某些资产被缓存。我们将参与这一切！

您可能想知道，我们在上一篇文章中涵盖的设置是否甚至提供了任何好处，因为我们在本文中所做的事情。考虑到较长的连接时间，我们会更好地放弃CDN，而是从Web服务器提供所有资产以避免更长的等待？我使用自己的网络应用程序测量了这一点，上面的CDN版本确实更快，但效果不大。最初的LCP页面加载速度约为200-300ms。请记住，这仅适用于初始负载。设置此连接后，Edge缓存将为您随后的所有异步加载的块增加更多的价值。

设置我们的DNS

我们的最终目标是从CloudFront服务整个Web应用程序。这意味着，当我们击中域时，我们希望结果来自云层，而不是当前链接到的任何Web服务器。这意味着我们必须修改DNS设置。我们将使用AWS 53。

我正在以MyDemo.Technology为例，这是我拥有的领域。我在这里向您展示所有步骤。但是到您阅读本文时，我将从我的Web应用程序中删除此域。因此，稍后，当我开始向您展示实际的CNAME记录时，这些记录将不再存在。

转到53号公路主页，然后单击托管区域：

单击创建托管区域并输入应用程序域：

我们还没有真正完成任何成就。我们告诉AWS，我们希望它为我们管理这个域，AWS给我们提供了该名称服务器，它将路由我们的流量。为了生效，我们需要去任何域注册的地方。您应该有一个地方可以输入自己的自定义名称服务器。

请注意，我的领域已在Godaddy注册，这在本文的屏幕截图中反映了。 UI，设置和选项可能与您在注册​​服务商中看到的不同。

警告：我建议在更改之前写下原始名称服务器以及所有DNS记录。这样一来，如果某些事情失败，您就有所有需要在开始之前恢复事物的一切。即使一切正常，您仍然需要将任何其他记录重新添加到53号公路，即MX记录等。

设置CloudFront分发

让我们进行云范围发行以托管我们的Web应用程序。我们在上一篇文章中介绍了基础知识，因此我们将正确地了解。从上次开始的一个很大的变化是我们输入的原始域。不要放置顶级域，例如your-app.net。您需要的是托管应用程序的基础域。如果那是Heroku，然后输入Heroku为您提供的URL。

接下来，如果您打算通过安全的HTTPS连接使用此站点，请确保更改默认协议：

这部分至关重要。如果您的Web应用程序正在运行身份验证，托管数据或其他任何内容，请务必启用其他动词。如果您跳过此部分，则任何帖子请求对身份验证，突变数据等的请求将被拒绝并失败。如果您的Web应用程序除了服务资产外什么都不做，并且所有这些内容都是由外部服务处理的，那么出色！您的设置很棒，您可以跳过此步骤。

与上次相比，我们必须对缓存密钥和Origin请求设置进行多次更改：

我们需要创建一个最低ttl的缓存策略，因此我们将寄回的非临床标头将得到适当尊重。您可能还需要启用所有查询字符串。当多个GraphQl请求与不同的查询字符串一起忽略时，我看到了怪异的行为，从而使所有这些请求从CloudFront的角度出现相同。

我的政策看起来像这样：

对于原始请求策略，如果需要，我们应确保向诸如身份验证和数据查询之类的问题发送查询字符串和cookie。需要明确的是，这决定了Cookie和查询字符串是否会从CloudFront向下发送到您的Web服务器（例如Heroku，还是类似）。

我的看起来像这样：

最后，对于响应标头策略，我们可以从列表中选择“具有前跨前任的CORS”。最后，您的前两个将具有不同的名称，具体取决于您的设置方式。但是我的看起来像这样：

让我们将我们的域（无论它是什么）连接到这个云沿线分布。不幸的是，这比您预期的要多。我们需要向AWS证明我们实际上拥有该领域，因为，亚马逊都知道，我们没有。我们在53号公路上创建了一个托管区。我们将其给我们的名字服务员并向我们注册了Godaddy（或者您的域名人物）。但是亚马逊还不知道。我们需要向亚马逊证明，实际上，我们确实控制了该领域的DNS。

首先，我们请求SSL证书。

接下来，让我们请求证书链接：

现在，我们将选择要请求公共证书选项的选项：

我们需要提供域：

而且，就我而言，证书正在等待：

所以，我要单击它：

这证明了我们拥有并控制该领域。在单独的选项卡中，返回53号公路，然后打开我们的托管区域：

现在，我们需要创建CNAME记录。复制记录名称的第一部分。例如，如果cname是_xhyqtrajdkrr.mydemo.technology，则将_xhyqtrajdkrr零件放置。对于记录值，请复制整个值。

假设您将AWS名称服务器注册为您的域主机，GoDaddy或Whor，AWS很快就可以在要求您创建的DNS条目中进行ping ping，请参阅其期望的响应并验证您的证书。

您在开始时设置的名称服务器可能需要时间。从理论上讲，它可能需要长达72个小时，但通常在一个小时内更新。

您会在域上看到成功：

…以及证书：

哎呀！快要完成了。现在，让我们将所有这些连接到我们的CloudFront发行版。我们可以回到CloudFront设置屏幕。现在，在自定义SSL证书下，我们应该查看我们创建的内容（以及您过去创建的任何其他）：

然后，让我们添加该应用程序的顶级域：

剩下的就是告诉53号路线将我们的域将其路由到这个云层分布。因此，让我们回到53号公路并创建另一个DNS记录。

我们需要输入IPv4的A记录，以及IPv6的AAAA记录。对于这两者，请将记录名称留为空，因为我们只在注册我们的顶级域，而没有其他内容。

选择A记录类型。接下来，将记录指定为别名，然后将别名映射到云方分布。这应该打开一个选择您的CloudFront发行版的选项，并且由于我们以前在CloudFront上注册了该域，因此您应该看到该分布，并且只有在进行选择时才看到该分布。

我们为IPv6支持所需的AAAA记录类型重复了完全相同的步骤。

运行您的网络应用程序，并确保它实际上可以正常工作。它应该！

测试和验证的事情

好的，虽然从技术上讲我们在这里完成，但仍有一些事情要满足您的Web应用程序的确切需求。不同的应用程序有不同的需求，到目前为止，我所展示的内容已引导我们完成了通过云层路由事物以提高性能的共同步骤。您的应用程序独有的东西可能需要更多的爱。因此，为此，让我介绍您在设置期间可能遇到的一些其他可能的项目。

首先，请确保您拥有的任何帖子正确发送到了您的来源。假设正确配置了CloudFront将cookie转发到您的来源，则应该已经起作用，但是检查没有害处。

更大的问题是将发送到您的Web应用程序的所有其他获取请求。默认情况下，如果被缓存，请通过缓存响应将CloudFront收到的任何GET请求都将接收到您的Web应用程序。这可能是灾难性的。 CDN将任何带有GET发送的REST或GRAPHQL端点的数据请求都会缓存。而且，如果您要运送服务工作者，那也将被缓存，而不是正常行为，在后台下发送当前版本并在有更改（如果有更改）中进行更新。

为了告诉CloudFront不要缓存某些东西，请确保将“缓存控制”标头设置为“无缓存”。如果您正在使用诸如Express之类的框架，则可以使用类似的内容设置中间件以访问数据：

 app.use（“/graphql”，（req，res，next）=> {
  res.set（“ CACH-CONTROL”，“ NO NO-CACHE”）;
  下一个（）;
}）;
app.use（
  “/graphql”，
  ExpressGraphQl（{
    架构：执行措施，
    graphiql：是的，
    root值：root
  }））
）；

对于诸如服务工作者之类的事情，您可以在静态中间件之前为这些文件放置特定的规则：

 app.get（“/service-worker.js”，express.static（__ dirname“/react/dist”，{setheaders：resp => resp.set（“ cache-control”，“ not-cache”）}）;
app.get（“/sw-index-bundle.js”，express.static（__ dirname“/react/dist”，{setheaders：resp => resp.set（“ cache-controll”，“ not-cache”，“ not-cache”）}）;
app.use（express.static（__ dirname“/react/dist”，{maxage：432000 * 1000 * 10}））;

等等。彻底测试所有内容，因为可能会出错。每次更改之后，请确保在云层中运行完整的无效，并在重新运行Web应用程序之前清除缓存，以测试正确排除在缓存中的内容。您可以从CloudFront的“无效”选项卡中执行此操作。将其打开并放入 /*以获取值，以清除所有内容。

工作的云方面实现

现在我们已经运行了所有内容，让我们在WebPagetest中重新运行我们的跟踪：

就像这样，我们不再像以前看到的那样设置连接。对于我自己的Web应用程序，我看到LCP的500毫秒有了实质性改善。那是一个可靠的胜利！

在CDN上托管整个Web应用程序可以提供所有世界中最好的。我们获得了静态资源的边缘缓存，但没有连接成本。不幸的是，这种改进不是免费的。正确设置所有必要的代理并不完全直观，然后仍然需要设置高速缓存标头，以避免在CDN的缓存中挂起不可接受的请求。

以上是设置CloudFront来托管您的Web应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！