2021 年单人团队如何利用 Next.js 和 AWS 构建 SaaS 产品？

作为一个热爱前沿技术的人，我选择使用现代技术栈来构建我的第一个 SaaS 产品。随着JAMStack和无服务器架构的兴起，我创建了PostMage，前端使用 Next.js 静态代码生成，后端则使用 Node.js 部署在 AWS 上。

因为我是一名独立全栈开发者，我的时间和资源都非常有限。在本文中，我将分享我构建 SaaS 产品所使用的所有技术：从编程语言到开发工具。您将了解到我是如何克服挑战，以独立开发者的身份构建 SaaS 产品的。

希望我的故事能给你带来灵感，帮助你打造自己的SaaS产品。

TypeScript 无处不在

为了构建我的SaaS产品，我使用TypeScript编写了每一行代码。是的，所有代码：前端、后端，甚至基础设施即代码都是用TypeScript编写的。

整个项目只使用一种编程语言。无需学习新语言，并通过简化代码维护来节省时间。

我为什么选择TypeScript？因为它具有强类型特性，开发体验更加愉悦，而且与 IDE 的集成也更好。所以，如果你仍然是一名 JavaScript 开发者，不妨尝试一下 TypeScript。

前端框架

前端我使用Next.js。它是一个基于 React 的框架，可以用来构建复杂的应用程序。好消息是，Next.js 开箱即用地支持 TypeScript。

我使用Tailwind CSS来为 React 组件添加样式。作为开发者，你通常会构建一个不太美观的界面。有了 Tailwind CSS，即使你不是设计师，也能构建出不那么丑陋的界面。

作为 JAMStack 的忠实拥趸，我之前曾尝试过 Jekyll、Hexo 和 11ty 来开发不同的项目。最终，我选择使用 Next.js 以静态生成模式构建我的 SaaS 产品。这样一来，在构建时，所有页面都会被生成并预渲染。这种方式非常适合 SEO，托管成本低廉，速度快，安全性高，而且具有高度可扩展性。

静态托管

我使用Cloudflare Pages作为前端托管服务，它是 Netlify 或 Vercel 的全新替代方案。Cloudflare 于 2020 年 12 月发布了该服务的测试版，并于 2021 年 4 月正式向公众发布。

Pages 中缺少一些小功能（没什么大问题）。在 Cloudflare 团队解决之前，我已经找到了一些临时的解决方法。所以，这不算什么大问题。

Cloudflare Page 的优点在于其慷慨的免费套餐：无限带宽（Vercel 和 Netlify 每月限制为 100GB），而且您可以免费设置密码保护的网站（Vercel 或 Netlify 不包含此功能）。

无服务器 REST API

后端方面，我使用Express.js和Serverless Framework构建了一个 REST API。为了在Serverless Framework中支持 TypeScript ，我使用了serverless-bundle插件。Express.js 需要另一个名为serverless-http 的插件才能与 Serverless Framework 协同工作。

为了提升开发者体验，我还使用了另外两个插件：serverless-dotenv-plugin和serverless-offline。第一个插件用于支持 dotenv 文件，第二个插件用于在本地计算机上运行 Serverless Framework。

作为一名独立开发者，我选择无服务器架构，因为它易于部署、维护成本低且后端可扩展，让我的工作更轻松。无需成为 DevOps 工程师：无需 SSH 连接、操作系统更新、配置代理/Web 服务器/负载均衡器/防火墙等等。

验证

REST API 受IAM 身份验证保护。IAM 是 AWS 内置功能，用于保护所有 AWS 资源，在本例中指的是 API 网关和 AWS Lambda。当用户未连接到 SaaS 应用程序时，IAM 会拒绝 API 调用。因此，受到保护后，外部人员将无法调用您的资源。

由于 API 部署在 AWS 上，我选择使用AWS Cognito进行身份验证。Cognito 的优势在于它提供了实现 SaaS 身份验证所需的一切，从而节省了大量时间。您可以轻松实现电子邮件身份验证和社交账号登录（Facebook、Google、Apple 和 Amazon）。

AWS Cognito 与 React 前端之间的连接是通过AWS Amplify实现的。Amplify 提供 React 组件和代码，使您能够更轻松快捷地将前端集成到 AWS 中。

NoSQL数据库

像PostgreSQL和MySQL这样的主流知名数据库并不太适合无服务器架构。由于无服务器架构的特性，它可能会创建大量数据库连接，从而耗尽数据库连接数限制。

大多数服务提供商的做法是，即使您的 SaaS 应用没有任何流量，您仍然需要为数据库实例付费。反之，当您的应用开始增长时，数据库很快就会成为瓶颈。

作为一名独立全栈开发人员，我需要一个管理极其简便且与无服务器架构完全兼容的数据库。因此，我选择了DynamoDB作为主数据库。

DynamoDB是一个由 AWS 完全托管的 NoSQL 数据库，我用它来存储用户状态。他们几乎处理了所有事情，我只需要专注于我的代码。

基础设施即代码

如您所见，我的 SaaS 应用使用了多种 AWS 服务。在每个环境（开发、测试或生产）中手动设置云资源极其繁琐，而且很难保持它们之间的一致性。

AWS 为开发者提供AWS CDK，您可以在其中使用TypeScript定义云资源。只需一条命令，即可部署到您的 AWS 账户并完成所有资源配置。

部署

和许多开发者一样，我使用Git 和 GitHub来管理代码版本。许多现代托管服务，例如 Vercel、Netlify 和Cloudflare Pages，都会在每次提交时自动构建和部署代码。如果您使用 Git 分支，还可以实时预览结果，而无需推送到生产环境。

后端和基础设施方面，我使用了名为Seed.run的第三方服务，在每次提交代码时自动部署。与前端一样，它也负责在 AWS 上构建和部署后端资源。

DNS 和 CDN

正如你所料，我毫不犹豫地使用Cloudflare的 DNS 和 CDN 服务 ;) Cloudflare Pages 会自动将你的代码部署到 Cloudflare 网络中，我只需要将域名指向 Cloudflare 的 DNS 服务器，剩下的就交给他们处理了。使用 Cloudflare，你还能获得丰富的安全功能，例如防火墙和 DDoS 防护，保护你的 SaaS 产品。

错误跟踪

我使用Sentry作为错误跟踪解决方案。它会自动报告错误，并提供诸如堆栈跟踪、面包屑（问题发生前发生的事件轨迹）、浏览器信息、操作系统信息等有用信息。丰富的数据使生产环境中的调试变得更加容易：

Sentry只用于前端，不用于 REST API，我仍然使用原生解决方案。事实上，Sentry与 AWS Lambda 结合使用会产生很多开销，而且配置过程也不太简单。下一节将介绍我用于后端错误跟踪的解决方案。

日志记录、监控和警报

AWS Lambda 会自动将日志发送到AWS CloudWatch ，因此无需使用 Sentry。以下是存储在CloudWatch中的日志示例：

您还可以访问 Lambda 指标。这有助于了解无服务器函数的运行情况并检测是否存在任何错误。

我还使用Lumigo来获取额外的日志记录和监控信息。与 CloudWatch 相比，它的界面更容易使用：

您还可以在Lumigo中启用跟踪功能，以便可视化您的 AWS 服务和外部 API 调用。它能让您了解错误是出在代码中还是来自外部服务，从而简化您的调试过程。

支付和订阅

SaaS 的最后一步，也是对企业而言最重要的一步，就是收款。收取一次性付款已经够难了，但收取定期付款则要复杂得多。不幸的是，对于 SaaS 企业来说，我们必须处理后者。

您的客户在首次订阅时需要选择套餐并输入个人信息。

之后，您的用户应该拥有一个自助服务门户，他们可以在其中管理他们的计划：升级、降级、取消、暂停、恢复他们的订阅计划。

他们有时也需要更新个人信息。此外，他们还需要在需要时查看发票历史记录。

Stripe可以管理我在这一部分提到的所有事情，它隐藏了所有这些复杂性，使支付集成变得更加容易。

结论

我花了五个月的时间开发这个全栈 React SaaS 模板。我本可以专注于业务发展，却把精力都花在了解决这些技术细节上。其实，构建 SaaS 的第一个版本只需要一个月，而不是五个月。

一路走来，我学到了很多东西，也犯了很多错误。我希望其他开发者不要重蹈覆辙，所以我开发了Nextless JS，一个面向 SaaS 产品的 React Boilerplate。

使用 Nextless.js，您无需编写任何代码即可获得本文中提到的所有功能。节省您的时间，专注于重要事项，更快地推出您的 SaaS 产品。访问Nextless.js了解更多信息。