[Vibe Coder #4] 部署到底是什麼？為什麼在我的電腦上能執行的 App，上網後卻不能執行？

App 完成了。在我的電腦上執行得非常完美。我為了向朋友炫耀，複製網址列中的 localhost:3000 傳給他，朋友卻回覆：「打不開耶？」我鼓起勇氣做了部署，這次卻變成原本在我的電腦上正常運作的 App，在網路上不斷噴出錯誤。

在 Vibe coding 中，最多人受挫的地方就是這裡：部署。本篇會說明部署究竟在做什麼，以及「本機能跑，部署後卻不能跑」這類問題最常見的三大原因。

localhost 的意思是「我的電腦」

localhost不是特殊的位址，而是指向**「這台電腦」**的代名詞。開發時 AI 說「請在 localhost:3000 確認」，意思是要你用自己電腦的瀏覽器，查看暫時執行在自己電腦上的 App。

所以你把localhost:3000傳給朋友時，朋友的瀏覽器會在朋友的電腦裡尋找 App。當然找不到，因為我的 App 根本還沒離開我的電腦。而且，只要關閉開發程式或闔上筆電，我電腦上的 App 也會立刻停止。要成為其他人可以使用的服務，需要兩樣東西：一台 24 小時開機的電腦，以及任何人都找得到的位址。

部署就是搬家

部署就是解決這兩個問題的工作。簡單說，部署就是把原本在我電腦上的 App 搬到伺服器。伺服器聽起來很厲害，但其實只是「24 小時開機並連上網路的別人的電腦」。

Vibe coding 常用的 Vercel、Netlify 等服務，會代辦這場搬家。它們會做三件事。

1. 租用伺服器：出租資料中心裡的電腦。
2. 建置（build）：將開發用程式碼轉換、壓縮成服務用版本，就像打包行李。
3. 發放位址：提供像내앱.vercel.app這樣全世界任何人都能連線的位址。

這裡的建置值得記住。開發模式很寬容，通常會忽略一些問題；但建置是嚴格的檢查員，會在部署前一次揪出開發時悄悄存在的問題。「本機能跑，部署卻失敗」的問題，有很大一部分就是卡在建置階段。

本機能跑、部署後卻不能跑的三大原因

部署成功後 App 卻運作異常，原因十之八九就是以下三者之一。

**第一名：沒有註冊環境變數。在第 2 篇中，我們把 API key 放進.env檔案，並用.gitignore讓 Git 不追蹤這個檔案。結果.env並沒有放進搬家行李。**App 抵達伺服器後沒有 key，因此 AI 呼叫和 DB 連線全部失敗。只要在部署服務儀表板的「Environment Variables」選單註冊.env的內容，再重新部署即可解決。這是本機能跑、部署後不能跑時最先該檢查的地方。

第二名：卡在建置檢查。這種情況是部署本身失敗，並出現紅色記錄。不必慌張，把部署服務顯示的建置記錄完整複製並貼給 AI：「它顯示這段記錄後建置失敗了，請修好。」

**第三名：DB 不認識新客人。**依 DB 服務而定，通常會有「允許哪些來源連線」的設定。之前只有我的電腦連線，現在則是伺服器連線，因此可能需要調整允許清單或連線位址設定。把症狀（記錄）交給 AI，也能快速縮小範圍。

網域：把位址換成自己的名字

部署完成後會產生像내앱.vercel.app這樣的位址。你可以直接使用，也可以綁定像myapp.com這樣的個人網域。網域要在網域註冊商處按年租用，而連線設定就是註冊電話簿（DNS），告訴系統「有人找這個名稱時，就引導到那台伺服器」。部署服務儀表板會提供操作步驟；註冊後，可能要幾分鐘到一天左右才會散佈到全世界的電話簿。剛連線完暫時打不開，也不用慌張。

部署後 3 分鐘檢查流程

按下部署按鈕並不代表結束。每次確認這三件事，就能事先抓住大多數問題。

1. 直接連線到已部署的位址，使用實際位址，而不是開發時的 localhost。
2. 把核心功能各按一次，優先測試註冊、儲存、AI 呼叫等牽涉後端與環境變數的功能。
3. 如果看起來不對，就開啟部署服務儀表板的**記錄（Logs）**選單，把紅色行複製給 AI。第 1 篇提到的「伺服器的哀號」，就會在這裡出現。

總結

• localhost的意思是「我的電腦」，所以傳給別人也打不開。
• 部署就是把 App 搬到 24 小時開機的伺服器，並取得公開位址；Vercel 等服務會代辦這件事。
• 本機與部署環境的三大差異：未註冊環境變數（第一名）、建置檢查失敗、DB 連線設定。只要記住.env不會放進搬家行李，就解決一半了。
• 網域連線是註冊電話簿（DNS），因此散佈可能需要一些時間。
• 部署後執行 3 分鐘流程：連線到實際位址 → 點擊核心功能 → 檢查記錄。

下一篇是錯誤訊息。內容會介紹如何不害怕紅色文字並讀懂它、如何正確把錯誤傳達給 AI，以及 AI 無法修好同一個 bug、一直原地打轉時，該如何脫身。