第七章：上線與接客 - Vercel 部署與專屬頂級網域綁定

把你的網站程式碼寫得再漂亮，如果它只存在於你筆電裡的 Localhost:3000，那它就只是一個昂貴的玩具。

想像一個情境：你在一個商務聚會上，認識了一位正在尋找外包工程師的餐廳大老闆。他隨口問你：「你的作品集借我看一下？」這時候，如果你說：「老闆，你等我一下，我去把我的筆電打開，輸入指令跑一個本地端伺服器給你看...」老闆早就轉身去找別人了。

如果你只是把程式碼打包成一個 ZIP 檔案用 Email 丟給潛在客戶，他們 100% 絕對不會打開來看。因為這個世界上，除了面試你的資深技術主管之外，沒有任何一個老闆或一般人，會自己去安裝 Node.js、自己跑 npm install 來瀏覽你的網站。

你要做的，是把網站部署 (Deploy) 到真實的網際網路上，並給它一個看起來極度專業的「自訂網域 (Custom Domain)」。只要對方在手機瀏覽器輸入網址，一秒鐘之內，你用毛玻璃特效與微動畫打造的完美網站就會出現在他眼前。這才是現代接案工程師該有的火力展示。

🚀 部署神器的終極解答：Vercel

如果你在論壇上發問「怎麼部署網站？」，很多老派的工程師會叫你去租用 AWS EC2、GCP 虛擬機，或是教你架設 Nginx 伺服器並申請 SSL 安全憑證。如果你照做，你大概會花上一個禮拜的時間去讀那些艱澀的 Linux 設定文件，而且每個月還要被信用卡扣幾百塊的機器租金。

在 Vibe Coding 的現代化工作流中，我們只用最強大的 Serverless (無伺服器) 解決方案：Vercel。

Vercel 其實就是開發出 Next.js 這套框架的母公司。這意味著，它對 React / Next.js 的支援度是全宇宙最高的。最佛心的是，對於個人開發者與小型外包專案來說，Vercel 提供了完全免費的頂級額度 (Hobby Plan)，並且自帶全球 CDN 加速與永久免費自動更新的 HTTPS 安全憑證！

Vercel 極速上線三部曲：

第一步：上傳程式碼到 GitHub (你的雲端保險箱) 這就是為什麼我們要在前面的章節教你 Git。你不需要懂複雜的指令，只要打開你編輯器左側的「原始碼控制」面板，輸入一段 Commit 訊息，點擊「同步變更 (Sync Changes)」，你的程式碼就會安全地上傳到你的 GitHub 帳號裡了。
第二步：登入 Vercel 並匯入專案 (Import) 前往 Vercel 官網，用你的 GitHub 帳號登入 (這非常重要，這能賦予 Vercel 權限去讀取你的程式碼)。進入後台後，點擊右上角的黑底白字按鈕「Add New... > Project」。這時畫面會列出你在 GitHub 上的所有專案儲存庫。找到你剛剛上傳的作品集專案，點擊右側的「Import」。
第三步：設定環境變數並 Deploy (一鍵發射)
- 如果你的專案有用到後端資料庫密碼 (例如 Supabase)，請在部署畫面的「Environment Variables」區塊展開，將你本地 .env 裡面的變數貼上去。
- 如果這只是一個純前端的靜態展示作品集 (沒有用到任何 API 金鑰)，那你什麼設定都不用改！
- 直接霸氣地按下那顆巨大的黑色「Deploy」按鈕！

給 Vercel 的超級電腦大約 45 秒到 1 分鐘的時間，它會自動在雲端幫你執行編譯打包。完成後，滿天會撒下慶祝的虛擬彩帶，Vercel 會免費發給你一個可以立刻點擊的公網網址 (例如：my-awesome-portfolio-x7a9.vercel.app)。 恭喜你，你的網站正式上線，現在全球幾十億人都能看見你的傑作了！

💎 商業專業度的最後一哩路：綁定專屬網域 (Custom Domain)

雖然 Vercel 免費送你的 .vercel.app 網址可以運作，但是，當你把它印在實體名片上，或是傳給大老闆看的時候，這種看起來像「亂碼後綴」的免費網址，總覺得少了一點「靈魂」與「商業信任感」。

想像一下，如果你是發案的老闆，你比較想把一個十萬元的案子，交給下面哪一位工程師？

❌ A 工程師的作品集網址：https://react-test-project-final-v2.vercel.app
🟢 B 工程師的作品集網址：https://www.alex-design.dev 或 https://hello.alexcoder.tw

毫無疑問，B 工程師看起來就像是一個成熟、有規模的獨立工作室。 這就是為什麼，你必須花錢買一個專屬網域。這絕對是你作為接案工程師，投資報酬率 (ROI) 最高的一筆花費。

網域購買與綁定實戰教學：

去哪裡買網域最划算、不被坑？ 很多新手會隨便在 Google 搜尋，然後在某些老牌大廠 (例如 GoXXddy) 購買。第一年很便宜，結果第二年續約時，費用直接暴漲三倍，甚至還要另外花錢買「WHOIS 隱私保護 (如果不買，你的真實姓名與手機號碼會被公開在網路上)」。

在現代，我們強烈推薦使用 Porkbun (豬肉包) 或是 Cloudflare Registrar。這兩家不僅價格極度透明、續約不亂漲價，而且預設永久免費贈送 WHOIS 隱私保護與 SSL 憑證基礎服務。

💡 [網域命名商業小知識]：接案工程師不需要死守著昂貴且難搶的 .com。現在，.dev (開發者專屬，極具極客感)、.io (科技新創圈最愛)、或是 .co 都是非常時尚且展現專業度的選擇。一年的費用通常只需要 300 到 1000 台幣不等，這只是一杯星巴克的錢，卻能買到一整年的尊榮感。
在 Vercel 綁定你的戰袍 (Add Domain) 購買完成後，回到 Vercel 後台你的專案頁面。點擊上方的「Settings」頁籤，然後點選左側的「Domains」。在輸入框中輸入你剛剛買到的全新網址 (例如 alex-design.dev)，點擊 Add。 (Vercel 會問你要不要順便加上 www，建議選擇預設的 Recommended 設定。)
設定 DNS 紀錄 (打通任督二脈的網路通訊) 剛加完網域後，Vercel 會跳出一個紅色的 Error 錯誤提示卡片。別緊張，這是正常的！它會告訴你需要設定兩組神秘的 DNS 字串：通常是一組 A 紀錄 (對應一組 IP 數字) 跟一組 CNAME 紀錄 (對應別名)。

這時，請登入你購買網址的平台 (例如 Porkbun 的後台)，找到「DNS Management (DNS 管理)」頁面。依照 Vercel 給你的指示，把你從 Vercel 複製下來的值，一筆一筆新增進去並儲存。這是在告訴全世界的網路伺服器：「如果有人輸入我的專屬網址，請把它導向 Vercel 的主機位置！」

設定完成後，大約等待 10 分鐘到半小時 (這叫做 DNS 全球傳播解析時間)。你可以去泡杯咖啡，當你回來重新整理 Vercel 的頁面，看到紅燈變成象徵暢通的綠燈時... 恭喜你！全世界的任何人只要在瀏覽器輸入你的專屬網址，就能看見你用心打造的頂級個人品牌網站了！

🎉 結語：Vibe Coding 改變了你的工程師職涯軌跡

從這門課程的第一章，一路走到第七章。我們學會了 Tailwind CSS 的極速切版、暗黑模式的尊榮感設計、一鍵更換商業風格、用 Vibe Prompt 做出不破版的 RWD 手機響應式設計、甚至加上了超有質感的動態懸停魔法。最後，我們親手把它推向全世界。

在過去，要靠「一個人」完成這所有的環節，你需要學會極度艱澀的語法、花上幾百個小時去死記硬背 CSS 屬性與部署知識。現在，靠著 Cursor 與 Vibe Coding 詠唱技術，你的角色已經從一個「寫程式打字的底層苦力」，躍升為了一個「指揮系統與美感的超級架構師」。

你只需要懂「邏輯」、「美感」與「商業價值觀」，那些繁瑣、容易打錯字的程式碼，全部交給 AI 去幫你生成與實作。帶著這套華麗無比、且正式掛在專屬網域上的個人作品集，去向世界證明你的破壞力與價值。大膽地去談下那些高利潤的外包案吧！你已經準備好了！