我的技术栈用于今天构建Web应用

照片由 Dawit 在 Unsplash 提供

每周都会有一些新的工具和技术被发布。例如，人工智能（AI）领域正在迅速发展。几乎每天都会有一个新的工具或模型被发布。同样的情况也发生在 JavaScript 生态系统中，新的库和框架经常被发布。

感觉你都跟不上它的节奏了。所以我认为拥有一个可以依赖的稳定技术栈是很重要的。一个你可以用来今天就搭建你 web 应用的技术栈。

这里是我用来构建今日网页应用的经过验证的技术栈。

随意点击每个栈部分中的工具——如果你还不熟悉这些工具，我已经添加了链接。

对于我的前端，我喜欢使用 React。我已经使用 React 几年了，我认为它是一个很好的工具来构建 web 应用程序。我希望将其与 Next.js 结合使用，以便更容易地构建服务器端渲染的 React 应用程序。

我不太喜欢有时候 Next.js 有点固执己见，所以我并没有遵循他们的很多约定。但我确实喜欢它让构建 React 应用变得更简单。我使用他们的应用路由器和 Image 组件。

我目前还没有使用他们的服务器动作，因为我觉得这个功能还比较新，我还没有机会尝试更多来推荐它。不过话说回来，我选择使用 React Query 结合 Axios 来做 API 集成。它们配合得很好，而且我喜欢 React Query 让缓存和管理数据变得更简单。

对于样式，我喜欢使用 Tailwind CSS。它不是最好的，但我喜欢用它来设计时的简便性。我不太喜欢它有时会显得冗长，但我觉得这种简便性与冗长之间的权衡是值得的。与 shadcn/ui 结合使用可以使构建组件变得更加容易，特别是如果你喜欢极简主义设计的话。

总之，我的前端技术栈是：

- React & Next.js
- React Query & Axios
- Tailwind CSS & shadcn/ui

对于我的后端，我喜欢使用 Node.js。和使用 React 一样，我已经使用 Node.js 许多年了，我认为它是一个构建 web 应用程序的绝佳工具。我希望与 Nest.js 结合使用，以创建前端所需的端点。

我喜欢 Nest.js 的组织结构，以及它如何通过其装饰器使构建 API 更加容易。有时候它会有一些你不知道来源的代码魔法，或者你可能会遇到循环依赖问题。但是，只要你理解它的工作原理，并阅读他们的文档，就可以解决这些问题。

由于每个网页应用都需要一个数据库，我喜欢使用 PostgreSQL (Supabase) 和 TypeORM。TypeORM 的文档非常出色，而且它是迄今为止我使用过的最可靠的 ORM 之一。它已经存在了一段时间，并且与 Nest.js 的集成非常出色。

总之，我的后端技术栈是：

- Node.js & Nest.js
- PostgreSQL (Supabase) & TypeORM

对于部署、托管，甚至设置 SSL，我喜欢使用 Coolify。我最近发现了它，它在设置我的 web 应用程序方面帮助了我很多。之前我喜欢使用 Vercel 或者 GCP 的 Cloud Run，但我一直避免使用这些无服务器解决方案，因为我认为还是拥有专用的服务器更好。我从 DigitalOcean 购买 VPS 来满足我的托管需求。

幸运的是，Coolify 很容易设置，提供了自托管选项，并且文档非常详尽。我喜欢它让部署我的 web 应用变得更简单，以及它让设置 SSL 更加容易。

我将它与 Cloudflare 一起使用，用于我的 DNS 和 CDN。我也从他们那里购买了我的域名，因为我喜欢用他们管理域名的简便性。

最后，我使用 Github 并将其与 Coolify 连接以实现 CI/CD。然后将其连接到 Discord 以接收一些部署通知。

总之，我的部署栈是：

- Coolify (DigitalOcean)
- Cloudflare
- Github

电子邮件是那种有时候你觉得不需要但实际上却很有用的东西。有很多服务可以用来发送电子邮件。我喜欢使用 Resend，它是一个简单易用的服务，可以让你更轻松地发送电子邮件。

Resend 用于发送电子邮件，然后使用 [@react](http://twitter.com/react)-emails 构建电子邮件模板。之前我不知道如何构建可靠的电子邮件模板，但使用 [@react](http://twitter.com/react)-emails，构建它们变得更加容易。

Resend 也可以与 Supabase 配合使用，如果你也喜欢使用他们的服务。

总之，我的邮件栈是：

- Resend
- @react-emails

最近每当需要认证功能时，我通常会使用 Supabase。我在后端通过创建一个端点并调用他们的API来使用他们的认证服务。也可以使用他们的前端SDK，但我更喜欢在后端进行设置。

因为我使用了 Postgres 和 Supabase，如果需要的话，我可以自己搭建一个认证服务。这个技术栈给了我这样的灵活性。最重要的是，用户的数据显示在你的掌控范围内，而不是在第三方服务上。

总之，我的认证栈是：

- Supabase

对于图像存储，我喜欢使用 ImageKit。我已经用它有一段时间了，无论是移动端还是网页应用的图像存储，它都表现得非常好。我喜欢它让图像存储变得更简单，也喜欢它让图像在运行时的处理变得更方便。

对于通用存储，我还没有找到我常用的解决方案。我觉得我可以使用 Cloudflare R2、AWS S3 或甚至 Supabase Storage。但我还没有机会尝试它们。目前我还没有需要文件或通用存储的网页应用。

总之，我的存储栈是：

- ImageKit （用于图片）
- Cloudflare R2, AWS S3, 或 Supabase Storage （用于通用存储）

有了这样的配置，我通常花费大约20到30美元，因为这是我喜欢在DigitalOcean上选择的VPS的成本。我认为我们可以更便宜一些，但我对这个选项很满意。我认为你也可以从Hetzner购买，那里的价格可能比DigitalOcean更便宜。

总的来说，许多其他服务也提供了慷慨的免费层——所以如果你想测试一些功能，这些服务会很有帮助！

构建可靠的 web 堆栈不仅需要正确的工具，还需要可靠的硬件来确保流程顺畅。拥有能够驱动这一切的机器可以起到关键作用。

某些产品可能无法在您的地区提供

那就是 Gigatech Gadgets 上场的时候了。无论你是想要一台新笔记本电脑、台式机还是服务器，他们都有适合你的硬件。

来看看他们的网站 Gigatech Gadgets，看看他们有什么产品吧！

这套技术栈已经被证明对我有效，并且帮助我更快地构建了 web 应用程序。我认为拥有一个可靠的、可以依赖的技术栈很重要。技术栈的选择并不总是关于使用最新的工具或技术，而是关于使用适合工作的正确工具。

我也知道一些其他的工具，但大多数时候这个技术栈已经足够用来构建我需要的 web 应用。我也喜欢这些工具可以很好地搭配使用，并且它们配合得非常好。

它并不完美，但对我来说，它已经能够帮助我更快地执行我的想法并构建 web 应用程序了。

我希望这个技术栈也能帮助你更快地构建 web 应用。或者更好一点，将这个技术栈作为你技术栈的起点并依赖它。那样会更好！

像往常一样，如果你有任何问题或建议，欢迎在下方留言。我很想听听你的意见。

感谢阅读。希望这能帮助你在旅程中前行！ ❤️

感谢你成为在 Plain English 社区的一员！在你离开之前:

• 确保 点赞 并 关注 作者 👏
• 关注我们：X | LinkedIn | YouTube | Discord | Newsletter
• 访问我们的其他平台：CoFeed | Differ
• 更多内容请访问 PlainEnglish.io