作为热爱尖端技术的人，我选择使用现代技术堆栈构建我的第一个 SaaS。 随着 JAMStack 和无服务器架构的兴起，我创建了带有 Next JS 静态生成的 PostMage，用于前端和部署到 AWS 的 Node.js 后端。

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

希望我的故事能给你灵感来创建你的 SaaS 产品。

无处不在的TypeScript

为了构建我的 SaaS，我用 TypeScript 编写了每一行代码。 是的，所有代码：前端、后端以及 TypeScript 中的基础设施即代码。

整个项目只使用一种独特的编程语言。 没有时间学习新语言并通过使代码易于维护来节省时间。

我为什么选择 TypeScript？ 它通过强类型使开发更加愉快，并且与 IDE 有更好的集成。 所以，如果你还是一个 JavaScript 开发者，你应该试一试。

前端框架

对于前端，我使用 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 和无服务器框架构建了一个 REST API。 为了在 Serverless Framework 中支持 TypeScript，我使用了 serverless-bundle 插件。 Express.js 需要另一个插件来使用名为 serverless-http 的无服务器框架。

为了获得更好的开发者体验，我还使用了另外两个插件：serverless-dotenv-plugin 和 serverless-offline。第一个插件是支持 dotenv 文件，第二个是在本地计算机上运行无服务器框架。

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

认证

REST API 受 IAM 身份验证保护。它是 AWS 的内置功能，可以保护任何 AWS 资源，在我们的例子中是 API 网关和 AWS lambda。当用户未连接到 SaaS 应用程序时，它会拒绝 API 调用。因此，当它受到保护时，外部参与者将无法调用您的资源。

因为 API 部署到 AWS，所以我选择使用 AWS Cognito 进行身份验证。好消息是 Cognito 通过提供为 SaaS 实施身份验证所需的一切，节省了大量时间。您无需任何努力即可访问电子邮件身份验证和社交登录（Facebook、Google、Apple 和 Amazon）。

AWS Cognito 和 React 前端之间的连接是通过 AWS Amplify 完成的。 Amplify 提供 React 组件和代码，让您的前端集成到 AWS 更轻松、更快捷。

NoSQL 数据库

PostgreSQL 和 MySQL 等主要和知名的数据库不太适合无服务器架构。 由于无服务器的性质，它可以创建大量的数据库连接并耗尽数据库连接限制。

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

作为一个单独的全栈开发人员，我想要一些非常容易管理并且 100% 兼容无服务器的东西。 因此，我选择 DynamoDB 作为主数据库。

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

基础设施即代码

如您所见，我为我的 SaaS 应用程序使用了多种 AWS 服务。 在每个环境（开发、登台或生产）中手动设置云资源非常痛苦，并且很难保持它们之间的一致性。

AWS 允许开发人员访问 AWS CDK，您可以在其中使用 TypeScript 定义您的云资源。 在一个命令中，您可以部署到您的 AWS 账户并预置所有内容。

部署

像许多开发人员一样，我使用 Git 和 GitHub 对我的代码进行版本控制。 许多现代托管服务，如 Vercel 和 Netlify，Cloudflare 页面会在每次提交时自动构建和部署您的代码。 如果您使用 Git 分支，您还可以实时预览结果而无需推送到生产环境。

对于后端和基础架构，我使用名为 Seed.run 的第三方服务在每次提交时自动部署。 与前端一样，它也在 AWS 上构建和部署后端资源。

DNS 和 CDN

您可能会怀疑，我毫无意外地将 Cloudflare 用于 DNS 和 CDN ;) Cloudflare Pages 会自动将您的代码部署在 Cloudflare 网络中，我只需将我的域指向 Cloudflare DNS 服务器，其余的由他们处理。 使用 Cloudflare，您可以获得大量安全功能，例如为您的 SaaS 产品提供防火墙和 DDoS 保护。

错误跟踪

我使用 Sentry 作为错误跟踪解决方案。 当出现问题时，它会自动报告有用的信息，如堆栈跟踪、面包屑（问题之前发生的一系列事件）、浏览器信息、操作系统信息等。它通过丰富的数据使生产中的调试变得更加容易：

Sentry 只为前端设置，而不是为 REST API 设置，我一直使用本机解决方案。 事实上，使用 AWS lambda 的 Sentry 会产生大量开销，而且设置并不简单。 在下一节中，您将找到我在后端用于错误跟踪的解决方案。

记录、监控和警报

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

您还可以访问您的 lambda 指标。 非常适合了解您的无服务器函数的行为方式并检测是否有任何错误。

我还使用 Lumigo 为我的日志记录和监控提供更多信息。 与 Cloudwatch 相比，该界面更易于使用：

您还可以在 Lumigo 中启用跟踪，您可以在其中可视化您的 AWS 服务和外部 API 调用。 通过让您知道代码中是否存在错误或来自外部服务的错误，它使您的调试会话更容易。

付款和订阅

SaaS 的最后一部分，对企业来说最重要的是接受付款。 接受一次性付款很困难，但重复付款的任务非常复杂。 不幸的是，对于 SaaS 业务，我们需要处理第二种情况。

您的客户在首次订阅时需要选择计划并输入他们的个人信息。

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

他们有时还需要更新他们的个人信息。 而且，他们还需要在需要时访问他们的发票历史记录。

Stripe 可以管理我在本节中提到的所有内容，它隐藏了所有这些复杂性，并使与支付的集成更容易。

结论

我花了 5 个月的时间来构建这个全栈 React SaaS 模板。 我没有专注于我的业务，而是解决了这些技术细节。 构建您的 SaaS 的第一个版本应该只需要 1 个月而不是 5 个月。

通过这段漫长的旅程，我学到了很多东西，也犯了很多错误。 我希望其他开发人员不会犯同样的错误，所以我为 SaaS 产品构建了 Nextless JS，React Boilerplate。

使用 Nextless.js，您无需编写任何代码即可获得我在本文中提到的所有内容。 节省您的时间，专注于重要的事情并更快地启动您的 SaaS。 在 Nextless JS 中查找更多信息。

原文：https://medium.com/@ixartz/the-modern-tech-stack-to-build-a-saas-in-202…

本文：https://jiagoushi.pro/node/2027