第14章：部署上線

前面都是在「自家廚房」（本機 localhost）試做，只有自己連得進去。要讓全世界都能用，得把網站搬到一台「網路上、一直開著的伺服器」上。這個搬遷與啟用的過程，就叫 部署部署（deploy）指把寫好的網站或程式放到網路上的伺服器執行，讓任何人都能透過公開網址連進來使用。（deploy）。

全景圖：從你的電腦，到一個全世界打得開的網址

後面各節會逐段細講，這裡先把整條路一次看完，之後不管在哪一節卡住，回來看這張圖就知道自己走到哪裡：這裡先把整條路一次看完，之後實際部署時不管走到哪一步卡住，回來看這張圖就知道自己走到哪裡：

程式碼已經放在 GitHub 上了（第 13 章）。GitHub 本身有提供一個免費的「把網頁放上網」服務，叫 GitHub Pages。一開始也想用它，結果發現行不通。原因很重要，值得理解：GitHub Pages 只能放「靜態網站」。

改用 Vercel：專為這種網站設計的平台

改用一個叫 Vercel 的平台平台（platform）指一個「幫你代管網站」的服務。你把程式碼交給它，它自動準備伺服器、安裝建材、開門營業，並給你公開網址。（platform）。你把程式碼交給它，它自動幫你準備伺服器（店面）、安裝建材、開門營業，還給你一個公開網址。它對本課用的這種網站（Next.js）支援特別好，免費方案就夠用。最方便的是它直接連你的 GitHub（全景圖的 A 路）：授權它讀取你的 repo，它就能自動抓程式碼來部署最方便的是它直接連你的 GitHub（自動部署路線）：授權它讀取你的 repo，它就能自動抓程式碼來部署；以後你每次 push 更新，它還會自動重新部署。趕時間的小成品，也可以走全景圖的 B 路，用指令直接從電腦上線。趕時間的小成品，也可以不經 GitHub，用指令直接從電腦上線。

全景圖裡說，不管走哪條路，平台接手後的第一件事都是 build（打包）不管用哪種方式上線，平台接手後的第一件事都是 build（打包）把你的專案整理成「正式版」的過程：安裝需要的套件、把前端壓縮成載入快的靜態檔案、把後端變成一顆顆隨叫隨跑的小函式。build 失敗，網站就上不了線。。它做三件事：安裝專案需要的所有套件；把前端壓縮打包成瀏覽器載入最快的靜態檔案；把後端變成一顆顆 serverless 小函式serverless（無伺服器）指你不用自己養一台 24 小時開機的伺服器：有人呼叫時，平台才臨時啟動這段後端程式、跑完就關。好處是平時不耗資源、免費方案就有；代價是久沒人用時第一次呼叫會慢一下，而且單次執行有時間上限。。所以你平常 npm run dev 看到的是「邊改邊看的開發版」，上線跑的是 build 出來的「正式版」，兩者不完全一樣，這也是第 5 節要你上線後再實測一次的原因。上線跑的是 build 出來的「正式版」，兩者不完全一樣，這也是上線後一定要再實測一次完整流程的原因。

而 build 這一關，正是部署最常失敗的地方。本課專案就在這裡差點摔一跤，還好 AI 在部署前主動審查了一遍設定，抓出一個完全沒注意到、但會害 build 失敗的衝突：

部署時還有個一定要做、又很容易漏的步驟：重新設定環境變數。還記得本機那個放金鑰的保險箱 .env.local 嗎？因為第 12、13 章刻意不把它上傳（保護機密），所以雲端平台上根本沒有這個保險箱。

這也呼應了「機密不寫死在程式碼、放環境變數」的好處：同一份程式碼，本機用本機的鑰匙、雲端用雲端的鑰匙，互不干擾。

部署成功、拿到網址，會跳出「恭喜」畫面。但先別急著慶祝。

所以上線後，務必親自上傳一份檔案、跑完整個流程，確認：

全部正常，才算真正完工。

但實測時如果打不開、按了沒反應、或改了卻沒更新，先別慌，這幾乎都不是你做錯，而是四種「本機看不到、上線才會遇到」的狀況。下一節一個一個拆給你看。這幾乎都不是你做錯，而是四種「本機看不到、上線才會遇到」的狀況，每一種都有固定的自救法。

這四種狀況的共同點是：在你電腦上怎麼測都測不出來，上線才第一次發生，所以初學者遇到特別慌。其實每一種都有固定解法，對照著查就好。

想多懂一點：預覽網址，和一種特別的紅字

預覽（Preview）和正式（Production）是兩個網址。走全景圖 A 路時，Vercel 後台會出現兩種部署預覽（Preview）和正式（Production）是兩個網址。用 GitHub 自動部署時，Vercel 後台會出現兩種部署：推上主線才會更新正式網址；其他版本會得到一個預覽網址，只是給你自己先看的試版。在預覽看到更新，不代表正式站也更新了，分享給別人前，確認你貼的是正式網址。

一種特別的紅字：CORS。如果你的網頁去呼叫「別人家網域」的服務，瀏覽器有時會用一長串紅字擋下（訊息裡有 Access-Control-Allow-Origin 字樣）。這是瀏覽器的安全機制在把關，不是你的程式壞了；自己專案裡前端呼叫自己的後端，通常不會遇到。真的遇到，把紅字整段貼給 AI 處理就好。

到這裡，主線完成了：網站上線、出狀況也知道怎麼自救。最後是延伸補充，趕時間可以先跳到下一節動手做，之後再回來看。這一節是延伸補充：除了 Vercel，還有哪些常見的免費上線組合？趕時間可以先收藏，之後要選平台時再回來看。這次範例用的是 Vercel，但不是每個專案都要用它。最常見的免費上線組合有三種，差別在「哪個平台把網站跑起來」。先記一個判斷心法，再看對照表。

• 📄只給人看、不用記資料（履歷、作品集、靜態教學頁、活動頁）→ 用 GitHub Pages 就夠。
• 🤖要後端做事、串 AI 或 API，但資料另外存（規格書自動評分網站）→ 用 Vercel。
• 🔢要即時記住、多人同步的資料（抽號機、留言板、預約系統）→ 用 Firebase（自帶資料庫）。

三者對照表

各自的注意事項（這幾點最容易踩雷）

概念都懂了，來真的做一個、放上線。這次刻意走全景圖的 B 路（直接用指令從你的電腦上線），平台則換用對照表裡「自帶資料庫」的 Firebase這次刻意用直接下指令從你的電腦上線的方式，平台則選用「自帶資料庫」的 Firebase，讓你把兩條路、兩種平台都體驗到。用 Antigravity 或 VS Code 都可以，選你自己順手的那一個（操作和下面的 prompt 完全一樣）；整個過程幾乎都讓 AI 代勞，你只要負責出一張嘴。前端、後端、API 這些詞忘了，回第 8 章複習。

① 你要做的：一個「班級許願牆」

一頁網站：任何人輸入暱稱和一句話、按送出，下面就即時出現所有人的留言，而且重新整理、換別人開都還在。把下面這段直接複製、貼給你的 AI：

喜歡別的主題也行，把「班級許願牆」換成你要的就好：

額度快用完？換更小的「戳戳樂」

AI 免費額度有限、禁不起反覆除錯。如果額度快用完，就退成更小、更好做的「線上焦慮戳戳樂」：一個大按鈕，戳一下數字 +1，而且大家一起戳、數字共享（一樣是全端，但更小）。把這段貼給 AI：

請用一個 index.html 檔，做一個「線上焦慮戳戳樂」：畫面中央一個大按鈕，每按一下就把 Firebase Firestore 裡的一個共用數字加 1，並即時顯示目前總次數（所有人共享同一個數字）。用最簡單、最少檔案的寫法，標出我要貼 Firebase 設定的位置。

同樣可以換主題：

加油打氣鈕全班一起點線上紓壓泡泡紙戒糖打卡計數募款累積進度想下課人數

② 開一個 Firebase 免費資料庫（跟著點）

AI 把網頁做好後，它需要一個地方存留言。照下面點一次就有：

你在上面選的「測試模式」課堂練習用沒問題。想知道它的安全性、apiKey 會不會外洩、長期公開要注意什麼，點開下面這塊。

想多懂一點：測試模式、安全規則、apiKey 安不安全？

「測試模式」是什麼：等於先把資料庫的門打開，30 天內任何人都能讀寫你的留言。課堂練習很方便、沒問題；但 30 天後會自動上鎖，而且若要長期公開給人用，要到「規則」分頁設好「安全規則」（決定誰能讀、誰能寫）。真正保護資料的是這條規則，不是把金鑰藏起來。對應對照表裡 Firebase 的注意事項這也是使用 Firebase 時最容易踩雷的注意事項。

貼含 apiKey 的設定出去，安全嗎？安全。 Firebase 的 apiKey 不是密碼，只是你專案的「身分證號」，本來就會出現在網站程式碼裡、每個訪客都看得到，這是 Firebase 的正常設計，貼給 AI、放進 HTML 都沒問題。（課程前面說「不能放前端」的，是伺服器用的祕密金鑰，例如規格書網站那把 Gemini 金鑰，那是另一種東西。真正保護資料的是上面說的「安全規則」。）

要長期公開、升成正式版怎麼做？就一件事：去把「安全規則」設好，不要繼續用測試模式。到 Firebase 主控台 → 左邊「Firestore Database」→ 上方「規則」分頁，改好內容後按右上「發布」就生效（同一頁的「規則 Playground」可以先模擬某筆讀寫會不會被擋）。規則語法不用自己背，把需求貼給 AI 最快，例如：「我的 Firestore 是留言板，任何人都能看留言，但每則文字要少於 200 字才能寫入，不需要登入。請幫我寫出 Firestore security rules。」拿到規則後，貼進「規則」分頁按發布即可。常見三種需求：① 全部鎖死（誰都不能讀寫，正式模式的預設）、② 公開可看、留言加條件才放行（適合班級留言板、戳戳樂）、③ 要登入才能寫（最嚴謹，但要另外開啟 Firebase 的「Authentication」讓人登入）。記住順序：練習用測試模式 → 要長期公開前，先把規則改好再分享網址。

③ 上線：先登入一次，再部署

部署前要用 Google 帳號登入一次。這個登入會跳出瀏覽器、要你親自點，所以 AI 的終端機做不到（會回報 non-interactive）。這一次請你自己在編輯器的「終端機」打這行（用建立資料庫那個 Google 帳號登入、允許）：

登入過程它可能先問你一兩個 Y/n 的問題（例如「要不要啟用 Gemini 功能」「要不要回報使用資料」），這些都是非必要的，打 n 按 Enter 即可，不影響登入。接著瀏覽器會跳出來讓你用 Google 帳號登入、允許。

登入只要這一次，憑證會記在你電腦裡。接著就能部署，你自己打、或回頭叫 AI 幫你跑都行：

跑完它會給你一個像 你的專案.web.app 的網址。把網址傳到群組，全班就能一起留言了，這就是「上線」。（若它說找不到 hosting 設定／firebase.json，先叫 AI「幫我建立 firebase.json，public 設成 index.html 所在的資料夾」，再回來 deploy。）

④ 想一想（扣回本章對照表）

答對加 20 分，答錯倒扣 10 分。