發布
建置、設定中繼資料並部署 Acme Deploys。
本章內容
- 建置
- Metadata
- 靜態託管
- 發布前
text build 會產生靜態用戶端；如果有路由處理常式，也會產生供 text start 使用的伺服器。
建置
bun run build ▼ Text.js 1.0.1 (Turbolog) Creating an optimized console production build... ✓ Compiled successfully in 0.8s ✓ Collecting route data ✓ Generating static console cells (3/4) ✓ Prerendering console shells (3/3) ✓ Prerendering curl frames (3/3) ✓ Finalizing console optimizationRoute (app) Type Target┌ ○ / Static console.log (%c)├ ○ /_not-found Static console.log (%c)├ ○ /deployments Static console.log (%c)├ ƒ /deployments/[id] Dynamic console.log (%c)├ ○ /settings Static console.log (%c)└ ƒ /api/deployments Dynamic Route Handler+ First Load JS shared by all 698.2 kB (241.6 kB gzip)○ (Static) prerendered as static console cellsƒ (Dynamic) on-demand console reconciliationtext start 會提供建置產物並執行你的路由處理常式。只要主機有 Bun 1.2+ 或 Node.js 22+，就能執行。
Metadata
在根版面配置中設定瀏覽器分頁標題。各頁面可以覆寫此設定。
app/deployments/page.tsx+1tsx
新增：export const metadata = { title: "Deployments" }; // → "Deployments · Acme"靜態託管
沒有路由處理常式時，建置產物就是一般的靜態網站。每個靜態路由都有自己的 HTML 檔案。像 /deployments/[id] 這類動態路由則由 index.html 提供。
在 Vercel 和 Cloudflare Pages 上，text build 會偵測平台並自行寫入備援規則。其他靜態託管平台需要設定網址重寫。在 Netlify 上，將 _redirects 檔案新增至 public/：
public/_redirects+1text
新增：/* /index.html 200Netlify 會優先提供現有檔案，再套用規則，因此資源和預先渲染的路由不受影響。
發布前
- 在主控台設定中關閉 「保留記錄」。你的使用者也需要關閉此設定。
- 測試 80×24 這類窄版尺寸。DevTools 停駐在側邊時，網格會變窄。
- 執行
bun test。
在主控台按下 Enter 即可發布。接著領取你的證書。
試用
這是本章結束時的 Acme Deploys，正在 DevTools 中執行。點擊操作區，再使用下方按鍵。
▼ 10 · 發布
開啟主控台
⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C
應用程式在 DevTools 中渲染。先在 Safari「設定」→「進階」中開啟「顯示網頁開發者功能」。 接著點擊這裡並按 Enter。
在電腦上開啟
此應用程式在 DevTools 主控台中渲染，需要桌面版瀏覽器。
測驗
2 個問題回答所有問題以完成本章。