在 AWS 上使用 NextJS SSR 部署 React 应用程序的最便宜方法？

Question

据我了解，Nextjs 是一个需要服务器功能的 Node 框架，因此，使用它进行服务器端渲染不能仅托管在 S3 上。然而，这是否意味着唯一的选择是将整个应用程序托管在 EC2 上（这要昂贵得多），还是还有其他中途解决方案？

Answer 1

Next.js SSR + 无服务器框架 + AWS Lambda

用于部署 Next.js SSR 应用程序，而不是遵循管理和运行 24x7 全天候运行的整个 AWS EC2 实例的传统方法。实际上还有一种使用 AWS lambda 和无服务器框架的更具成本效益和现代的方法。

问：什么是AWS lambda？
AWS Lambda 让您无需预置或管理服务器即可运行代码。您只需为消耗的计算时间付费。

问：什么是无服务器框架？
无服务器框架开源让您可以使用无服务器架构开发应用程序，并使用 AWS Lambda、Azure Functions、Google CloudFunctions 等进行部署。

问：什么是Serverless-Next.js？
这是一个专为部署 Next.js 应用程序而构建的无服务器组件。此外，您在静态或公共文件夹中的任何资产都会上传到 S3 并自动从 CloudFront 提供服务，所以我认为这正是您正在寻找的。

下面是解释它如何为用户提供应用程序的架构。

如果您是无服务器框架的新手，我建议您学习无服务器社区的免费课程，该课程名为Serverless for Frontend Developers

编辑：03/03/2021

@super7egazi 在下面的评论中提出了真正的担忧。幸运的是，有几种方法可以让 Lambda 函数保持温暖。这是将预定的 ping 事件发送到您的函数以使它们保持活动和空闲状态，准备为请求提供服务的行为。

你会发现各种方法和插件来实现这一点，如果你只是搜索“如何保持 lambda 函数温暖？” 在谷歌上。

下面是我附上的一些链接以供参考。

如何让你的 lambda 函数保持温暖？

如何最大限度地减少 AWS Lambda 冷启动

让你的 lambda 保持温暖

Answer 2

AWS Next.js Terraform 模块

我们创建了一个开源 Terraform 模块，作为此用例的无服务器框架的低成本替代方案。我们不是仅依赖 Lambda@Edge 进行所有 SSR 操作，而是将 Lambda@Edge 仅用于路由（作为某种反向代理），然后通过 API 网关在内部将请求重定向到区域性 Lambda。

由于我们使用 CloudFront 作为反向代理，我们还可以针对_next/static/*css、js 等拆分大部分静态文件请求，并通过 S3 直接为它们提供服务，而根本不涉及 Lambda@Edge 代理。

所以每个请求的成本是不同的：

• 对静态资源的请求：css、js、图像

  仅适用于CloudFront和S3（对于 CloudFront 未命中）的费用

• 对 HTML 的请求：预渲染的 HTML 路由或需要服务器端渲染 (SSR) 的路由

  Cloudfront和Lambda@Edge（代理，按 1 毫秒步长计量）的成本适用。

  • 重写提供预渲染 HTML 的路由

    S3 的费用适用。

  • 使用服务器端渲染 (SSR) 的路由

    适用于HTTP API 网关和区域 Lambda（SSR，以 1 毫秒为单位计量）的成本。

对于使用此模型的几千个请求，总成本通常远低于 0.50 美元/月，同时拥有一个由 CloudFront 边缘缓存提供支持的快速服务站点。

在 GitHub 存储库上查找更多信息：https : //github.com/dealmore/terraform-aws-next-js

Answer 3

NextJS + Serverless 不是免费的。

NextJS + Serverless 目前部署在非免费的Lambda Edge 上。您无法享受 Lambda（而非 Lambda@Edge）的免费套餐。

Vercel + NextJs 是免费的

如果您的网站流量较低，我建议您使用 Vercel.com 部署它，该网站在后端使用 Lambda（AWS 网络）。

*他们的业余爱好版本是免费的，并提供与AWS Lambda 免费套餐相当的免费流量和调用。

部署 NextJS 应用程序就像上传到 Github + Vercel 与 GitHub 集成的自动部署一样简单。您无需担心 S3、托管或静态文件，在您推送到 Github 的那一刻，所有内容都托管在 Vercel 上。您只需要专注于开发。

当您的需求上升时（您通过了 Hobby 包，然后通过了 Pro 包），那么在 Serverless@Edge 上进行部署会变得更具成本效益。

届时，您需要做的就是切换您的域。

更新：只需将其部署在 VPS 上

无服务器是一个不错的概念，并且能够在各种平台上免费启动您的网站是一个加分项。

但是，冷启动可能是一个大问题，因为有时需要 3-4 秒才能为访问者加载页面。

如果您正在进行静态或静态增量生成，这不是什么大问题。这对 getServerSideProps 没有好处。

如果您正在为冷启动而苦苦挣扎，请相信我并继续使用 VPS。5 美元的 VPS 可以很好地运行一个网站。

Answer 4

您可以使用 AWS Lightsail：https ://aws.amazon.com/lightsail/

根据我的经验，nextjs云功能不是部署大型应用程序的好地方，因此，这将是您的选择：

0. 如果您的应用程序非常小并且永远不会增长，则仅使用云功能。云功能对文件大小、依赖项、包大小等有限制，等等
1. AWS Lightsail：https ://aws.amazon.com/lightsail/和一个小型 VPS，您可以使用 Nginx 和节点自行设置。就像每月 5 美元，您可以使用您的积分。
2. 与数字 1 相同，但在 Digital Ocean 上。
3. AWS Ec2

Answer 5

不确定您是否需要在 Amazon 上托管，但您可以以 5 美元/月的价格在 DigitalOcean 上托管，或者您可以在 Heroku 的免费套餐上托管，直到您确信想要迁移到 Amazon 上，之后您可以迁移到EC2 更昂贵的解决方案和主机：

• DigitalOcean将为您提供 1 GB 内存 - 25GB SSD - 1TB 传输，每月 5 美元
• Heroku将为您免费提供 512MB 内存 - 1 个 Web 和 1 个 Worker Dyno，即使您付费，价格也很实惠，而且 Heroku 是托管服务，因此他们会照顾一切，您无需设置任何内容

我相信，在购买更昂贵的解决方案之前，这对您来说应该是一个良好的开始

这就是您问题的答案，是的，如果您更喜欢 Amazon 内更受管理的解决方案，EC2 是 Amazon 和 Elastic beanstalk 中最便宜的