메인 콘텐츠로 건너뛰기

​
컴포넌트

컴포넌트는 앱의 실행 가능한 부분입니다. 각 컴포넌트는 실행 방식을 결정하는 type을 가집니다.

​
UI 컴포넌트

UI 컴포넌트는 웹 프론트엔드입니다 — React, Vue, Svelte, 순수 HTML 또는 포트에서 제공되는 모든 프레임워크입니다. 
{ name: 'Dashboard', type: 'ui', path: '.', runtime: { dev: 'bun run dev' } }
  • 앱당 최대 1개 — Kazzle은 앱당 단일 미리보기 URL을 할당합니다
  • runtime.dev — 개발 서버 명령어 (“미리보기 시작”에서 사용됨)
  • runtime.run — 프로덕션 빌드를 제공하는 명령어
runtime.dev가 설정되지 않으면 미리보기 시스템은 package.json에서 bun run dev를 실행합니다.

​
프로세스 컴포넌트

프로세스 컴포넌트는 백엔드 서비스, 워커 또는 예약된 작업입니다. 
{ name: 'API', type: 'process', path: './server/index.ts' }

​
라이프사이클: processMode

프로세스 컴포넌트는 두 가지 라이프사이클 중 하나를 가집니다:
  • processMode: 'persistent' (기본값) — 장기 실행 HTTP 서버입니다. 트리거는 선언된 path의 실행 중인 서버로 POST됩니다.
  • processMode: 'triggered' — 진입점 스크립트는 트리거당 한 번 생성되고 종료됩니다. 프로덕션에서 유휴 머신이 없습니다.

​
트리거

일정 및 웹훅 트리거는 컴포넌트에서 선언됩니다. 하나의 컴포넌트는 많은 트리거를 가질 수 있습니다. 각 트리거는 name (컴포넌트 내에서 고유) 및 kind를 가집니다. 
{
  name: 'events',
  type: 'process',
  path: './components/events/index.ts',
  processMode: 'persistent',
  triggers: [
    { name: 'cleanup', kind: 'schedule', schedule: '0 * * * *', path: '/cron/cleanup' },
    { name: 'stripe',  kind: 'webhook',                          path: '/webhook/stripe' },
  ],
}
path는 processMode: 'persistent'에 필수입니다. processMode: 'triggered'의 경우 생략됩니다 — 스크립트는 대신 환경에서 TRIGGER_NAME을 읽습니다. 전체 트리거 모델, 환경 변수 계약 및 HTTP 인증 헤더는 자동화를 참조하세요.

​
런타임 명령어

단계실행 시점예시
dev초안 미리보기 중bun run dev, vite, next dev
run프로덕션에서bun run start, node dist/server.js
초안 미리보기 패키지 스크립트는 kazzle run -- <command>를 사용할 수 있으므로 Kazzle이 로컬 포트와 형제 컴포넌트 URL을 주입할 수 있습니다. 프로덕션 프로세스 컴포넌트는 배포가 프로덕션 이미지에서 해당 명령어를 실행하기 때문에 runtime.run에 실제 명령어를 선언해야 합니다.