第六課：中間件 (Middleware) 與生產部署 (Deployment)
核心觀念：Middleware 是什麼？
中間件是站在「請求 (Request)」與「頁面 (Page)」之間的一道關卡。每當有人點擊你的網站，中間件會先執行。這非常適合用來處理：身份驗證、重定向、或是統一修改 HTML 字體。
1. 手把手實作：建立中間件
請建立檔案 src/middleware.ts（這是一個特殊的檔名）：
import { defineMiddleware } from 'astro:middleware'
export const onRequest = defineMiddleware(async (context, next) => {
console.log(`有人訪問了：${context.url.pathname}`)
// 範例：簡單的權限檢查
if (context.url.pathname.startsWith('/admin')) {
// 如果沒有登入（這裡模擬邏輯），就跳轉回首頁
return context.redirect('/')
}
// 繼續執行後續的請求
const response = await next()
return response
})
2. 手把手實作：環境變數 (.env)
在部署時，你絕對不能把 API Key 或資料庫密碼寫在代碼裡。
- 在專案根目錄建立
.env：SECRET_PASSWORD=astro_is_cool - 在
.astro或.ts檔案中使用：
---
const password = import.meta.env.SECRET_PASSWORD;
---
3. 手把手實作：部署到 Vercel / Netlify
這是最令人興奮的一步。因為你之前已經執行過 npx astro add vercel（或 node），現在你只需要：
- 將代碼推送到 GitHub。
- 登入 Vercel，點擊 Add New Project。
- 匯入你的 GitHub 儲存庫。
- 重點：如果在
.env有設定變數，記得在 Vercel 的 Environment Variables 介面也填入。 - 點擊 Deploy。
📝 最終結業練習題
任務目標：完成一個具有「保護機制」的開發者專區。
- 在
src/pages/下建立一個admin.astro頁面。 - 在
src/middleware.ts中撰寫邏輯：如果使用者訪問/admin且 URL 參數沒有包含?pass=123，就將其重定向到首頁。 - 提示：使用
context.url.searchParams.get('pass')。 - 性能檢查：執行
npm run build。觀察終端機輸出的檔案大小，看看 Astro 是如何 將你的 React 組件和 Markdown 打包成極小的檔案。 - 最終挑戰：將這個專案成功部署到網路上，並把網址分享給朋友。
第六課練習題實作放在下一篇 ( 我也是第一次學習，自己試作，不一定是對的喔👍 )
🎓 課程結業總結
你現在已經具備了 Astro 5.x 的核心實戰能力：
- 靈活的路由系統：利用
[id].astro處理動態內容。 - Content Layer API：以最專業的方式管理 Markdown 資料。
- 混合渲染：精確控制
client:visible與server:defer的時機。 - 全端能力：透過 Actions 與 Middleware 處理複雜邏輯。
