如何构建SaaS产品的完美技术栈?
By Simon Høiberg · 2022-01-31
在这篇博客中,我将分享如何构建SaaS产品的完美技术栈,以及其中各个组件的作用和设置方法。
构建完美的SaaS产品技术栈
- 这个视频中,我将提出构建SaaS产品的完美技术栈,以及其中各个组件的作用和设置方法。
- 我们的技术栈完全无服务器,使用托管的云基础设施和云函数处理客户端请求。
- 在后端,我们将使用DynamoDB作为托管的数据库,它的特点是无需预先定义整个架构,可以随时扩展表结构。
构建完美的SaaS产品技术栈
构建全栈应用
- 为了获取和提供数据,我们需要一个API。我非常喜欢GraphQL,所以我们将使用一个叫做AppSync的服务,它是一个受控的GraphQL层。
- 为了安全地登录我们的应用程序,我们将使用Cognito。处理用户身份验证非常复杂,我不建议自行尝试设置,Cognito可以为我们管理一切,并且与AppSync兼容。
- 在前端,我们将使用React构建界面,具体来说,我们会使用Next.js。同时我们还将使用UI库Chakra UI。
- 用Amplify来连接前后端。Amplify还带有一些方便的实用工具,可以请求我们的GraphQL API中的数据,尽管我更喜欢使用Apollo Client来执行GraphQL查询。
- 最后,我们将使用Pulumi在云端设置基础架构,以及使用GitHub Actions进行持续部署。整个栈都将使用TypeScript进行开发,而且采用按使用量付费的完全成本模型,所以成本是可以忽略不计的。
- 当然,你也可以获取1000美元的免费AWS信用额度,从根本上来说,这个过程是免费的。
构建全栈应用
使用Pulumi创建AWS服务器和应用程序
- 首先,确保已经拥有AWS账户并在本地机器上配置了AWS CLI。
- 在Pulumi网站上注册账号并创建一个新的AWS和TypeScript项目,并选择所需的区域。
- 通过Pulumi设置DynamoDB表来存储用户信息,并导出表格ID。
- 建立AppSync资源以及GraphQL模式,创建Lambda函数来解析GraphQL查询。
- 设置Lambda函数的处理程序,包括实际的解析逻辑。
- Pulumi工具非常方便且高效,让AWS资源的部署变得更加顺畅。
使用Pulumi创建AWS服务器和应用程序
搭建Cognito身份池和用户池
- 搭建Cognito身份池和用户池是处理用户认证的关键环节,包括身份池、用户池和用户池客户端。
- 在配置用户池时,需要设置用户可恢复其账户的密码要求等配置,而在配置用户池客户端时,也需要进行类似的设置。
- 同时还需要设置身份池,并配置其使用已定义的用户池客户端。
- 此外,需要为经过身份验证的用户设置角色和权限,用于告知AWS允许经过身份验证的用户访问哪些资源。
- 最后,将用户池ID、用户池客户端ID和身份池ID导出,定义整个后端架构,并运行命令以在云中设置所有资源。
- 搭建完成后,得到一个输出,根据该输出可以在前端搭建相应的链接。
搭建Cognito身份池和用户池
使用Chakra UI构建身份验证页面
- 在使用Chakra UI构建身份认证页面时,可以通过邮箱收到的确认码进行验证。
- ChakraTemplates.dev上有基于Chakra UI的现成模板,可以在身份验证的表单下找到这些模板。
- 使用Amplify的off模块进行身份验证非常简单,无需处理复杂的登录流程,Amplify Incognito会处理一切。
- 最后,需要设置Apollo Client与Amplify进行连接,以便进行graphql查询。
- 作者在分享的代码库中提供了帮 助函数,可以轻松构建应用程序。
使用Chakra UI构建身份验证页面
Conclusion:
通过使用这个完美的技术栈,您可以轻松地构建SaaS产品,享受高效的开发和成本优势。同时,了解如何利用Pulumi、AWS和其他工具来构建和部署您的应用程序。