新手教學 · Vercel 部署 SOP · 最後更新：2026-05-15

我以為再補一段就好，結果改了 3 小時：「重寫比修補快」的啟示

稍微熟悉 AI 寫程式之後，我又靈機一動，想幫賣童裝的老婆做一個用手機就能管庫存和營收的小網頁。原本以為功能不複雜，加幾個欄位、幾個查詢按鈕應該就好。一開始真的很順，做完之後在自己電腦上跑得很 OK。

結果當我想加一個「搜尋庫存」功能時，撞到我做網站以來最玄的卡點：自己電腦看得到、網路上的正式網站卻完全沒變化。卡了 3 小時才解掉，一半時間在補消失的東西、一半時間在懷疑人生。

這篇把那 3 小時的痛重整成 step-by-step 教學。讀完你會做出：1) 一個手機可用的庫存管理小頁；2) 一份部署前 5 步 checklist，避免下次卡 3 小時；3) 一個「什麼時候該重寫、什麼時候該修補」的決策框架。30-60 分鐘可全跑完。

為什麼自己電腦看得到、Vercel 上完全沒變化？（3 層同步診斷）

因為「自己電腦」「GitHub」「Vercel」是三個獨立的地方，不是同一個檔案。新手最容易把這 3 層混成一個，但它們各跑各的：自己電腦有不代表 GitHub 有、GitHub 有也不代表 Vercel 已經跟上。任何一層斷掉，正式網站就停在舊版。

我自己卡 3 小時就是這個原因。搜尋庫存功能在自己電腦點下去會跳出結果，但 Vercel 的網址打開像沒事人一樣完全沒變化。一直在補消失的東西、一直在重傳，但問題不在 code 本身，問題在「3 層中有一層沒接好」。

卡住的時候第一件事不是叫 AI 修，是退一步問：是哪一層沒同步？下面 5 個檢查問題照順序問，定位 90% 的部署問題：

• 我自己電腦上的版本是最新的嗎？（編輯器右上角有沒有「未存檔」小圓點）
• 檔案有沒有真的存好？（按 Ctrl+S 確定一次）
• 有沒有 push 到 GitHub？（github.com 打開 repo 看最新 commit 時間是不是剛剛）
• Vercel 有沒有重新部署？（vercel.com 打開專案看 Deployments 頁籤最新一筆狀態）
• 我打開的網址是真的正式網站嗎？（不是 localhost、不是 preview，是 .vercel.app 或自訂網域）

5 個問題照順序問，找到第一個「不確定」或「沒有」的層，就是問題所在。

Vercel 部署不更新最常見的 3 個原因？（從最常見排到最少）

下面 3 個原因覆蓋我自己跟身邊新手 95% 的部署不更新案例。從最常見開始排：

原因 1：Code 沒 push 到 GitHub。改完檔案以為 Vercel 會魔法偵測，但 Vercel 只看 GitHub repo，沒 push 等於沒事。檢查：在 Claude Code 跟 AI 確認「剛剛改的東西有 push 到 GitHub 嗎」，沒有就叫它 push。或自己上 github.com 打開 repo 看 commit 時間是不是剛剛。

原因 2：瀏覽器快取騙人。Code 跟 Vercel 都對了，但你打開的瀏覽器拿舊版顯示。檢查：用無痕視窗（Chrome 是 Ctrl+Shift+N，Safari 是 Cmd+Shift+N）打開正式網址，這個不會吃舊快取。看到新版就是被快取騙。

原因 3：Vercel 部署失敗，但你不知道。Vercel 偵測到新 commit 會自動跑 build，build 失敗的時候不會發信通知（除非設定）。檢查：vercel.com 打開專案 → Deployments 頁籤 → 看最新一筆是 Ready（綠燈）還是 Failed（紅燈）。Failed 的話點進去看 Build Log 哪一行紅字。

怎麼建立部署前 5 步 checklist？（避免下次卡 3 小時的 SOP）

我自己卡完那 3 小時之後，整理出下面 5 步 checklist。每次想 push 上線前先跑一遍，每層確認過再 push，不會再有「咦 怎麼沒更新」的時刻：

1. Step 1 — 自己電腦能不能跑？在自己電腦打開測試畫面點按鈕，看新功能會不會出現。沒出現就先在自己電腦修好，不要急著 push。
2. Step 2 — 檔案有沒有存好？看編輯器右上角有沒有「未存檔」的小圓點。有就按 Ctrl+S 存一次。Claude Code 改檔案會自動存，但你手動加註解可能漏存。
3. Step 3 — 有沒有送上 GitHub？打開 github.com 你的 repo 看 Commits 那欄最新一筆時間是不是剛剛。不是就回 Claude Code 跟 AI 講「push 到 GitHub」。
4. Step 4 — Vercel 有沒有重新部署成功？打開 vercel.com 專案 → Deployments → 最新一筆要是 Ready 綠燈。看到紅燈 Failed 就點進去看 Build Log。
5. Step 5 — 用無痕視窗打開正式網址確認。避免被瀏覽器舊快取騙。看到新版才算真的部署成功。

5 步跑下來大概 1 分鐘。比起卡 3 小時，這 1 分鐘超划算。

什麼時候該重寫、什麼時候該修補？（重寫比修補快的判斷框架）

卡到後面我發現一件反直覺的事：「重寫一份乾淨的版本」比「繼續修補」還快。但這件事有適用條件，不是每次卡住都該重寫。下面是我自己用的判斷框架：

該重寫的訊號：

• 同一個 bug 修 3 次以上還會跑出來
• 改 A 功能會壞 B 功能、改 B 功能會壞 C 功能（牽一髮動全身）
• AI 自己也說「這個狀況有點詭異」「我也找不到原因」
• 前面被反覆修改超過 5 次，整個專案結構已經看不懂
• 你自己看 code 都不知道哪段在做什麼了

該修補的訊號：

• 錯誤訊息明確指到某一行、某個檔案
• 這是新加的功能第一次跑壞，沒影響其他部分
• Claude Code 一句話就能定位問題
• 整體結構還清楚，只是某個小功能沒接好

重寫指令範本：「請把目前這個專案的所有功能整理成清單，然後乾淨地重寫一份。功能清單包含：[列出你要的功能]。重寫的時候不要參考舊版有 bug 的部分，從零開始。」這樣 AI 不會把舊版的雷複製到新版。

手機可用的庫存管理頁怎麼從 0 做到 100？（5 步 step-by-step）

下面用「童裝庫存管理頁」當範例做完整 step-by-step。讀完你能做出一個手機可用的小管理頁，能新增商品、看庫存、搜尋、整理營收。範例是童裝，但任何「小型品項管理」需求都套得上：餐廳菜單、咖啡店耗材、媽媽手作物料、二手交易帳本。

1. Step 1 — 跟 AI 講清楚需求。在 Claude Code 輸入：「我想做一個手機可用的庫存管理小頁。功能：1) 新增商品（名稱、進貨價、售價、庫存數量）；2) 列出所有商品；3) 搜尋商品名稱；4) 看當月營收（自動加總）。資料用 LocalStorage 存就好，不需要資料庫。請建 index.html + app.js + style.css，用 Tailwind CSS。不要規劃，直接建檔。」
2. Step 2 — 在自己電腦看效果。資料夾裡的 index.html 直接雙擊用瀏覽器打開，新增 2-3 個商品測功能。手機 RWD 用瀏覽器開發者工具切手機尺寸（Chrome 是 F12 → Toggle device toolbar）。看不順叫 AI 修「在 768px 以下要 ___」這種具體指令。
3. Step 3 — 加搜尋功能。一句指令：「在現有 index.html 加一個搜尋框，輸入關鍵字即時過濾商品列表（不用按 Enter）。不要動其他功能。」這個 step 是我自己第一次撞到 Vercel 不更新雷的點，記得跑完之後用第 3 節 5 步 checklist 確認。
4. Step 4 — 部署到 Vercel。把資料夾 push 到 GitHub → Vercel 連 repo → Deploy。詳細看「第一次用 AI 做網站」那篇第 6 節。1-2 分鐘給你一個 .vercel.app 網址。
5. Step 5 — 加到手機桌面。用手機 Safari 或 Chrome 打開 .vercel.app 網址 → 分享 → 加到主畫面。圖示出現在桌面，點下去全螢幕打開像 App。老婆從此用手機看庫存不用打網址。

跑完 5 步，你做出一個給家人或自己每天用的小管理頁。30-60 分鐘可全跑完。重點不是技術多難，是知道哪一步該怎麼下指令。

不想自己 debug 卡關怎麼辦？

上面的部署 SOP + 重寫框架自己跑得起來，但前提是有耐心 debug + 看完整篇文章。如果符合下面任一條，可能不適合自己跑：

• 卡 30 分鐘以上會放棄、不想繼續查
• 想要一個專屬於你領域的小工具（不是公版庫存管理）
• 需要連真實資料庫（Supabase / Firebase）而不是 LocalStorage

可以直接找 不想自己研究我教你（規劃中）。1-on-1 帶你從需求釐清、Claude Code 安裝、第一個專案上線、Vercel 部署 SOP 整套跑完。Pro：不用自己 debug、不用看長文、有人帶卡關 5 分鐘解決。Con：要付費。適合：沒時間自己研究、卡關會放棄、想要一次到位的人。

看完這篇之前先確認:

← 回新手教學