首页
开发技巧正文内容

构建 Web 应用程序的技术栈

2024年07月30日
阅读时长 2 分钟
阅读量 14
构建 Web 应用程序的技术栈

每周都会发布一些新的工具和技术。例如,人工智能(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 应用程序都需要数据库,我喜欢使用 PostgreSQLSupabase)与 TypeORMTypeORM 有很好的文档,它是我使用过的最可靠的 ORM 之一。它已经存在了相当长的时间,并且与 Nest.js 集成得很好。

总之,我的后端技术栈是:

🏗 ️ 基础设施/部署

对于部署、托管,甚至设置 SSL,我喜欢使用 Coolify。我最近发现它,并且它帮助我很多地设置我的 Web 应用程序。之前我喜欢使用 VercelGCPCloud 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,但我喜欢在后端设置它。

由于我使用 PostgresSupabase,如果需要的话,我可以自己编写认证服务。使用这个技术栈,我有灵活性可以这样做。最重要的是,你的用户数据在你的范围内,而不是在某些第三方服务上。

总之,我的认证技术栈是:

📦 存储

对于图像存储,我喜欢使用 ImageKit。我已经使用它相当长时间了,用于我的移动应用程序和 Web 应用程序的图像存储,效果很好。我喜欢它如何使存储图像变得更容易,以及如何使动态操作图像变得更容易。

对于一般存储,我还没有找到我首选的。我认为可以使用 Cloudflare R2AWS S3,甚至 Supabase Storage。但我还没有尝试过它们。我还没有需要文件或一般存储的 Web 应用程序。

总之,我的存储技术栈是:

💰 成本

使用这个设置,我通常在 $20 到 $30 之间,因为这是我喜欢选择的 DigitalOcean VPS 的成本。我认为我们可以更便宜一点,但对于我的需求,我对这个选项很满意。我认为你也可以从 Hetzner 购买,这可能比 DigitalOcean 更便宜。

总的来说,其他一些服务也有慷慨的免费层次 - 所以如果你只是想试探一下,这些将会很有帮助!

🚀 结论

这个技术栈已经被证明对我有用,并帮助我更快地构建 Web 应用程序。我认为拥有一个可靠的技术栈是很重要的。并不总是使用最新的工具或技术,而是使用适合工作的正确工具。

我也了解一些其他工具,但大多数时候这个技术栈已经足够我构建所需的 Web 应用程序。我也喜欢这些工具如何可以配合使用,以及它们如何很好地协同工作。

它并不完美,但对我来说已经足够快速执行我的想法并更快地构建 Web 应用程序。

希望这个技术栈也能帮助您更快地构建您的 Web 应用程序。或者更好的是,将这个技术栈作为您可以依赖的技术栈的起点。那将会更好!

免责声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

相关文章

探索多种软件架构模式及其实用应用
2024年11月22日19:06
本文深入探讨了多种软件架构模式,包括有界上下文、边车模式、发布-订阅模式、应用网关、微服务、命令职责分离(CQRS)等,介绍了它们的优点、使用场景以及具体应用实例。文章强调根据具体项目需求和团队能力选择最合适的架构,以构建高效和可维护的解决方案,同时展示了各架构模式间的综合应用,提供了丰富的案例和技术细节。
15个高级Python快捷键助您更快编程
2024年11月21日07:02
本文分享了 15 个高级的 Python 编程快捷键,包括上下文管理器、行内字典合并、函数参数解包、链式比较、dataclasses、海象运算符、反转列表、备忘录缓存、splitlines、enumerate、字典推导、zip 用于并行迭代、itertools.chain 扁平化列表、functools.partial 部分函数和 os.path 文件路径管理等,帮助开发者提高编程效率和代码简洁性。
揭示网页开发的 11 个迷思:停止相信这些误区
2024年11月19日22:05
网页开发充满误解,这篇博文针对11个常见迷思进行揭秘。包括网站开发后不需更新、需掌握所有技术、AI会取代开发者等。强调持续学习、专业化、用户体验的重要性,澄清误区如多任务处理的必要性和最新技术的必需性。文章提醒开发者注重实用而非追求完美代码,以务实态度面对开发工作。
你知道 CSS 的四种 Focus 样式吗?
2024年11月18日21:41
本文介绍了四种 CSS focus 样式::focus、:focus-visible、:focus-within 以及自定义的 :focus-visible-within,帮助提升网站用户体验。:focus 样式应用于被选中元素;:focus-visible 仅在键盘导航时显示;:focus-within 用于父元素;自定义 :focus-visible-within 结合两者效果。合理运用这些样式能使网站更方便键盘用户导航。
利用 Python 实现自动化图像裁剪:简单高效的工作流程
2024年11月11日20:49
使用 Python 和 OpenCV 自动裁剪图像,轻松实现 16:9 的完美构图。这个指南介绍了如何通过代码进行灰度化、模糊处理和边缘检测,最终识别出最重要的部分进行裁剪。特别适合需要批量处理图像的情况,节省大量时间。
每位资深前端开发人员都应了解的 TypeScript 高级概念
2024年11月11日02:07
资深前端开发者应了解 TypeScript 的高级概念,如联合类型、交叉类型、类型保护、条件类型、映射类型、模板字面量类型和递归类型。这些特性可提升代码的可维护性和可扩展性,确保在开发复杂应用时实现更高的类型安全性和效率。