每周都会发布一些新的工具和技术。例如,人工智能(AI)领域正在迅速增长。几乎每天都会发布新的工具或模型。JavaScript 生态系统也是如此,新的库和框架经常发布。
就好像你跟不上它的步伐一样。因此,我认为拥有一些可靠的技术栈是很重要的。一个可以用来构建你的 Web 应用程序的技术栈。
以下是我今天用来构建 Web 应用程序的经过验证的技术栈。
如果你对每个技术栈部分中的工具不熟悉,可以随意点击链接查看。
对于我的前端,我喜欢使用 React
。过去几年我一直在使用 React,我认为它是构建 Web 应用程序的绝佳工具。我喜欢将它与 Next.js 搭配使用,以便更容易地构建服务器端渲染的 React 应用程序。
我不喜欢有时 Next.js
可能有点主观,所以我不遵循他们的许多惯例。但我喜欢它如何使构建 React 应用程序变得更容易。我使用他们的应用程序路由器和图像组件。
我目前还没有使用他们的服务器操作,因为我认为它还很新,我还没有机会更多地尝试它以便推荐。说到做 API 集成,我的选择是使用 React Query
搭配 Axios
。它们配合使用效果很好,我喜欢 React Query
如何使缓存和数据管理变得更容易。
对于样式,我喜欢使用 Tailwind CSS
。它并不是最好的,但我喜欢使用它可以轻松设计。我不喜欢它有时可能有点啰嗦,但我认为这是易用性的一个很好的折衷。与 shadcn/ui
搭配使用是一个很好的方法,特别是如果你喜欢那些极简设计。
总之,我的前端技术栈是:
对于我的后端,我喜欢使用 Node.js
。和 React
一样,我过去几年一直在使用 Node.js
,我认为它是构建 Web 应用程序的绝佳工具。我喜欢将它与 Nest.js
搭配使用,以创建我在前端需要的端点。
我喜欢 Nest.js
的组织方式,以及它如何通过他们的装饰器更容易地构建 API。有时它可能会有一种你不知道它来自何处的代码魔法,或者你可能会遇到的循环依赖问题。但是,通过对它的工作原理有很好的理解,并阅读他们的文档,你可以克服这些问题。
由于每个 Web 应用程序都需要数据库,我喜欢使用 PostgreSQL
(Supabase
)与 TypeORM
。TypeORM
有很好的文档,它是我使用过的最可靠的 ORM 之一。它已经存在了相当长的时间,并且与 Nest.js
集成得很好。
总之,我的后端技术栈是:
- Node.js & Nest.js
- PostgreSQL (Supabase) & TypeORM
对于部署、托管,甚至设置 SSL,我喜欢使用 Coolify
。我最近发现它,并且它帮助我很多地设置我的 Web 应用程序。之前我喜欢使用 Vercel
或 GCP
与 Cloud Run
,但我远离这些无服务器解决方案,因为我认为拥有专用的预配服务器仍然更好。我在 Digital Ocean 购买 VPS 以满足我的托管需求。
幸运的是,Coolify
容易设置,有自托管选项,并且有很好的文档。我喜欢它如何使部署我的 Web 应用程序变得更容易,以及如何使设置 SSL 变得更容易。
我将它与 Cloudflare
搭配使用作为我的 DNS 和 CDN。我也从他们那里购买我的域名,因为我喜欢如何轻松地使用他们管理我的域名。
最后,我使用 Github
并将其与 Coolify
连接用于我的 CI/CD。然后将其连接到 Discord
以获取一些部署通知。
总之,我的部署技术栈是:
电子邮件是有时你认为不需要但实际上需要的东西之一。有很多服务可以用来发送电子邮件。我喜欢使用 Resend
。这是一个简单的服务,使发送电子邮件变得更容易。
Resend
用于发送电子邮件,然后使用 @react-emails
来构建电子邮件模板。以前我不知道如何构建可靠的电子邮件模板,但使用 @react-emails
,它使构建变得更容易。
Resend
也可以与 Supabase
搭配使用,如果你也喜欢使用他们的服务。
总之,我的电子邮件技术栈是:
如今每当我需要认证时,我通常使用 Supabase
。我通过在后端创建端点并调用他们的 API 来使用他们的认证服务。也可以选择使用他们的前端 SDK,但我喜欢在后端设置它。
由于我使用 Postgres
与 Supabase
,如果需要的话,我可以自己编写认证服务。使用这个技术栈,我有灵活性可以这样做。最重要的是,你的用户数据在你的范围内,而不是在某些第三方服务上。
总之,我的认证技术栈是:
对于图像存储,我喜欢使用 ImageKit
。我已经使用它相当长时间了,用于我的移动应用程序和 Web 应用程序的图像存储,效果很好。我喜欢它如何使存储图像变得更容易,以及如何使动态操作图像变得更容易。
对于一般存储,我还没有找到我首选的。我认为可以使用 Cloudflare R2
、AWS S3
,甚至 Supabase Storage
。但我还没有尝试过它们。我还没有需要文件或一般存储的 Web 应用程序。
总之,我的存储技术栈是:
- ImageKit(用于图像)
- Cloudflare R2、AWS S3 或 Supabase Storage(用于一般存储)
使用这个设置,我通常在 $20 到 $30 之间,因为这是我喜欢选择的 DigitalOcean VPS 的成本。我认为我们可以更便宜一点,但对于我的需求,我对这个选项很满意。我认为你也可以从 Hetzner 购买,这可能比 DigitalOcean 更便宜。
总的来说,其他一些服务也有慷慨的免费层次 - 所以如果你只是想试探一下,这些将会很有帮助!
这个技术栈已经被证明对我有用,并帮助我更快地构建 Web 应用程序。我认为拥有一个可靠的技术栈是很重要的。并不总是使用最新的工具或技术,而是使用适合工作的正确工具。
我也了解一些其他工具,但大多数时候这个技术栈已经足够我构建所需的 Web 应用程序。我也喜欢这些工具如何可以配合使用,以及它们如何很好地协同工作。
它并不完美,但对我来说已经足够快速执行我的想法并更快地构建 Web 应用程序。
希望这个技术栈也能帮助您更快地构建您的 Web 应用程序。或者更好的是,将这个技术栈作为您可以依赖的技术栈的起点。那将会更好!