출시
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
루트 레이아웃에서 브라우저 탭 제목을 설정하세요. 페이지에서 이 값을 재정의할 수 있어요.
추가: export const metadata = { title: "Deployments" }; // → "Deployments · Acme"정적 호스팅
라우트 핸들러가 없으면 빌드 결과는 일반 정적 사이트예요. 각 정적 라우트에는 별도의 HTML 파일이 생성돼요. /deployments/[id] 같은 동적 라우트는 index.html로 제공돼요.
Vercel과 Cloudflare Pages에서는 text build가 플랫폼을 감지하고 해당 폴백을 직접 작성해요. 다른 정적 호스트에는 리라이트가 필요해요. Netlify에서는 public/에 _redirects 파일을 추가하세요:
추가: /* /index.html 200Netlify는 규칙을 적용하기 전에 기존 파일을 먼저 제공하므로 에셋과 프리렌더링된 라우트는 영향을 받지 않아요.
배포 전 확인 사항
- 콘솔 설정에서 ‘로그 보존’을 끄세요. 사용자도 이 설정을 꺼야 해요.
- 80×24 같은 좁은 크기에서 테스트하세요. DevTools를 측면에 도킹하면 그리드가 좁아져요.
bun test를 실행하세요.
콘솔에서 Enter를 눌러 배포하세요. 그런 다음 수료증을 받으세요.
사용해 보기
이 장을 마쳤을 때의 Acme Deploys 앱이 DevTools에서 실행 중이에요. 패드를 클릭한 뒤 아래 키를 사용하세요.
콘솔 열기
앱은 DevTools에서 렌더링돼요.먼저 Safari 설정 → 고급에서 ‘웹 개발자용 기능 보기’를 켜세요. 그다음 여기를 클릭하고 Enter를 누르세요.
데스크톱에서 열기
이 앱은 DevTools 콘솔에서 렌더링되므로 데스크톱 브라우저가 필요해요.
퀴즈
질문 2개장을 완료하려면 모든 문제에 답하세요.