MODULE 6 · 部署 · 6-8

雲端託管 (Hosting) 平台與 Git 聯動:為什麼 Vibe Coder 只要 Push 程式碼,網站就自動更新上線?

前面幾課,你已經把程式碼用 Git 存好、放上 GitHub,也把資料庫和資料表都設計好了。 但網站現在還只活在你的電腦(localhost),把網址傳給朋友,他卻打不開。 這一課讓你的網站真的「上線」,而且改完 push 一下就自動更新。

§1 · 先看問題

你的網站,現在只有你看得到

把你電腦上的網址傳給朋友,看看會發生什麼事。

💻
你的電腦
localhost:3000
✅ 看得到
📱
朋友的手機
localhost:3000
§2 · 這是什麼

部署:把網站搬上網路

一個新名詞,先講清楚。

動作
部署(Deployment)
把你的網站搬上網路、給它一個公開網址, 讓任何人在自己的裝置上都打得開。
對照
localhost vs 線上網址
localhost 只有你看得到;部署後會拿到像my-ai-shop.vercel.app 這種全世界都連得到的網址。
§3 · 誰幫你開著

雲端託管平台(Hosting)

部署要搬到哪?搬到一個 24 小時不關機的房東那裡。

🏠
雲端託管平台(Hosting)就像一個房東: 他有一台 24 小時開著的電腦(這種專門開著、服務別人的電腦,就叫「伺服器 server」), 你把網站「租」一個位置掛上去,它就替你日夜不關機地對全世界開著。
沒有房東的話,你得自己來。切切看差多少:
  • 房東的伺服器現成的,掛上去就好
  • 開箱即用,這些都不用碰
  • 房東日夜不關機地替你顧著
  • 流量變大了,平台自動撐住
  • 平台幫你擋在前面
  • ✨ 這五件房東全包,你只要 push,然後專心做產品。
這類平台有好幾家(具體用哪一個待定,例如 Vercel)。 重點是「概念」,不綁特定平台,操作年年都在變,觀念不變。
§4 · 接起來

把房東跟你的 GitHub 綁在一起

到 Hosting 平台選出你要上線的那個 repo,綁定一次,之後它就會一直盯著它。

平台讀到了你 GitHub 上的倉庫。挑出要上線的那一個,按「Import」(匯入)把它接過來:
§5 · 見證魔法

改一行字,看程式碼跑完一趟旅程上線

改改下面的標語、按 push,然後一站一站送它走到全世界。

你電腦上的程式碼(首頁標語):
全世界看到的線上網站:
🔒 my-ai-shop.vercel.app● 線上
歡迎光臨
my-ai-shop
你完全沒碰伺服器,只 push 了一下。平台自己抓程式碼 → 打包 → 上線,這整套叫自動部署。中間「把程式碼變成可以跑的網頁」那一步,叫 build
§6 · 平台都記著

部署歷史:每一次 push 都留一筆

打一句改動說明,按 Deploy,看清單最上面長出一筆新紀錄。

名詞
部署紀錄(Deployment)
你每 push 一次,平台就替你存一筆部署紀錄: 這次改了什麼、哪個版本、成不成功,全都留著、可以回頭查。
標記
Production(正式版)
清單最上面、目前真正對全世界開著的那一版, 會被標成 Production。其他都是它的歷史。
每筆左邊的小圓點是這次部署的狀態:●Ready 成功、●Building 打包中、●Error 失敗。
Deployments(部署清單)
每一筆都留著,不只是好查。下一段你會看到:就算新版本出問題,這些舊紀錄能一鍵把你救回去
§7 · 紅燈別怕

部署失敗了,線上版本不會被頂掉

有時候 push 上去會 build 失敗。跟著看:壞掉的這版根本上不了線。

ReadyProduction
上一個版本
全世界正在看的就是它,一直好好跑著
Building
你剛 push 的這版
按下面的按鈕,push 一段有小錯的程式碼。
🔑VIBE CODER 秘訣
👀觀察
部署失敗不會弄壞線上版本,別慌。錯誤訊息(log)的第一行,通常就指出哪個檔、第幾行出事。
💬怎麼跟 AI 講
把那行紅字貼給 AI:「部署失敗了,這是錯誤訊息:<貼上>,幫我看怎麼修。」
§8 · 出事秒回

上線後發現版面壞了?一鍵回到上一個好版本

這次 build 有成功、也上線了,但結果是壞的。客戶已經看到了,怎麼最快救回來?

救命
回滾(Rollback)
不用重寫、不用重新 build,直接把線上指回某一筆過去的部署, 幾秒就生效。因為平台把每一版都留著(§6),舊版隨時能頂回來。
差別
回滾 vs 改程式碼
回滾是部署層級的瞬間切換,先止血; 等線上穩了,再回頭好好修程式碼、重新 push 一個真正修好的新版。
線上網站現在長這樣:😱 標語變亂碼了
🔒 my-ai-shop.vercel.app● 線上
■夏季特賣▓5折 {{price}}
my-ai-shop
點任一筆過去的好版本,把它頂回線上
Ready改首頁標語樣式Production3f4a5b6目前線上
Ready夏季特賣 5 折e4f5g6h
Ready週年慶開跑7c8d9e0
Ready建立首頁9c0d1e2
這跟之前學的 git「還原」一樣嗎?

不太一樣。git 還原是改你原始碼的歷史; 這裡的 rollback 是平台部署層級的切換,不動原始碼、不重新 build,所以快。 兩個常常搭配用:先 rollback 止血,再用 git 好好修程式碼。

🔑VIBE CODER 秘訣
👀觀察
網站上線後看起來怪怪的,先別急著現場硬改。平台留著每一個舊版本,可以先一鍵回到上一個正常的。
💬怎麼跟 AI 講
「網站上線後版面壞了,幫我 rollback 到上一個正常的部署版本,先讓線上恢復正常。」
§9 · 小補充

想要漂亮的網址?換個網域

平台先給你一個免費網址,之後可以換成自己的。

🏷️
網域(domain)就是你的網站在網路上的「門牌地址」。 別人要找你,就是在網址列輸入這個地址。地址好不好記、像不像你的品牌,會影響別人對你的第一印象。
🔒my-ai-shop.vercel.app
免費 · 馬上能用
  • ✅ 不用花錢,部署完就有
  • ➖ 帶著平台的名字、比較長
🔒my-ai-shop.com
自有網域 · 要買
  • ✅ 短、好記、有品牌感
  • ✅ 用戶更信任(看起來更專業)
  • ➖ 要花錢買、要設定一下
怎麼換成自己的網域?兩步: 先去「網域商」註冊一個你喜歡的網址(一年通常幾百塊台幣), 再到 Hosting 平台後台把它「指向」你的網站,幾分鐘後就生效。 一開始用免費的 ...vercel.app 完全沒問題,等產品做起來、想要品牌感了再升級。
§10 · 試試看

快速檢查一下

答錯不會鎖死,可以一直重選。

答對 0 / 4
Q1

你在 localhost 做好網站,把網址傳給客戶,他卻打不開。為什麼?

Q2

把 Hosting 平台綁定 GitHub 之後,你要怎麼更新線上網站?

Q3

你 push 了一版,結果 build 失敗(紅燈)。這時候線上網站會怎樣?

Q4

新版本 build 成功也上線了,但版面壞掉、客戶在抱怨。最快的止血方式?

🎒這一課帶走的
部署Hosting自動部署build部署歷史回滾

localhost 只有你看得到,部署讓全世界打得開。 把 Hosting 平台綁定 GitHub 後,你只要 push,它就自動 build、上線, 還把每一版都存成部署歷史;萬一新版出包,一鍵回滾就能救回來。你完全不用碰伺服器。

下一課 網站上線好爽,但這裡藏著新手最容易翻車的雷:在正式網站上手癢測試,把真實用戶的資料搞爛。下一課教你把測試跟正式分開。