[Vibe 程式設計師 #1] 解剖 AI 打造的 App：前端、後端、DB 各自做什麼

用語言指示 AI 建立 App 的人越來越多。只要對 Cursor、Claude Code 或 v0 說「幫我做這種服務」，真的會得到能執行的 App。但完成後，大家常遇到同一個障礙：App 能跑，卻不知道 AI 到底做了什麼。發生錯誤時，不知道該看哪裡，也不知道該怎麼問 AI。

跨過這道障礙的第一步不是讀程式碼，而是了解 App 由哪些元件組成，以及每個元件在哪裡做什麼，也就是掌握結構地圖。開發者稱它們為前端、後端和 DB。本文以非開發者也能理解的方式完整拆解這三者。有了這張地圖，下一篇會談到的 API 金鑰、Git、部署與費用問題也能各就各位。

App 的結構就像餐廳

無論是 Web App 還是行動 App，多數面向使用者的服務都由三個部分組成。用餐廳來比喻最貼切。

**大廳（前端）**是客人入座的地方：菜單、桌子和裝潢，也就是客人直接看見、操作的一切。在 App 中，按鈕、輸入框和畫面切換等可見內容都屬於這裡。

**廚房（後端）**是客人看不見的地方。接到訂單後在這裡真正做菜，食譜與食材管理等營業機密也都在這裡。在 App 中，登入處理、付款和權限確認等重要工作都由它負責。

**倉庫（資料庫、DB）**是存放食材的地方。即使廚房失火歇業，倉庫裡的食材仍然存在。在 App 中，會員資料、文章和訂單紀錄等資料實際儲存在這裡。

客人（使用者）從菜單下單（前端）後，訂單送到廚房（後端），廚房從倉庫取出食材烹調（查詢 DB），再送到大廳。你每次重新整理 Instagram 時，都會發生這趟往返。

前端在使用者裝置上執行

前端最重要的特徵是「在哪裡執行」。前端程式碼不是在你的伺服器，而是在**使用者的瀏覽器（或手機）**上執行。連線到網站時，程式碼會傳到使用者裝置，再由裝置執行並繪製畫面。

這裡有個 Vibe 程式設計師一定要知道的結論：**任何人都能查看前端程式碼。**在瀏覽器按右鍵選擇「檢查」，就能直接看到目前網站的前端程式碼。Naver 或 Toss 也不例外，因為這是原本的設計，無法阻止。

所以前端不能放秘密。把 API 金鑰、管理員密碼或付款驗證邏輯放進前端，就等於公開給全世界。讓 AI 寫程式時，AI 可能為了方便把這些值放進前端；若不知情就部署，可能導致 API 金鑰遭竊用並產生鉅額費用。這部分會在第 2 篇詳談。

後端在我的伺服器上執行

後端則在我管理的伺服器上執行。使用者看不到後端程式碼，只能向後端送出「請求」並收到「回應」。就像餐廳客人不能進廚房，只能遞交訂單。

因此，重要工作都必須在後端完成。

• 秘密保管：API 金鑰、DB 連線資訊等秘密值只能放在後端。
• 權限確認：「這位使用者有資格刪除這篇文章嗎？」必須由後端檢查。在前端隱藏刪除按鈕只是裝飾，因為即使看不到按鈕，任何人仍可直接送出請求。
• 付款與計算：若在前端計算價格並相信結果，使用者就可能竄改請求，以 1 韓元付款。

總結來說，**前端是展示的地方，後端是決策的地方。**前端的檢查只是為了方便使用者，真正的安全性與判斷全都由後端負責。

DB 是資料真正存放的地方

如果你曾想過「刪除 App 再重新部署，會員資料怎麼還在？」，原因是資料住在 DB，而不是 App 裡。App（前端＋後端）是工作人員，DB 是保險箱。即使換掉所有工作人員，保險箱裡的內容仍然不變。

Vibe 程式設計常用的 Supabase 和 Firebase，就是代為管理這個 DB 的服務。因此會有以下區別。

• 無論怎麼修改程式碼並重新部署，資料都很安全。
• 相反地，只要重設 DB，即使程式碼正常，資料也會全部消失。

這就是「想復原某些東西」時，程式碼回滾與資料復原完全是兩回事的原因。程式碼用 Git 復原（第 3 篇會談），資料則從 DB 備份復原。復原其中一邊，不會連另一邊一起復原。

我的專案裡，哪裡是哪裡

了解概念後，套用到你的專案資料夾吧。開啟 AI 建立的專案時，雖然有很多資料夾，但名稱有規則，可以大致分辨。以 Vibe 程式設計最常見的 Next.js 專案為例：

• app/或pages/、components/→繪製畫面的前端。想修改按鈕文字，就看這裡。
• app/api/資料夾，或檔案開頭寫著"use server"的檔案→後端。雖然在同一專案中，這些程式碼是在伺服器執行。
• .env檔案→後端使用的秘密值儲存處。API 金鑰與 DB 連線資訊都放在這裡。
• DB 通常不在專案資料夾裡。它是另一個空間，必須登入 Supabase 或 Firebase 的網站（儀表板）才能看見。

要注意的是，Next.js 等新式工具會把前端與後端混在同一個專案資料夾中。資料夾只有一個，不代表所有程式都在同一處執行。有些檔案會傳到使用者瀏覽器，有些只留在伺服器。如果搞不清楚，就問 AI：「這個檔案是在使用者瀏覽器還是伺服器執行？」這個問題能決定秘密該放在哪裡。

有了這張地圖，會改變什麼

了解結構後，立刻會有三件事不同。

**第一，知道發生錯誤時該看哪裡。**畫面異常就看瀏覽器開發人員工具的主控台（前端的哀號）；無法儲存或登入就看伺服器記錄（後端的哀號）。問 AI 時，「瀏覽器主控台出現這個錯誤」和「伺服器記錄出現這個錯誤」是完全不同的線索，只要分清楚，診斷準確度就會大幅提升。

**第二，預防一半的資安事故。**秘密放後端，權限也由後端確認。只要遵守這個原則，就能避開許多 Vibe 程式設計造成的資安事故。

**第三，給 AI 的指示會更精準。**比起「按儲存按鈕就出錯」，「按下按鈕時後端 API 呼叫似乎失敗了，請檢查伺服器端程式碼」能更快解決問題。擁有地圖的人，問法就是不同。

總結

• App 是由大廳（前端）、廚房（後端）和倉庫（DB）組成的餐廳。
• 前端在使用者裝置執行，任何人都能查看程式碼，因此不能放秘密。
• 後端在我的伺服器執行，秘密保管、權限確認和付款等決策都在這裡完成。
• DB 是與 App 分開的空間，因此即使重寫程式碼，資料仍會保留；刪除 DB 後，即使程式碼正常，資料也會消失。
• 搞不清楚時，請問 AI：「這段程式碼是在瀏覽器還是伺服器執行？」

下一篇將介紹這個架構中最常出事故的 API 與 API 金鑰，整理為什麼必須隱藏金鑰、金鑰外洩會發生什麼，以及如何確認專案中的金鑰是否安全。