> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kazzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# コンポーネント

> UI とプロセスコンポーネント。

# コンポーネント

コンポーネントはアプリの実行可能な部分です。各コンポーネントには、実行方法を決定する `type` があります。

## UI コンポーネント

UI コンポーネントは Web フロントエンド — React、Vue、Svelte、プレーン HTML、またはポートで提供される任意のフレームワークです。

```typescript theme={"theme":"material-theme-darker"}
{ name: 'Dashboard', type: 'ui', path: '.', runtime: { dev: { command: 'bun run dev' } } }
```

* **アプリあたり最大 1 つ** — Kazzle はアプリごとに 1 つのプレビュー URL を割り当てます
* `runtime.dev.command` — dev サーバーのコマンド（「プレビューを開始」で使用）
* `runtime.prod.build` — 本番イメージをビルドするコマンド
* `runtime.prod.command` — 本番プロセスコンポーネントを開始するコマンド

`runtime.dev.command` が設定されていない場合、プレビューシステムは `package.json` から `bun run dev` を実行します。

## プロセスコンポーネント

プロセスコンポーネントはバックエンドサービス、ワーカー、またはスケジュール済みタスクです。

```typescript theme={"theme":"material-theme-darker"}
{ name: 'API', type: 'process', path: './server/index.ts' }
```

### ライフサイクル: `processMode`

プロセスコンポーネントには 2 つのライフサイクルのいずれかがあります:

* `processMode: 'persistent'`（デフォルト）— 長時間実行される HTTP サーバー。トリガーは実行中のサーバーの宣言された `path` に POST されます。
* `processMode: 'triggered'` — エントリスクリプトはトリガーごとにスポーンされて終了します。本番環境でアイドル状態のマシンはありません。

### トリガー

スケジュールと Webhook トリガーはコンポーネント上で宣言されます。1 つのコンポーネントは多くのトリガーを持つことができます。各トリガーには `name`（コンポーネント内で一意）と `kind` があります。

```typescript theme={"theme":"material-theme-darker"}
{
  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 認証ヘッダーの詳細については、[オートメーション](/work/automations)を参照してください。

## ランタイムコマンド

| フェーズ                   | 実行時期       | 例                                     |
| ---------------------- | ---------- | ------------------------------------- |
| `runtime.dev.command`  | ドラフトプレビュー中 | `bun run dev`、`vite`、`next dev`       |
| `runtime.prod.command` | 本番環境       | `bun run start`、`node dist/server.js` |

ドラフトプレビューパッケージスクリプトは `kazzle run -- <command>` を使用できるため、Kazzle はローカルポートと兄弟コンポーネント URL を注入できます。本番プロセスコンポーネントは、デプロイが本番イメージでそのコマンドを実行するため、`runtime.prod.command` に実際のコマンドを宣言する必要があります。