AWS后端+反应前端：处理请求答案

【问题标题】：AWS backend + react front end : handling requestAWS后端+反应前端：处理请求
【发布时间】：2017-05-16 02:53:45
【问题描述】：

我正在使用 AWS，我已经使用 dynamodb、api gateway 和 cognito 设置了一个简单的 REST API。我已经使用 node + express 编写了 REST API。

我的节点应用程序在 EB 上，基本上我使用 cognito 处理 API 网关中的请求身份验证。作为一个独立的，这似乎工作正常，因为我正在使用一个简单的反应应用程序对其进行测试。

现在我正在为我的实际 React 应用程序进行服务器端渲染，因此我正在尝试找出处理此问题的最佳方法。对于服务器端渲染，我有另一个名为 react-app-server 的节点应用程序，我想处理 API 网关上的缓存并使用 cloudfront 来提供静态文档、图像等。

所以如果我去www.mysite.com/for-sale/some-item-thats-for-sale，这个请求应该首先检查是否有这个页面的缓存版本并提供它。否则，我需要让我的 react-app-server 呈现 .html 并提供/缓存它。由于有两个节点应用程序，api-server 和 react-app-server，我如何从我的 api-gateway 指向 react-app-server 以呈现 html？

这个场景如何适应 AWS 架构？我意识到这可能是一个非常愚蠢的问题，但我对此真的很陌生。谢谢

【问题讨论】：

为什么要让 API Gateway 提供 HTML 服务？
抱歉给您带来了困惑。正如我所提到的，我只是第一次接触这几天，这对我来说有点尴尬，因为这是全新的。我试图弄清楚如果缓存中不存在页面，如何处理必须第一次呈现页面。为此，我是否必须以某种方式打我的react-app-server，这就是我的断开连接。所以我正在考虑使用 Lambda 来执行我的渲染函数，该函数将渲染 HTML 并将其添加到缓存中，但我不确定这是否是正确的方法。
HTML 是如何被准确缓存的？
现在我将它们存储在节点的内存中。

标签： node.js amazon-web-services reactjs aws-api-gateway

【解决方案1】：

我建议您将 Cloudfront 放在所有应用程序的前面，并允许 Cloudfront 使用您在每个 HTML 响应中返回的 Cache-Control 或 Expires 标头来处理您的所有缓存。这将允许从 Cloudfront 边缘服务器返回所有缓存的内容，从而提高性能并简化您的应用程序。

例如，如果您的节点应用程序返回带有 Cache-Control: public, max-age=31536000 标头的 HTML 文档，Cloudfront 将读取该值并从边缘服务器返回相同的 HTML 响应长达 1 年（31,536,000 秒 = 1 年）。如果您的节点应用程序返回带有 Cache-Control: public, max-age=3600 的 HTML 文档，Cloudfront 将读取该值并将 HTML 缓存在边缘服务器上长达 1 小时。

您可以在您的分配中定义两个（或更多）来源，并且您可以使用行为来控制每个请求将委托给哪个来源。

我实际上刚刚在这个上午写了一篇关于在 API 网关前使用 Cloudfront 的教程：https://www.codeengine.com/articles/process-form-aws-api-gateway-lambda/。它与您的用例不同，但如果您希望在 API 网关前使用 Cloudfront，它将帮助您入门。

如果您稍微按照本教程进行操作，您会发现我正在处理来自 S3 存储桶的大多数请求，但将以 /rest/ 开头的路径路由到 API Gateway，相信这也适用于您的用例。

【讨论】：

谢谢戴夫。这是一篇不错的文章。我想我的大问题是我在节点端渲染 HTML，并且现在将渲染的页面存储在内存中。如果我将渲染的 HTML 导出到 s3 存储桶，然后使用云端会更好吗？抱歉，我仍然有点困惑..信息太多了：P所以基本上客户端会点击某个页面（查看二手车或其他东西）->如果该页面不存在，节点会呈现该页面->现在只是从内存中提供服务，而是将其放入 s3 然后放到 cloudfront 中？
我不确定 S3 层会在这里提供多大的优势，除非您打算提前准备好所有的 HTML？如果您只是从 API Gateway 返回带有 Cache-Control 或 Expires 标头的 HTML 并配置 Cloudfront 以遵循原始标头，它将缓存边缘的内容，并且对相同 HTML 的后续请求将不会返回到源（节点API) 直到这些标头中指定的过期时间。
另一方面，如果您希望在每次部署时都提前构建 100% 的 HTML（就像 Jekyll 所做的那样），那么在 Cloudfront 后面使用 S3 存储桶绝对是可行的方法。跨度>
这实际上是您想要一个惰性缓存（由 Web 请求填充）还是一个准备好的缓存（在每个部署中预先填充）的问题。
谢谢戴夫！我想我会从你的第一个回复中使用缓存控制方法，因为这就是我现在在节点端做的事情。我在 24 小时后使缓存失效。我将从 API 网关本身弄清楚如何做到这一点。我想要一个惰性缓存之类的东西，因为我的理由是用户将创建一个新列表，并且在创建时我需要缓存该特定页面。

【解决方案2】：

CloudFront 是一个内容交付网络，旨在通过将您的文件副本放置在边缘位置，最大限度地减少来自世界各地的访问者的延迟和传输时间。它具有缓存功能，因此通过正确的设置，您应该能够使其从您的 react-prerenderer 检索静态内容并缓存它们。

API 网关是为提供动态内容而构建的，并且仅在 AWS 的主要可用区域中运行，而不是在边缘站点上运行。如果可能的话，通过 API 网关将请求路由到 CloudFront 会很奇怪。

另一种可能性是在您的应用程序中处理缓存（例如，在 Express 中您可以 use mcache）。

【讨论】：

谢谢！我实际上是在我的节点应用程序中缓存，而不是使用 mcache 只是一个简单的字典。试图了解这一切如何在“现实世界”中融合在一起，并且有很多要阅读的内容：D 你如何处理为页面提供正确的 HTML 文档，比如如果有人点击/for-sale/some-item-123，我如何向他们发送缓存的html 呢？