Phát hành

Build, đặt siêu dữ liệu và triển khai Acme Deploys.

Ứng dụng của chương này đang chạy trong console của bạn. Mở console bằng ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (bật tính năng dành cho nhà phát triển trước), rồi dùng thử.
Xem chương3:04

Trong chương này

  • Biên dịch
  • Metadata
  • Lưu trữ tĩnh
  • Trước khi triển khai

text build tạo bản client tĩnh và, nếu có route handler, một máy chủ cho text start.

Biên dịch

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 reconciliation

text start phục vụ bản build và chạy các route handler của bạn. Lệnh này chạy trên bất kỳ máy chủ nào có Bun 1.2+ hoặc Node.js 22+.

Metadata

Đặt tiêu đề thẻ trình duyệt trong layout gốc. Các trang có thể ghi đè tiêu đề này.

app/deployments/page.tsx+1tsx
Đã thêm: export const metadata = { title: "Deployments" }; // → "Deployments · Acme"

Lưu trữ tĩnh

Khi không có route handler, bản build là một trang web tĩnh thông thường. Mỗi route tĩnh có tệp HTML riêng. index.html phục vụ các route động như /deployments/[id].

Trên Vercel và Cloudflare Pages, text build nhận diện nền tảng và tự ghi cấu hình dự phòng đó. Các dịch vụ lưu trữ tĩnh khác cần quy tắc rewrite. Trên Netlify, thêm tệp _redirects vào public/:

public/_redirects+1text
Đã thêm: /*  /index.html  200

Netlify phục vụ các tệp hiện có trước khi áp dụng quy tắc, nên tài nguyên và các route đã prerender không bị ảnh hưởng.

Trước khi triển khai

  • Tắt Lưu giữ nhật ký trong cài đặt console. Người dùng của bạn cũng cần tắt tùy chọn này.
  • Kiểm tra kích thước hẹp như 80×24. DevTools neo ở bên cạnh tạo ra lưới hẹp.
  • Chạy bun test.

Nhấn Enter trong console để triển khai. Sau đó nhận chứng chỉ của bạn.

Dùng thử

Đây là Acme Deploys ở cuối chương, đang chạy trong DevTools. Nhấp vào vùng focus, rồi dùng các phím bên dưới.

▼ 10 · Phát hành

Mở console

⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C

Ứng dụng render trong DevTools.Trước tiên bật “Hiển thị tính năng cho nhà phát triển web” trong Cài đặt Safari → Nâng cao. Sau đó nhấp vào đây và nhấn Enter.

Mở trên máy tính

Ứng dụng này render trong console của DevTools, cần trình duyệt trên máy tính.

Bài trắc nghiệm

2 câu hỏi

Trả lời mọi câu hỏi để hoàn thành chương.

Dịch vụ lưu trữ tĩnh cần gì cho route động?

 

Nên tắt cài đặt console nào?