第四章：零成本部署到 Vercel (全世界都能看見)

開發好的精美網站，如果只能在自己的筆電上輸入 localhost:3000 孤芳自賞，那就太可惜了。我們要將它上線，讓全世界的人，包含你的客戶與未來的雇主，只要在手機上輸入網址就能立刻體驗你的作品。

傳統的部署方式極度痛苦：你要租用虛擬主機 (VPS)、透過 SSH 連線、安裝 Nginx、設定 SSL 憑證、寫自動化腳本...。這對前端工程師來說簡直是一場噩夢。但現在我們有 Vercel。這是 Next.js 母公司所推出的雲端平台，也是目前部署 React 與 Astro 最強大且免費的首選。

🐙 第一步：上傳原始碼到 GitHub

Vercel 不接受你直接上傳壓縮檔，它是透過連接你的 GitHub 專案來進行部署的。這帶來了一個巨大的好處：自動化持續部署 (CI/CD)。未來你只要推播 (Push) 新程式碼到 GitHub，Vercel 就會自動攔截，並在背景幫你更新網站，你完全不需要手動介入！

登入 GitHub 官網建立一個新的 Repository (例如命名為 not_far_web)。不要勾選初始化 README。
回到你的 VSCode 終端機，執行以下指令 (這是業界標準的 Git 操作流程)：

# 1. 將所有變更加入追蹤
git add .

# 2. 提交一個有意義的版本紀錄
git commit -m "完成首頁 UI 與資料庫串接"

# 3. 確保主分支名稱為 main
git branch -M main

# 4. 綁定遠端 GitHub 儲存庫 (請換成你的網址)
git remote add origin https://github.com/你的帳號/not_far_web.git

# 5. 用力推播上去！
git push -u origin main

如果你看到終端機出現 Branch 'main' set up to track remote branch 'main'，就代表成功了！

🚀 第二步：在 Vercel 點擊「一鍵部署」

前往 Vercel 官網，點擊 Sign up，並選擇 Continue with GitHub 來授權登入。
進入 Dashboard 後，點擊畫面右上角黑色的 Add New... > Project。
在列表裡找到你剛剛上傳的 not_far_web 專案，點擊右邊的 Import 按鈕。

這時候最神奇的事情發生了：Vercel 會自動偵測到你的專案是 Astro 架構，它會自動幫你填寫所有的 Build Command (astro build) 與 Output Directory (dist)，你完全不需要手動設定！

🔒 第三步：設定環境變數 (超級重要，做錯就連不上資料庫！)

在點擊最下方的 Deploy 之前，請先停下來！還記得我們在第二章建立的 .env 檔嗎？我們說過 .env 檔案絕對不會被上傳到 GitHub (因為裡面有你的 Supabase 密碼)。既然 GitHub 上沒有密碼，那 Vercel 從 GitHub 抓取代碼去編譯時，當然也找不到密碼，你的網站就會在雲端崩潰連不上資料庫！

我們必須在 Vercel 的後台，把密碼手動「告訴」它：

在 Vercel 的部署設定畫面，展開 Environment Variables 區塊。
打開你本機電腦裡的 .env 檔，將兩行 Key 和 Value 分別複製貼上去：
- Name 欄位填入：PUBLIC_SUPABASE_URL / Value 欄位填入：https://xxx.supabase.co
- Name 欄位填入：PUBLIC_SUPABASE_ANON_KEY / Value 欄位填入：你的超長 ANON_KEY
點擊旁邊的 Add。
確定兩個變數都加進去後，點擊最下方的藍色按鈕 Deploy！

🎉 第四步：撒花與設定自訂專屬網域 (Custom Domain)

喝口水，等大約 30 秒到 1 分鐘，Vercel 在遠端伺服器幫你打包完成後，螢幕上會撒下慶祝的彩紙 (Confetti)！ Vercel 會給你一個獨一無二的免費網址 (例如 not-far-web-git-main-你的帳號.vercel.app)。

但如果這是一個商業案，你總不能給客戶看 vercel.app 結尾的網址吧？你需要綁定客戶自己買的專屬網域 (如 notfar.com)。

🔥【Vibe Prompt 自訂網域實戰咒語】 我的 Astro 專案已經成功部署到 Vercel 了，我現在想要套用自己的自訂網域 (例如 notfar.com)。

請給我詳細的步驟，告訴我在 Vercel 後台的 Settings > Domains 應該怎麼新增。

我的網域是在 Cloudflare (或 GoDaddy) 買的，請告訴我應該要怎麼設定 DNS 紀錄？

請清楚解釋什麼是 A Record，什麼是 CNAME，我該填哪個？

AI 會給你非常詳盡的 DNS 設定教學。一般來說，只要在 Cloudflare 中設定一組 CNAME 將 www 指向 cname.vercel-dns.com，等待幾分鐘的 DNS 傳播，Vercel 就會自動幫你核發免費的 SSL 安全憑證 (也就是網址旁邊的綠色鎖頭)。

⚠️ [常見地雷區] 部署失敗：Type Check Error (型別錯誤)

很多新手在本機測試 npm run dev 時一切正常，但一丟上 Vercel 就失敗報錯：Failed to compile 或 Type error。這是因為在開發模式下，TypeScript 比較寬容；但 Vercel 在部署時會執行嚴格的打包檢查 (npm run build)，只要有一個變數忘記定義型別，它就會無情地把你擋下。

Vibe Coder 解法： 回到 VSCode，在終端機手動輸入指令 npm run build。終端機一定會噴出跟 Vercel 相同的錯誤。把那段錯誤複製起來貼給 Cursor：「我在執行 build 時發生了這個型別錯誤，請幫我修正」。修好並 push 到 GitHub，Vercel 就會自動重新部署了。

💼 [商業應用場景] 免費仔的逆襲與 SaaS 起點

Vercel 提供的 Hobby 方案 (免費版) 足以應付一天數千人造訪的中小型網站。這意味著，你幫客戶開發形象官網，你的「主機與部署成本」是 0 元！你完全可以向客戶收取「網站上線費」與「每月主機維護費 (1500~3000元)」，這成為了你接案的純利潤。

更進階一點，Vercel 支援所謂的 CI/CD 工作流。當你的客戶說想要改一個標題時，你只要在 VSCode 裡改好字，按下 git push，剩下的事情全部自動發生，客戶在 1 分鐘後重新整理網頁就能看到更新。這種極致的工程師體驗，正是現代 SaaS (軟體即服務) 創業的標準起手式。

✅ 課程總結：你已經不是新手了！

恭喜你完成了 Not Far Web 的基礎實戰！回顧這段旅程，你學會了：

用 AI 瞬間生成資料庫結構並寫入資料 (Supabase)。
掌控 React Hooks 來管理使用者狀態。
打造具備企業級 Glassmorphism 質感的動畫元件 (Tailwind + Framer Motion)。
建立資安防護意識 (.env 與 .gitignore)。
零成本實現自動化持續部署 (Vercel)。

你已經具備了打造商業級形象網站的完整技術鏈。但真正的全端開發者，還要學會處理更複雜的資料結構與地圖定位！想要挑戰「有即時地標、會群集收合的露營地圖」嗎？請準備好你的 Vibe，前往下一個進階課程：Course 2: Car Camping Map！