UUID おみくじ (UUID Omikuji)

🎲 UUIDで運勢を占うジョークサイト

⚠️ このサイトは完全にエンターテインメント目的です。UUIDと運勢には科学的根拠は一切ありません。

🌟 特徴

• ハイブリッドWASM実行:
  • 🖥️ サーバーサイド（Node.js）: OGP生成、SSRで高速レンダリング
  • 🌐 クライアントサイド（ブラウザ）: インタラクティブなUI、リアルタイム処理
• サーバーサイドレンダリング: SEO最適化された初期表示
• 動的OGP: 結果に応じたOG画像を自動生成
• モノレポ構成: pnpm workspacesを使用した効率的な管理
• Next.js App Router: Server Components + Client Componentsのベストプラクティス
• 和風デザイン: 神社・御神籤をモチーフにした美しいUI
• Vercel Ready: すぐにデプロイ可能な設定

📦 プロジェクト構成

omikuji/
├── apps/
│   └── web/              # Next.js フロントエンド
│       ├── src/
│       │   ├── app/      # App Router
│       │   └── lib/      # WASM ラッパー
│       └── package.json
├── packages/
│   └── wasm/             # Rust + WASM パッケージ
│       ├── src/
│       │   └── lib.rs    # UUID処理ロジック
│       ├── Cargo.toml
│       └── package.json
├── package.json          # ルートpackage.json
└── pnpm-workspace.yaml

🚀 セットアップ

必要な環境

• Node.js 24以上（miseで管理）
• pnpm 9以上（miseで管理）
• Rust（miseで管理）
• wasm-pack

インストール

# miseのインストール（未インストールの場合）
curl https://mise.run | sh

# Node.js、pnpm、Rustのインストール（miseが.mise.tomlを読み込んで自動的にインストール）
mise install

# wasm-packのインストール
cargo install wasm-pack

# 依存関係のインストール
pnpm install

# WASMのビルド
pnpm build:wasm

💻 開発

ローカル開発サーバーの起動

# 開発サーバーを起動
pnpm dev

ブラウザで http://localhost:3000 を開きます。

WASMの再ビルド

pnpm build:wasm

🏗️ ビルド

# 本番ビルド
pnpm build

🧪 テスト

# すべてのテストを実行
pnpm test

# WASMのテストのみ
pnpm test:wasm

# Webのテストのみ
pnpm test:web

🔧 デバッグ・トラブルシューティング

ビルド環境の確認

# 開発環境の情報を表示
pnpm debug-env

このコマンドで以下の情報を確認できます：

• システム情報（OS、アーキテクチャ）
• Rust/Cargoのバージョン
• インストール済みのターゲット
• ディスク使用量
• ネットワーク接続状況

ローカルでVercelビルドをテスト

# Vercelと同じビルドプロセスを実行
pnpm vercel-build

このコマンドは、Vercelで実行されるビルドプロセスと同じ手順を実行します。

🚢 Vercelへのデプロイ

このプロジェクトは、Vercel環境で自動的にRustをセットアップしてWASMをビルドする設定が含まれています。

詳細なデプロイ手順は DEPLOYMENT.md を参照してください。

方法1: Git連携（推奨）

1. GitHubリポジトリにプッシュ

git add .
git commit -m "Add Vercel deployment with Rust setup"
git push origin main

2. Vercelダッシュボードで「New Project」
3. リポジトリを選択してインポート
4. 設定は vercel.json から自動的に読み込まれます
5. 「Deploy」をクリック

方法2: Vercel CLI

# Vercel CLIのインストール
npm i -g vercel

# プレビューデプロイ
vercel

# 本番デプロイ
vercel --prod

自動ビルドプロセス

デプロイ時に以下が自動的に実行されます：

1. ✅ Rustツールチェーンのインストール
2. ✅ wasm-packのインストール
3. ✅ WASMパッケージのビルド
4. ✅ Next.jsアプリケーションのビルド

初回デプロイは5-10分程度かかりますが、2回目以降はキャッシュにより高速化されます。

環境変数

現時点で環境変数は不要です。将来的に必要になった場合は、Vercelの環境変数設定で追加してください。

📝 カスタマイズ

運勢の種類を変更

apps/web/src/app/page.tsx の fortunes オブジェクトを編集します。

UUID処理ロジックの変更

packages/wasm/src/lib.rs を編集し、pnpm build:wasm で再ビルドします。

🧪 テクノロジースタック

• Frontend: Next.js 14 (App Router) + TypeScript
• Styling: Tailwind CSS
• WASM: Rust + wasm-pack
  • クライアントサイド: ブラウザで実行（@/lib/wasm）
  • サーバーサイド: Node.js で実行（@/lib/fortune-server）
• Package Manager: pnpm (workspaces)
• Deployment: Vercel

🏗️ アーキテクチャ

┌─────────────────────────────────────────────┐
│  クライアントサイド（ブラウザ）              │
│  ┌────────────────────────────────────────┐ │
│  │ Client Components                      │ │
│  │  ├─ useOmikuji()                       │ │
│  │  └─ @/lib/wasm ──> WASM (Browser)     │ │
│  │                     └─ generate_uuid() │ │
│  └────────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
              ↓ リダイレクト
┌─────────────────────────────────────────────┐
│  サーバーサイド（Node.js）                   │
│  ┌────────────────────────────────────────┐ │
│  │ Server Components                      │ │
│  │  ├─ /result/[uuid]                     │ │
│  │  └─ @/lib/fortune-server               │ │
│  │           └─> WASM (Node.js)           │ │
│  │                └─ calculate_fortune()  │ │
│  ├────────────────────────────────────────┤ │
│  │ OG Image API                           │ │
│  │  └─ /api/og?uuid=[uuid]                │ │
│  └────────────────────────────────────────┘ │
└─────────────────────────────────────────────┘

WASMの使い分け

環境	モジュール	用途	実行場所
クライアント	@/lib/wasm	UUID生成、インタラクション	ブラウザ
サーバー	@/lib/fortune-server	運勢計算、OGP生成、SSR	Node.js

📄 ライセンス

MIT

⚠️ 免責事項

このプロジェクトは完全にジョーク・エンターテインメント目的で作成されています。 UUIDと運勢には一切の科学的根拠や関連性はありません。 実際の意思決定にこの結果を使用しないでください。

---

Made with ❤️ and 🦀 (Rust)