End-to-End Case Study：從 Commit 到使用者看到 Course List

Learning outcomes

• 能畫出 code → GitHub → CI → deploy → DNS → HTTPS → API → DB → render。
• 能把常見錯誤放到正確 failure layer。
• 能根據 evidence 排除不相關 hypothesis。
• 能提出最小驗證步驟，而不是一次改很多層。

1. 開發與發布路徑

Developer edits
  ↓
git commit
  ↓
git push
  ↓
GitHub main
  ↓
CI
  ↓
build artifact
  ↓
deploy
  ↓
production URL

2. 使用者 Request 路徑

User enters URL
  ↓
DNS
  ↓
network / port / TLS
  ↓
HTTP GET /
  ↓
HTML/CSS/JS
  ↓
Browser runtime
  ↓
GET /api/courses

3. Server/Data 路徑

API request
  ↓
authentication
  ↓
authorization
  ↓
SQL SELECT
  ↓
database rows
  ↓
JSON response
  ↓
Browser state
  ↓
DOM render

4. Incident A：Domain 正常，但 /api/courses 500

DNS 與 TLS 已至少成功到能收到 HTTP 500。重點應轉向 server logs、database query、environment，而不是再改 DNS。

5. Incident B：API 200，畫面卻空白

Network:
200 OK
[
  {"id":1,"title":"JS"}
]

Console:
TypeError ...

Network/server 可能已成功；下一步查 parse/state/render。

6. Incident C：新 code GitHub 有，production 還是舊版

查 production deployment 對應 commit SHA、workflow run、artifact/version，而不是只看 repository latest commit。

Project checkpoint：Request Journey Map Final

Source
 → Git
 → GitHub
 → CI
 → Build
 → Deploy
 → DNS
 → IP/Port
 → TLS/HTTP
 → Browser runtime
 → API
 → Auth
 → Database
 → JSON
 → State
 → DOM

之後所有進階課程都只是把這張圖某一段放大。

7. Diagnostic routine

1. Reproduce
2. Identify layer
3. Find last success
4. Find first failure
5. Gather evidence
6. Form one hypothesis
7. Minimal experiment
8. Verify regression