コンテンツにスキップ
HaneDOCSEN

アプリを作る

ローカル開発

Hane の公開 API・コンソール・参照アプリを手元で起動し、作りもののデータでアプリを作って試す方法です。

このページでは、Hane を手元の 1 台で起動して、アプリの開発に使う方法を説明します。手元の環境は Cloudflare のアカウントも LLM の鍵も要らず、外へのメールや電話は emulator が受けるので、外には何も送りません。

もの 使うところ
Node.js 22.13 以上と pnpm 10 開発サーバーと試験
Docker 文書のマルウェア検査(ClamAV)と、CLI のサンドボックス。使わなければなくても起動します
Codex CLI か Claude Code driver: codex・driver: claude の Agent を手元で動かすときだけ。手元でログインしておきます
  1. 依存を入れて開発サーバーを起動する

    ターミナルウィンドウ
    pnpm install
    pnpm dev

    pnpm dev は、開発用の IdP、外部の事業者の emulator、公開 API の入口と共通 API、コンソール、参照アプリをまとめて起動します。

  2. 作りもののデータを入れる

    別の端末で seed を流します。開発用の組織 acme・利用者・プロジェクト fleet と、参照アプリのサービスアカウントと API キー、定義、データを、公開 API と hanectl で入れます。

    ターミナルウィンドウ
    pnpm dev:seed

    参照アプリの API キーは examples/fleet/.dev.vars に書かれます。このファイルは Git に入れません。

  3. 画面を開く

    ブラウザでコンソール(http://localhost:5173)か参照アプリ(http://localhost:5174)を開き、開発用の IdP の画面で利用者を選んでログインします。パスワードはありません。

URL 中身 ログインする利用者
http://localhost:8787 公開 API の入口 API キーかアクセストークン
http://localhost:8788 開発用の IdP(OIDC、PKCE) —
http://localhost:5173 コンソール 開発 管理者(owner@example.test)
http://localhost:5174 参照アプリ(車両リース管理) 車両 担当(fleet@example.test)
http://localhost:8789 emulator。Hane が送ったメールなどを見られます —
http://localhost:5175 UI ライブラリのカタログ(pnpm dev:ui で起動) —

利用者はすべて作りものです。承認の確かめには「承認 部長」(approver@example.test)、閲覧だけの権限の確かめには「閲覧 太郎」(viewer@example.test)でもログインできます。

seed は hanectl の context を .hane/hanectl.json に作ります。手元の開発用の IdP の利用者でログインし直すこともできます。

ターミナルウィンドウ
HANECTL_CONFIG=.hane/hanectl.json cli/hanectl/bin/hanectl.mjs rollout status
cli/hanectl/bin/hanectl.mjs login --dev-user owner@example.test --org acme --project fleet --env dev

--dev-user は手元の開発用の IdP からだけ id_token を取ります。アクセストークンは 15 分で切れますが、--dev-user でログインした context は hanectl が自動で取り直します。

自分のアプリを手元の Hane につなぐ

Section titled “自分のアプリを手元の Hane につなぐ”

自分のアプリの BFF は、参照アプリと同じく手元の入口(http://localhost:8787)を呼びます。利用者のログインには開発用の IdP(http://localhost:8788)の認可コードと PKCE を使い、得た id_token とアプリの API キーをトークン交換します。BFF の書き方は アプリの構成 と 認証 にあります。

定義を変えたら、hanectl apply の後に hanectl release create -f <bundle.yaml> --activate で有効なバージョンを作り直します。

pnpm dev の既定のプロファイル local では、driver: llm の Agent は emulator の決まった応答で動き、CLI のドライバーは動きません。手元の CLI で Agent を動かすときは、開発サーバーを止めてからプロファイルを選びます。

ターミナルウィンドウ
pnpm dev:stop
HANE_DEV_PROFILE=local-claude pnpm dev # Claude Code を使う。Codex CLI なら local-codex
コマンド すること
pnpm dev:stop pnpm dev と pnpm dev:scanner が起動したものを止める
pnpm dev:reset 手元の状態(.hane/)を消す。必ず pnpm dev:stop の後に実行する
pnpm dev:scanner 別の端末で、文書の検査に使う ClamAV の Docker コンテナを起動する
pnpm dev:smoke 満了対応の縦断が公開 API で通るかを確かめる

スコープや定義の名前を変えたときは、pnpm dev:reset → pnpm dev → pnpm dev:seed で作り直します。seed が前に作ったサービスアカウントは、古いスコープのまま残るためです。

作りもののデータは 2026-10-30 を今日として作ってあります。日がたつと、毎日の検知に掛かる契約や期限までの日数が変わります。