仮想空間（2Dマップ）を歩き回りながらデジタルコンテンツを購入できるオンラインマーケット。
- バックエンド: Hono + Drizzle ORM（Cloudflare Workers）
- フロントエンド: Angular + PixiJS
バックエンドとフロントエンドそれぞれで依存関係をインストールする。
# バックエンド（ルートディレクトリ）
npm install
# フロントエンド
cd frontend && npm installバックエンド: .dev.vars.example をコピーして .dev.vars を作成し、値を埋める。
cp .dev.vars.example .dev.vars# .dev.vars
JWT_SECRET=your_secret_here
STRIPE_API_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=xxx
LIVEKIT_API_KEY=devkey
LIVEKIT_API_SECRET=secret-at-least-32-chars-long!!
LIVEKIT_WS_URL=ws://localhost:7880
LIVEKIT_API_KEYとLIVEKIT_API_SECRETはlivekit.yamlのkeysと一致させる。ローカル開発ではdevkey: secret-at-least-32-chars-long!!を使用する。
Partykit: partykit/.env.example をコピーして partykit/.env を作成し、値を埋める。
cp partykit/.env.example partykit/.env# partykit/.env
JWT_SECRET=your_secret_here # バックエンドと同じ値を設定するはじめて起動する前、またはマイグレーションファイルに変更があった場合は以下を実行する。
npx wrangler d1 migrations apply kayaba-broadway --local初回セットアップ時はシードデータも投入する。
npx wrangler d1 execute kayaba-broadway --local --file=seeds/seed.sqlバックエンド（ルートディレクトリ）:
npm run dev
# http://localhost:8787フロントエンド（frontend/ ディレクトリ）:
cd frontend
npm run start
# http://localhost:4200Partykit（partykit/ ディレクトリ）:
cd partykit
npm run dev
# ws://localhost:1999Livekit（ルートディレクトリ）:
※ あらかじめdockerを使用できるようにしてください
npm run livekit:up
# ws://localhost:7880なお、LiveKit Serverを止める場合は
npm run livekit:downログを確認する場合:
npm run livekit:logs.vscode/launch.json に起動設定が用意されている。VS Code の「実行とデバッグ」パネルから以下を選択して起動できる。
| 設定名 | 説明 |
|---|---|
バックエンド (wrangler dev) |
バックエンドのみ起動（http://localhost:8787） |
フロントエンド (ng serve) |
フロントエンドのみ起動（http://localhost:4200） |
Partykit (partykit dev) |
Partykitのみ起動（ws://localhost:1999） |
フロント + バック 同時起動 |
バックエンドとフロントエンドを同時に起動 |
フロント + バック + Partykit 同時起動 |
3つすべてを同時に起動 |
npm run deployバックエンドのテストを実行する。
npx vitest runウォッチモードで実行する場合：
npx vitestnpm run deploynpm run cf-typegenWebSocket によるリアルタイムのキャラクター位置同期サーバー。
cd partykit
npm install.env.example をコピーして .env を作成し、値を埋める。
cp .env.example .env# partykit/.env
JWT_SECRET=your_secret_here本番環境へのデプロイ時は
npx partykit secret add JWT_SECRETでシークレットを登録する。
cd partykit
npm run dev
# ws://localhost:1999# インストール（未インストールの場合）
npm install -g wscat
# バックエンドでトークンを取得してから接続（クエリパラメータでトークンを渡す）
wscat -c "ws://localhost:1999/party/field-1?token=<accessToken>"
# 移動メッセージを送信
> {"message_type":"move","data":{"x":100,"y":200}}
userIdは接続時の JWT のidから決定されます。moveメッセージにuserIdを含めても無視されます。
cd partykit
npm run deployショップ内でのビデオチャットに LiveKit を使用する。プレイヤーが店舗ゾーンに入ると、フロントエンドがバックエンドの GET /shops/:id/livekit/token を呼び出し、返却された LiveKit token と WebSocket URL で LiveKit Server に接続する。店舗ゾーンから出る、別店舗へ移動する、またはゲーム画面を離れると切断される。
ローカル開発では Docker Compose で LiveKit Server と Redis を起動する。
npm run livekit:up主な設定ファイル:
docker-compose.yml: LiveKit Server と Redis の起動定義livekit.yaml: LiveKit Server の API key、secret、RTC port 設定.dev.vars: バックエンドが LiveKit token を発行するための環境変数
ローカルの既定値:
LIVEKIT_API_KEY=devkey
LIVEKIT_API_SECRET=secret-at-least-32-chars-long!!
LIVEKIT_WS_URL=ws://localhost:7880LIVEKIT_API_KEY / LIVEKIT_API_SECRET は livekit.yaml の keys と同じ値にする。値が一致しない場合、バックエンドで token は発行できても LiveKit Server 側で認証に失敗する。
- フロントエンドの
game.component.tsが現在の店舗 ID をもとにGET /shops/:id/livekit/tokenを呼び出す。 - バックエンドの
src/routes/shops.tsが認証済み JWT のidを LiveKit identity として token を生成する。 - フロントエンドの
LiveKitServiceがLIVEKIT_WS_URLと token を使って room に参加する。 - room 名は
shop-<shopId>になる。
LiveKit identity はフロントエンドから送られた任意値ではなく、バックエンドで検証済みのアクセストークンから決定される。
本番で LiveKit Cloud またはセルフホスト LiveKit を使う場合は、Workers の secret / vars に以下を設定する。
npx wrangler secret put LIVEKIT_API_KEY
npx wrangler secret put LIVEKIT_API_SECRET
npx wrangler secret put LIVEKIT_WS_URLLIVEKIT_WS_URL は LiveKit の WebSocket URL を指定する。
# LiveKit Cloud の例
wss://your-app.livekit.cloud
# セルフホストの例
wss://your-livekit.example.comセルフホストする場合は、LiveKit Server 側の keys と Workers 側の LIVEKIT_API_KEY / LIVEKIT_API_SECRET を揃える。
Angular + PixiJS による 2D マップ UI。
cd frontend
npm installcd frontend
npm start
# http://localhost:4200