[Vibe coder #1] 解剖 AI 生成的应用：前端、后端和 DB 各做什么

用语言指挥 AI 开发应用的人越来越多了。对 Cursor、Claude Code 或 v0 这类工具说“帮我做这样的服务”，就能得到一个能运行的应用。但之后会遇到一个共同的问题：不知道 AI 究竟构建了什么。出错时，不知道该看哪里，也不知道该怎么问 AI。

跨过这道障碍的第一步不是会读代码，而是知道应用由哪些部件组成、每个部件在哪里做什么，也就是拥有一张结构地图。开发者所说的就是前端、后端和 DB 这三个部件。本文将站在非开发者的角度，彻底讲清楚它们。有了这张地图，后续文章中的 API key、Git、部署和费用问题才能各就各位。

应用的结构就像一家餐厅

无论是 Web 应用还是移动应用，面向用户的服务大多由三部分组成。用餐厅来类比非常准确。

**大厅（前端）**是顾客就坐的地方：菜单、桌子和装修。顾客直接看到和触摸的一切都在这里。应用中的按钮、输入框和页面切换等可见元素也属于这里。

**厨房（后端）**是顾客看不到的地方。订单进来后，真正做菜就在这里，配方和食材管理等商业机密也都在这里。应用中的登录处理、支付和权限校验等重要工作由它完成。

**仓库（数据库，DB）**是存放食材的地方。即使厨房着火关门，仓库里的食材仍然存在。应用中的用户信息、帖子和订单记录等数据，实际上都存储在这里。

顾客（用户）从菜单下单（前端）后，订单被送到厨房（后端），厨房从仓库取出食材烹饪（查询 DB），再送到大厅。每次你刷新 Instagram，都会发生这样的往返。

前端运行在用户设备上

前端最重要的特征是“在哪里运行”。前端代码运行在**用户的浏览器（或手机）**中，而不是你的服务器上。访问网站时，代码会传到用户设备，由设备执行并绘制页面。

这里有一个 Vibe coder 必须知道的结论：**任何人都能打开并查看前端代码。**在浏览器中点击鼠标右键并选择“检查”，就能看到当前网站的前端代码。Naver 和 Toss 也不例外。它本来就是这样设计的，无法阻止。

因此，前端不能放秘密。把 API key、管理员密码或支付校验逻辑放进前端，就等于公开给全世界。让 AI 写代码时，AI 确实可能为了方便把这些值放进前端。不知情地部署后，API key 可能被盗用，导致巨额账单。第 2 篇会详细讨论这个问题。

后端运行在我的服务器上

后端则运行在我管理的服务器上。用户看不到后端代码，只能向后端发送“请求”并接收“响应”。这就像餐厅顾客不能进入厨房，只能递交订单。

所以，所有重要工作都必须在后端完成。

• 保存秘密：API key、DB 连接信息等秘密值只能放在后端。
• 检查权限：“这个用户有资格删除这篇文章吗？”必须在后端检查。在前端隐藏删除按钮只是装饰。即使看不到按钮，任何人都能发送请求。
• 支付和计算：如果在前端计算价格并相信结果，用户就能篡改请求，以 1 韩元完成支付。

总结如下：**前端负责展示，后端负责决策。**前端的检查只是为了方便用户提示，真正的安全和判断全部属于后端。

DB 是数据真正存放的地方

如果你经历过“删掉应用再重新部署，用户信息却还在”，那是因为数据住在 DB 里，而不是应用里。应用（前端 + 后端）是工作人员，DB 是保险柜。即使把工作人员全部更换，保险柜里的东西仍然不变。

Vibe coding 中常用的 Supabase 和 Firebase，就是替你运营这个 DB 的服务。因此会有这样的区别：

• 无论怎么修改代码并重新部署 → 数据都是安全的。
• 反过来，如果重置 DB → 即使代码完好，数据也会全部消失。

这就是在“想撤销某件事”时，代码回滚和数据恢复完全是两回事的原因。代码用 Git 回滚（第 3 篇会讲），数据用 DB 备份恢复。回滚一边不会连带另一边。

我的项目中哪里对应哪里

了解概念后，把它们对应到项目文件夹中。打开 AI 创建的项目，会看到很多文件夹，但从名称可以大致区分。以 Vibe coding 中最常见的 Next.js 项目为例：

• app/或pages/、components/ → 是绘制页面的前端。想修改按钮文字，就看这里。
• app/api/文件夹，或文件顶部写着"use server"的文件 → 是后端。它们在同一个项目中，但运行在服务器上。
• .env文件 → 是后端使用的秘密值存放处。API key 和 DB 连接信息都会放在这里。
• DB 通常不在项目文件夹中。它是独立的空间，需要登录 Supabase 或 Firebase 的网站（控制台）才能看到。

需要注意一点：Next.js 这类现代工具会把前端和后端混在同一个项目文件夹中。文件夹只有一个，并不代表所有代码都在同一个地方运行。有些文件会传到用户浏览器，有些文件只留在服务器上。如果分不清，可以这样问 AI：“这个文件是在用户浏览器中运行，还是在服务器上运行？”这个问题决定了秘密值应该放在哪里。

拥有这张地图后会发生什么变化

了解结构后，马上会有三点不同。

**第一，出错时你知道该看哪里。**页面异常时，看浏览器开发者工具的控制台（前端的尖叫）；保存或登录失败时，看服务器日志（后端的尖叫）。向 AI 提问时，“浏览器控制台出现了这个错误”和“服务器日志出现了这个错误”是完全不同的线索。只要区分这一点，就能大幅提高 AI 的诊断准确率。

**第二，能预防一半的安全事故。**秘密值放在后端，权限检查在后端进行。只要遵守这条原则，就能避开相当一部分 Vibe coding 引发的安全事故。

**第三，你给 AI 的指令会更准确。**与其说“点击保存按钮就报错”，不如说“点击按钮后，后端 API 调用似乎失败了，请检查服务器端代码”，这样能更快解决问题。拥有地图的人，提的问题不一样。

总结

• 应用是由大厅（前端）、厨房（后端）和仓库（DB）组成的餐厅。
• 前端运行在用户设备上，任何人都能看到代码，因此不能放秘密。
• 后端运行在我的服务器上，秘密保存、权限检查和支付等决策都在这里完成。
• DB 是独立于应用的空间：即使彻底更换代码，数据仍会保留；删除 DB 后，即使代码完好，数据也会消失。
• 如果感到困惑，就问 AI：“这段代码是在浏览器中运行，还是在服务器上运行？”

下一篇将讨论这套结构中最容易出事故的主题：API 和 API key。我们会总结为什么大家都说要隐藏 key、key 暴露后实际会发生什么，以及如何确认项目中的 key 是否安全。