在 AWS 上使用 NextJS s-s-r 部署 React 应用程序的最便宜方法？ [关闭]

Posted 2023-02-22

技术标签:

【中文标题】在 AWS 上使用 NextJS s-s-r 部署 React 应用程序的最便宜方法？ [关闭]【英文标题】：Cheapest way to deploy a React app using NextJS s-s-r on AWS? [closed] 【发布时间】：2020-08-09 11:57:48 【问题描述】：

我了解 Nextjs 是一个需要服务器功能的 Node 框架，因此，将其用于服务器端渲染不能仅托管在 S3 上。但是，这是否意味着唯一的选择是将整个应用程序托管在 EC2 上——这要贵得多——还是有其他中间解决方案？

【问题讨论】：

【参考方案1】：

Next.js s-s-r + 无服务器框架 + AWS Lambda

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

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

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

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

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

如果您是 Serverless 框架的新手，我建议您参加 Serverless 社区的免费课程 Serverless for Frontend Developers

编辑：2021 年 3 月 3 日

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

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

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

How to keep your lambda functions warm?

How to Minimize AWS Lambda Cold Starts

Keep your lambdas warm

【讨论】：

@Thanh-QuyNguyen 我已经用更好的解释更新了我的答案。此外，如果您尝试使用 serverless-next.js 在 AWS lambda 上部署 Next.js 应用程序，并且随着时间的推移碰巧节省了一些积分/金钱，那么不要忘记将此答案标记为已接受。 :D 在您回答之前，我实际上已经为此工作了一整天，是的，这似乎是将 NextJS 应用程序部署到 AWS 的最具成本效益的方式。但是，我遇到了 next-i18n 的问题，该问题目前无法与 Serverless 一起使用。不过，该团队正在参与其中，并且处于测试阶段。我今天没有足够的时间让它工作? 哦，太好了。而且我看到无服务器框架还没有成熟。我从未使用过 next-i18n 库，但我希望他们能尽快解决它。很好的答案！要记住的一件事是，这种架构很便宜，但对 SEO 不利。 AWS lambda 进入冷模式，这意味着如果没有人访问该站点，则第一次访问该站点将需要更长的时间才能完成。例如，Google 爬虫可以在一段时间未使用的情况下访问该站点，并且您的站点将响应比平时更长的时间，因为它是空闲后的第一个调用。如果 SEO 对您很重要，请记住这一点。关于 SEO - 如果您将 NextJS 部署到不在 vercel 上的 VPS（AWS、Digital Ocean、Heroku 等）AKA，nextJS 服务器将像普通快递服务器一样工作。所以 API 路由只是常规的 API 端点。没有冷启动问题【参考方案2】：

AWS Next.js Terraform 模块

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

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

因此，每个请求的成本因路由而异：

静态资源请求：css、js、图片

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

HTML 请求：预渲染的 html 路由或需要服务器端渲染 (s-s-r) 的路由

适用Cloudfront、Lambda@Edge（代理，以 1 毫秒为步长）的费用。

重写提供预渲染 HTML 的路由

S3 的费用适用。

使用服务器端渲染 (s-s-r) 的路由

适用HTTP API-Gateway 和regional Lambda（s-s-r，以 1 毫秒为步长）的费用。

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

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

【讨论】：

你用什么来创建这个图表？没有具体的工具，是用figma制作的矢量图（figma.com）。从useflowkit.com 获得一些灵感。【参考方案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 可以很好地运行一个网站。

【讨论】：

当您部署到 VPS 时，api 文件夹中的文件是否只是常规服务器端点（这是我希望的）到无服务器功能。当您部署到 VPS 时，是的，它的运行方式就像您使用“下一个开发人员”的方式一样，一切都由您的 VPS 提供，没有速度损失。您需要使用“next build”和“next start”启动应用，或者使用“PM2”进行管理值得一提的是，免费的 Vercel 爱好计划仅限于个人、非商业用途。更多信息：vercel.com/docs/platform/fair-use-policy#commercial-usage【参考方案4】：

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

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

nginx

【讨论】：

【参考方案5】：

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

DigitalOcean 这将为您提供 1 GB 内存 - 25GB SSD - 1TB 传输，每月 5 美元 Heroku 这将为您提供 512MB 内存 - 免费提供 1 个 Web 和 1 个 Worker Dyno，即使您付费，也有一些实惠的价格，而且 Heroku 是托管服务，因此他们会处理所有事情，您无需设置任何东西

我相信这对你来说应该是一个好的开始，然后再购买更昂贵的解决方案

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

【讨论】：

我实际上在有限的时间内拥有“免费 AWS 积分”，因此我提出了问题。所以没有办法处理“有限EC2”上的s-s-r和S3服务器上的静态部分？仅使用 AWS 的“唯一”选项将全部使用 EC2？【参考方案6】：

为了部署我们的 nextJs 网站，我们一直在使用 AWS lambda：https://github.com/serverless-nextjs/serverless-next.js 使用它非常简单。不幸的是，有时页面的加载速度很慢。从2秒到7秒。谷歌搜索控制台也证实了这一点。

我们找不到真正深入探讨这个问题的方法以及我们如何解决这个问题，但我怀疑这是一个冷启动。经过一番研究，AWS理论上是可以用并发来解决的：

https://aws.amazon.com/blogs/compute/new-for-aws-lambda-predictable-start-up-times-with-provisioned-concurrency/

但我无法让它工作，因为它是一个 Lambda@Edge，而且它也非常昂贵！

http://nachonacho.com 我们专注于 SEO，因此加载页面的时间是我们最关心的问题。

我们最终决定迁移到简单的 AWS EC2。

这里有比较：

来源：https://www.site24x7.com/