部署 Production URL
用無痕視窗與他人裝置開啟自己的 HTTPS 網址。
CHAPTER 28 · 240 MINUTES
Netlify 部署、證據格式預檢與期末展示
本章共 240 分鐘：課次 27 後 60 分鐘完成部署前檢查，課次 28 再正式部署、跨裝置驗收與展示；格式通過不等於已驗真。
3項人工驗真
3個明確任務
60秒成果展示
LEARNING GOALS
本章結束時，你能交付什麼
建立版本證據
提供 repo 中存在的 commit，讓驗收者比對線上內容。
安全展示成果
以安全 DOM 產生 60 秒草稿，再完成人工驗收與展示。
進場檢核與作品接力
- 具備第 27 章成果：完成可操作的 mock 同步原型；真實 GAS 串接列為有完整步驟的延伸：不看答案，展示或口述第 27 章成果，並說出一項可見證據。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 27 章產物：完成可操作的 mock 同步原型；真實 GAS 串接列為有完整步驟的延伸
本章輸出：以自己的 Production URL 與 commit 完成格式預檢，再由教師或同儕人工驗收與展示
產物類型：mainline；後續用途：結業展示與個人後續維護
PROBLEM & ANALOGY
郵遞區號通過，不等於店裡是你的作品
第 27 章 mock queue 歸零只證明模擬復原流程；本章才處理真實部署。Production deploy 是正式開門、URL 是店址、commit 是施工版本、deploy log 是施工紀錄、rollback 是先回到可用版本。
本章要解決：deploy success、網址格式正確與功能驗收是三個不同層級，不能用工具綠字互相取代。
結業邊界：沒有驗收者實際開站、查 commit、看手機操作，就只能標記待補驗。
把名詞對回畫面與程式
- Production URL
- 他人可開啟的正式作品地址，不是 localhost 或 example.com。
- deploy root
- 發布時直接包含 index.html 的根目錄。
- commit SHA
- 可在 repo history 找到、能對應線上版本的識別。
- 手機驗收
- 關閉 Wi-Fi 用行動網路實際操作。
- textContent
- 安全產生展示草稿文字，避免輸入變成 HTML。
SCOPE
格式預檢與人工驗真的邊界
格式預檢
HTTPS、拒絕 localhost／example、7–40 位 SHA、描述長度與自我勾選。
真實證據
URL 是否本人作品、commit 是否存在且對版、手機是否真的操作。
刻意延後
自訂網域 DNS 細節、正式監控與完整 CI/CD。
CORE IDEAS
交付的是可重現的證據鏈
- 發布根目錄必須直接包含
index.html；deploy success 不保證功能成功。 - Production URL 要在無痕視窗與他人裝置打開，不使用本機或範例網域。
- commit 從 repo history 複製；格式合格仍要由驗收者確認存在與內容。
- 手機勾選只是一段輸入，必須關 Wi-Fi 用行動網路實際操作。
- 新部署壞掉時先 rollback 恢復可用版本，再修正、commit、重部署與重驗。
DEBUGGING & SECURITY
先讀部署證據，再重拖資料夾
課堂刻意錯誤：拖入不含根目錄 index.html 的上層資料夾；或使用大小寫不同的 CSS 路徑，造成本機正常、線上 404。
- 確認 URL 與 deploy 狀態，讀 deploy log 與實際發布根目錄。
- 在無痕視窗重現，開 Network 看 404，逐字比對檔名大小寫。
- 確認輸入 SHA 存在 repo，且線上內容對應該版本。
- 手機關 Wi-Fi 重測主要互動與錯誤狀態。
- 輸入 XSS 測試字串；展示稿只能用
createElement()、textContent，不得產生 img 或執行。
部署成功但網站壞掉
先查：看 deploy root、deploy log 與線上 Network 404，再比對檔名大小寫。
格式通過但作品不是自己的
先查：在無痕視窗由他人開 URL，確認內容、功能與版本。
展示草稿有注入風險
先查：輸入 XSS 字串，確認使用 createElement 與 textContent。
PRACTICE CONTRACT
Starter 到 Solution 只增加預檢能力，不填假證據
開始前先確認這四件事
- 我已準備 Production URL、commit SHA 與展示描述。
- 我知道格式預檢不能取代人工驗收。
- 我會用他人裝置與手機行動網路開站。
- 我會檢查部署根目錄、版本對應與 XSS 輸出。
預檢 Production URL 格式
檔案：script.js
位置：isProductionUrl()
結果：拒絕 example.com、localhost 與非 HTTPS 網址
預檢 commit、問題描述與手機勾選
檔案：script.js
位置：collectEvidence()
結果：拒絕空白或過短 commit，並列出待修格式
安全產生期末展示草稿
檔案：script.js
位置：buildShowcase()
結果：以 textContent 與 createElement 產生草稿，明列仍待人工驗收
EVIDENCE
結業前的人工驗收
30 秒說法可以直接照這個句型練習：
驗收者在 ______ 開啟 Production URL ______；commit ______ 存在於 history；手機用 ______ 完成 ______。
只有 URL、版本、功能與手機三類人工證據齊全才可結業；不要公開 token 或私人資料。
格式預檢通過後，驗收者必須留下姓名、時間與一項實際觀察；工具畫面不得取代簽核。
- 驗收者用自己的裝置與網路開啟 URL。
- 到 repo history 確認 SHA 存在並查看修改內容。
- 比對線上功能與版本，操作導覽、主要互動與錯誤狀態。
- 學生手機關 Wi-Fi，以行動網路重新操作。
- 以「問題 15 秒、做法 15 秒、成果 20 秒、排錯 10 秒」完成展示。
結業：三項人工證據齊全才算完成；只有格式預檢者列入待補驗。
階段關卡提交：先填需求拆解、證據清單與同儕回饋，再用四級 rubric 自評；第 3 級才算通過。開啟學生提交包