本簡報以 16:9 橫向為主
請旋轉手機
或改用平板 / 桌機觀看
D10 你會寫 HTML/CSS/JS、會請 AI 幫你做前端。
D11 我們補上兩件「真的要上線才會用到」的事——
版本控制讓你不怕改壞，後端代理讓你的 API 金鑰能光明正大公開部署。
會寫程式 ≠ 能上線。 能上線，是會反悔＋不外洩。
Git 讓你每一次改都有後路；環境變數＋後端代理讓你的 AI 工具能
公開部署也不怕被盜刷。這兩件事學會之前，做得再漂亮的工具都只能在自己電腦跑。
不只是「聽過 Git」，而是「離開教室就有一個含後端的工具公開部署在網路上」。
Word 的存檔，是「蓋掉上一個版本」。
Git 的 commit，是「留下每一個版本，永遠可以回去」。
暫存區（Staging）的存在，是讓你「改了五個檔，這次只挑三個進 commit」——commit 才能精準。
Working Directory
你正在編輯的檔案，存在硬碟上的本體
edit · save
Staging Area
準備要 commit 的修改清單，可以挑進挑出
git add <file>
Repository
永久保存的快照，每個都有 message 說明為何而改
git commit -m "..."
所以你寫的 message 不該重複它。要寫的是「我為什麼決定這樣改」。
在專案根目錄建一個叫 .gitignore 的檔，每行一個 pattern——這些檔案 Git 會完全當作不存在。
git add . → git commit -m "..." → git push。四個動作就是你後半輩子的工程節奏。
git status。它會告訴你哪些檔被改、哪些已 add、哪些還沒——九成的卡關都是搞不清現在處於哪個階段。git restore --staged <file>。把已 add 的檔退回工作區，但不會丟掉你的修改內容。git commit --amend -m "新訊息"。只能改最後一個 commit；如果已經 push 了則需要 -f 強推（多人專案先問清楚）。git pull --rebase 把遠端新東西拉下來，再 push。九成發生在你忘記 pull 直接 commit 的時候。不會 Git 的人， 不敢大膽改、大膽試。 這就是區隔「業餘」與「專業」的那條線。
接下來 CH5-4 我們把這個能力升級——學會把 API 金鑰藏好、把含後端的 AI 工具公開部署。
前端寫死 API key 等於把家裡鑰匙貼在大門外。
這一幕教你怎麼把鑰匙搬到後端，前端只跟你的後端講話。
D10 學的個人作品頁、PRAC4-1/2 那種純前端工具——靜態就夠。但只要有 API 金鑰、要存資料、要跨裝置同步，就必須上後端。
三題裡任一題是「要」，就需要後端（或 BaaS 像 Supabase 也算）。
網路爬蟲一直在掃 GitHub 找暴露的金鑰，速度比你想的快。先建立鐵則，再學技術。
ANTHROPIC_API_KEY=sk-ant-...
OPENAI_API_KEY=sk-...
PORT=3000
真的金鑰放這裡，自己機器才看得到。
.env
.env.local
node_modules/
擋住 .env 進 git。每個專案的第一個檔。
ANTHROPIC_API_KEY=
OPENAI_API_KEY=
PORT=3000
給其他人（或未來的自己）看「需要哪些變數」，留欄位但不填值。
不用學整個後端框架——只要一條路由：前端 POST 過來 → 後端讀 .env 的 key → 呼叫 Anthropic → 回傳結果。Python Flask 版概念完全一樣，約 20 行。
dotenv 套件把 .env 載進 process.env。Anthropic SDK 會自動讀 ANTHROPIC_API_KEY，不用手動傳。fetch("/api/ask", {method:"POST", body: JSON.stringify({prompt})}) 把問題送過來。後端在 req.body 拿到。res.json() 送回去。前端 fetch 拿到後渲染到畫面上。確認 .env 在 .gitignore 裡，再 git push。
Railway 登入用 GitHub 帳號 → New Project → 選你的 repo。
Variables 頁籤 → 把 .env 裡的每行貼上去。這是金鑰真正放的地方。
Railway 自動偵測 package.json → npm install → npm start。看 Logs 確認沒錯誤。
Settings → Generate Domain → 拿到 .up.railway.app 公開網址。
git push。Railway 偵測到新 push 自動重新部署，不用回平台操作。
"scripts": {"start": "node server.js"}，Railway 不知道怎麼跑你的程式。app.listen(3000) 不行——Railway / Render 會動態指派 port。要寫 app.listen(process.env.PORT || 3000)。http://localhost:3000。要改成相對路徑 /api/ask，或 Railway 給的網址。看懂後端代理只需要 30 分鐘。 第一次跑通整套大概要踩三個坑。 所以接下來兩個 PRAC 我們現場一起踩。
PRAC5-3 先做純前端的作品集首頁練 Git 部署節奏；
PRAC5-4 再上含後端的完整工具，把今天所有觀念串成一條工作流。
你前面做的 PRAC4-1 ~ PRAC4-4、PRAC5-1 v2，散落在不同 URL。
這一節把它們整合成一張首頁——同時也是練 Git push 的最好機會。
每張卡 = 一個工具：名稱 + 一句話說明 + 連結。產出後 git push，PRAC5-2 設過的部署會自動更新。
把 PRAC4-1 ~ PRAC4-4、PRAC5-1 v2 全列出來。挑 3 ~ 6 個最完整的。
打開 PRAC5-3 內建生成器，每個工具填名稱、一句話說明、連結。
點「生成首頁 HTML」→ 複製到 portfolio.html。瀏覽器開來確認樣式。
git add / commit / push。Vercel 偵測到新 push 自動重新部署，等 60 秒拿到網址。
優點：repo 改名 / 換 domain 都不用改連結。
優點：每個工具獨立 repo / 獨立部署，可單獨更新。
D11 最重的 PRAC。
做完你會帶走一個含後端的 AI 工具，部署在公開網址上，金鑰放在 Railway 環境變數。
不用從零寫——直接複製 CH5-4 的 server.js 當起點，改 prompt 邏輯就好。前端可以是任何一個你之前做過的 PRAC4 工具。
mkdir my-ai-backend
cd my-ai-backend
npm init -y
npm i express
@anthropic-ai/sdk dotenv
// 貼 CH5-4 server.js
.env
.gitignore
.env.example
node server.js
localhost:3000
確認 AI 回得來
git push
Railway 連 repo
填 ENV → 拿網址
本機你的 .env 在自己電腦上有效。Railway 看不到你電腦——它要用自己的環境變數。沒填，就只有「undefined」。
node server.js 會讀這個
部署版本會讀這個
git rm --cached .env + 立刻去 Anthropic 後台 revoke 那把金鑰、產新的。
"engines":{"node":">=18"}）。process.env.PORT || 3000。cors 套件 → app.use(cors())。或乾脆讓 Express 用 express.static 一起服務前端。
D11 你學會了完整工作流——慢、扎實。
D12 我們用同一套工作流，一天速做八個小工具：抽籤器、看板、倒數牆、Kanban……
讓「全端部署」從第二次開始變成肌肉記憶。
今天你帶走了會反悔（Git）+ 會藏鑰匙（.env）+ 會上線（Railway）——
明天我們把這套工作流跑八次，讓它變成你身體的一部分。