0%
後段實作：先上線，再加入雲端同步第 18 課
後段課堂實作35 分鐘最後確認 2026-07-25

先讓網站上線：用 Vercel 網頁首次部署

跟著講師從 Vercel 網頁匯入自己擁有的 private GitHub repo，先取得可在手機開啟的正式網址；本課刻意保留 localStorage，親自觀察網站上線後資料仍不會跨裝置同步。

18

學完這一課，你會做到

  • 從自己的 GitHub repository 建立 Vercel 專案
  • 分辨 Preview 與 Production deployment
  • 驗證同一瀏覽器重新整理後資料仍在，但手機或另一個瀏覽器不會共用
  • 說明程式上線與資料上雲是兩件不同的事

開始前先定位

你在這裡後段實作：先上線，再加入雲端同步

本機功能與客製規則驗收後，先部署 Vercel 取得可分享網址；看見 localStorage 無法跨裝置後，再加入 Firestore 並完成同步。

完成證據課堂上線通關證據

提交兩張經檢查的截圖：Vercel Production 網址正常顯示排班網站，以及手機或無痕視窗開啟同一網址但沒有上一個瀏覽器的班別。兩者只顯示合成資料；不得讓 Claude 私人對話側欄、帳號 email、控制…

本課先不做網址不是權限

網站能在手機開啟只證明部署成功，不代表資料已受保護。難猜的網址可能被分享、記錄或掃描；未登入 demo 只能放合成資料，不能靠「只有我們知道網址」保護診所資料。

本課名詞Vercel部署Private repoPreviewProduction驗收

首次部署

  1. 先到自己的 GitHub repo，確認 Owner 是自己的帳號、main 分支最新 commit 已包含階段 4 的成果，而且沒有真實診所或人員資料。若本機成果尚未 push，先回 Claude App 分開核准 commit 與 push。
  2. 登入 Vercel，確認已連接正確的 GitHub 帳號。
  3. 進入 New Project／Import Git Repository，選擇 Owner 是自己、名稱為 wca-ai-clinic-schedule-workshop 的 private repository；不要選 dentallio 的講師正式模板。
  4. 若清單找不到自己的 repo，選 Configure GitHub App／Adjust GitHub App Permissions，只授權自己剛建立的課程 repo，完成後回 Vercel 重新整理。不要提供密碼、PAT 或 token 給 Claude。
  5. 依課程 SOP 檢查框架與必要設定，不自行新增來源不明的環境變數。
  6. 按 Deploy，等待狀態成功後開啟 production 網址。
  7. 在 production 網址以合成資料新增一筆班別，重新整理同一個瀏覽器，確認資料仍存在且右上角仍是「本機練習」。
  8. 再用手機或無痕視窗開啟同一個 production 網址。網站應可開啟，但看不到上一個瀏覽器剛新增的班別；把這個結果記下來，下一課再解決。
Vercel 官方 Deploying a Git repository 文件，畫面顯示 New Project 流程與 Import Git Repository 清單中的 Import 按鈕。

Vercel 網頁匯入流程：從 Dashboard 建立 New Project，在 Import Git Repository 清單找到自己的 GitHub repository，再按 Import。

  1. 先核對目前 Vercel 帳號與 GitHub 連線是自己的。
  2. Repository 名稱與 Owner 必須和 GitHub 網頁一致。
  3. Import 前不新增來源不明的環境變數；需要的設定依模板 README 與當期 SOP。
畫面確認：2026-07-15Vercel 官方：Deploying Git repositories開啟原尺寸圖片

看懂兩種部署

類型通常何時產生用途
Preview分支或尚未合併的變更先看效果、先驗收
Production指定 production branch 更新正式網址所顯示版本

本課四個測試結果

測試預期結果代表什麼
開啟 Production 網址排班網站正常顯示程式已成功上線
在同一瀏覽器新增後重新整理合成班別仍存在localStorage 在這個瀏覽器保留資料
用手機或無痕視窗開同一網址網站可開，但沒有剛才的班別資料尚未跨裝置同步
查看右上角狀態仍顯示「本機練習」尚未設定 Firestore，這不是錯誤

課堂上線通關證據

提交兩張經檢查的截圖：Vercel Production 網址正常顯示排班網站，以及手機或無痕視窗開啟同一網址但沒有上一個瀏覽器的班別。兩者只顯示合成資料；不得讓 Claude 私人對話側欄、帳號 email、控制台資訊、token 與其他分頁入鏡。你能說明：「網站已上線，但資料還沒上雲。」

參考資料

介面與方案會改版；實際操作仍以各工具官方頁面為準。延伸資料用來幫助理解，不取代本課安全原則。

低壓力自我檢查

Vercel 網址能開啟，但手機看不到電腦剛新增的班別，最合理的原因是？

準備好再標記完成完成狀態會留在這台裝置，下次回來可接著學。