傳統架站的噩夢 vs. 現代的 Vercel

以前如果我們寫好了一個網站，興沖沖地想要把它放到網路上讓朋友或客戶看，我們需要經歷一場名為「買主機」的技術災難。過程大概是這樣的：

  1. 租用主機：去 AWS 或 GCP 等大廠租一台 Linux 虛擬主機，每個月可能要繳幾十元美金，不管有沒有人看都要繳。
  2. 安裝環境：用黑漆漆的終端機連進去，學會 Linux 系統操作，手動安裝 Nginx、Node.js、PM2 等一堆後端環境。
  3. 上傳檔案與設定：把電腦裡的程式碼傳上去，然後小心翼翼地設定防火牆與網域 (Domain) 指向。

如果中途遇到任何一行報錯，對於不懂後端工程的人來說，簡直是直接宣告放棄。 但現在，我們迎來了前端開發者的救星，也是近代 Web 開發界最偉大的發明之一：Vercel。

什麼是 Vercel？無伺服器 (Serverless) 的奇蹟

Vercel 是一間提供「無伺服器 (Serverless) 部署」的超強雲端平台，它同時也是目前世界上最流行的 React 框架「Next.js」背後的母公司。

它的強大之處在於：它能夠直接跟你的 GitHub 帳號無縫連線。

只要你的程式碼存在上一章教的 GitHub 保險箱裡，Vercel 就能自動幫你把程式碼拉出來、自動幫你偵測是哪種框架、自動幫你安裝套件、自動幫你打包。最後，自動分配一個免費且帶有 HTTPS 綠色安全鎖頭的網址給你！

整個過程，你不需要碰到任何一台伺服器，你只需要點擊滑鼠三個按鈕。

Vercel 一鍵部署實戰教學

讓我們將上一章建立的 GitHub 專案，真正變成全世界都能連上的網站：

步驟 1：登入 Vercel 平台

  1. 前往 Vercel 官網 (vercel.com)。
  2. 點擊右上角的 Sign Up（註冊），這裡強烈建議選擇 Continue with GitHub 的方式登入。
  3. 畫面上會跳出授權視窗，請點擊 Authorize，授權 Vercel 存取你的 GitHub 帳號與專案。

步驟 2：匯入 GitHub 專案 (Import Project)

  1. 登入後，你會看到 Vercel 的儀表板 (Dashboard)。點擊右側黑色的 Add New... 按鈕，選擇 Project。
  2. 此時，畫面左側會列出你 GitHub 裡面所有的 Repository (專案庫)。
  3. 找到你上一章建立的專案（例如 my-vibe-store），點擊它旁邊的 Import 按鈕。

步驟 3：框架偵測與環境變數 (Environment Variables)

接下來會進入 Configure Project 畫面。這時候 Vercel 的魔法就顯現了：

  • 框架自動偵測 (Framework Preset)：因為我們是用最聰明的 AI 寫出現代化網頁（不論是 Next.js、Vite 還是 Astro），Vercel 超級聰明，它會自動偵測你的專案架構，並且自動幫你填好 Build Command。你通常什麼都不用改！
  • 環境變數 (Environment Variables)：如果你的專案有用到 API 金鑰（例如 ChatGPT 的 OPENAI_API_KEY 或是資料庫的網址），這一步非常重要！請點開 Environment Variables 區塊，在 Name 欄位填入變數名稱，Value 欄位貼上你的金鑰，然後點擊 Add。 (切記：這些金鑰絕對不能寫在 GitHub 裡，所以 Vercel 提供了這個安全的保險箱讓你填寫)

確認無誤後，毫不猶豫地按下那個大大的藍色 Deploy (部署) 按鈕！

準備見證魔法的時刻 🎉

接下來你會看到畫面上出現一個可愛的終端機視窗，不斷跑出文字 (Building)。這代表 Vercel 的雲端機器人正在無塵室裡幫你組裝網站。 大約 30 秒到 1 分鐘後，畫面會撒下五彩紙花，並顯示 "Congratulations! You just deployed a new project to Vercel."

點擊畫面上的網頁預覽圖，你就會看到屬於你自己的專屬網址（通常長得像 my-vibe-store.vercel.app）。你可以馬上把這個網址貼給你的朋友炫耀了！

殺手級商業應用：CI/CD (持續整合與持續部署)

你以為「一鍵部署」這樣就結束了嗎？Vercel 最可怕、最具商業價值的功能才正要開始。

既然 Vercel 已經跟你的 GitHub 連線了，這代表從今以後： 只要你在電腦上用 Cursor 叫 AI 修改了程式碼，並且把它 Push (推送) 到 GitHub 上，Vercel 就會在 3 秒內自動偵測到更新，並且在背景默默幫你重新打包、更新上線的網站！

這就是大公司奉為圭臬的 CI/CD (Continuous Integration / Continuous Deployment) 工作流。 你再也不需要手動開 FTP 軟體上傳檔案了。你的每一次存檔，都會自動變成全世界最新的版本。這讓你在做快速的商業驗證 (MVP) 或是修正緊急 Bug 時，擁有極致的效率優勢！

🛠️ 常見錯誤與 AI 除錯指南 (Build Error Troubleshooting)

雖然 Vercel 很聰明，但有時候在 Deploy 的階段，終端機視窗可能會噴出紅色的 Build Failed 錯誤訊息。 這通常是因為你在電腦上 (Local) 跑起來沒問題，但是上傳到雲端打包時遇到了嚴格的語法檢查。

常見的報錯情境：

  • Type error: Cannot find module ...：通常是因為你有一個檔案名稱大小寫打錯了（Windows 不分大小寫，但 Vercel 的 Linux 伺服器會嚴格區分），或是你漏掉安裝某個套件 (npm install)。
  • Missing Environment Variable：你的程式碼需要某個金鑰，但你在 Vercel 的後台忘記設定了。

心法：Vibe Coder 絕對不自己瞎猜！

請立刻使用以下的除錯咒語：

【Vercel 部署失敗除錯 Prompt】 我將專案部署到 Vercel 時失敗了。以下是 Vercel Build Logs 吐出的紅色錯誤訊息： [請將 Vercel 畫面上顯示的錯誤內容，全部複製貼上到這裡]

請問這是什麼原因造成的？是哪一個檔案的設定有問題？ 請提供我修正這個錯誤的具體步驟。如果需要修改程式碼，請給我完整修正後的檔案內容。

AI 只要一看到這些 Logs，就會瞬間幫你抓出兇手（例如：「啊！您的 import 路徑大小寫錯了，請把 components/Button 改成 components/button」）。 照著 AI 的指示修改、再次 Push 到 GitHub，Vercel 就會自動重新嘗試打包，直到網頁出現五彩紙花為止！