---

name: moonbit-luna-ui description: MoonBit + Luna UI (Sol Framework) でのWebアプリ開発。MoonBitコード、Solルーティング、Island Components、Server Actions、D1データベース、Cloudflare Workersデプロイに使用

MoonBit + Luna UI 開発ガイド

MoonBitとLuna UI (Sol Framework) を使用したCloudflare Workers向けWebアプリケーション開発のノウハウ。

技術スタック概要

プロジェクト構成

Copyproject/
├── app/
│   ├── server/
│   │   ├── routes.mbt      # ルーティング・ページ・API定義
│   │   ├── db.mbt          # D1 FFIバインディング
│   │   └── _using.mbt      # 共通インポート
│   ├── client/
│   │   ├── *.mbt           # Island Components
│   │   └── _using.mbt
│   └── __gen__/            # 自動生成（.gitignore推奨）
├── src/
│   └── worker.ts           # Cloudflare Workerエントリーポイント
├── static/
│   └── loader.js           # Luna UIハイドレーションローダー
├── scripts/
│   ├── patch-for-cloudflare.js  # CF Workers用パッチ
│   └── bundle-client.js         # クライアントバンドル
├── moon.mod.json           # MoonBit設定
├── wrangler.json           # Cloudflare設定
└── .sol/                   # Sol生成物（.gitignore推奨）

ビルドプロセス

Copy# 完全ビルド
pnpm build
# 内部で実行される処理:
# 1. sol generate        - __gen__と.solを生成
# 2. moon build --target js  - MoonBitをJSにコンパイル
# 3. patch-for-cloudflare.js - CF Workers用にパッチ
# 4. bundle-client.js    - Island Componentsをバンドル

wrangler.jsonでの自動ビルド設定

Copy{
  "build": {
    "command": "pnpm build",
    "watch_dir": ["src", "app"]
  }
}

詳細リファレンス

• ルーティングとページ定義 → SOL-ROUTING.md
• Island Components → ISLAND-COMPONENTS.md
• Server Actions → SERVER-ACTIONS.md
• MoonBit FFIパターン → MOONBIT-FFI.md
• Cloudflare Workersデプロイ → CLOUDFLARE-DEPLOY.md

クイックリファレンス

ルート定義（routes.mbt）

Copypub fn routes() -> Array[@router.SolRoutes] {
  [
    @router.SolRoutes::Page(
      path="/",
      handler=@router.PageHandler(home_page),
      title="Home",
      meta=[], revalidate=None, cache=None,
    ),
    @router.SolRoutes::Post(
      path="/api/posts",
      handler=@router.ApiHandler(api_create_post),
    ),
  ]
}

Island Component（クライアント）

Copypub fn my_component(props : MyProps) -> DomNode {
  let count = @signal.signal(0)

  div(class="container", [
    button(
      on=events().click(fn(_) { count.set(count.get() + 1) }),
      [text_of(count)]
    )
  ])
}

Server Action

Copylet create_action : @action.ActionHandler = @action.ActionHandler(async fn(ctx) {
  let body = ctx.body
  let data = parse_json(body)
  // 処理...
  @action.ActionResult::ok({ message: "Success" })
})

pub fn action_registry() -> @action.ActionRegistry {
  @action.ActionRegistry::new(allowed_origins=[
    "http://localhost:8787",
    "https://your-app.workers.dev",
  ]).register(
    @action.ActionDef::new("create", create_action)
  )
}

D1 FFI

Copyextern "js" fn db_query(sql : String) -> @core.Promise[@core.Any] =
  #| async (sql) => {
  #|   const db = globalThis.__D1_DB;
  #|   return await db.prepare(sql).all();
  #| }

よくある問題と解決策

403エラー（Server Actions）

→ action_registry()のallowed_originsに本番ドメインを追加

CSSが適用されない（Island Component）

→ CSSクラス名がroutes.mbtのスタイル定義と一致しているか確認

ビルド後にモジュールエラー

→ scripts/patch-for-cloudflare.jsでCF Workers非互換コードをパッチ

デプロイ時にビルドされない

→ wrangler.jsonにbuild.commandを設定