asset-manager (資産管理アプリケーション)
ポートフォリオの推移と構成を、美しく直感的に管理する資産管理トラッカーです。Next.js (App Router)、Prisma、Tailwind CSS を使用して構築されています。
主な機能
開発環境のセットアップ
構成の概要
| 環境 | DB | 用途 |
|---|
| ローカル（WSL） | 127.0.0.1:3306 / asset_manager_dev | 日常開発 |
| 本番（VPS） | 1Password の db-host / db-name | 本番運用 |
| 本番（ローカル接続） | SSH トンネル 127.0.0.1:3307 | デバッグ用（prod:tunnel） |
VPS 上の dev DB は使いません。ローカル開発は WSL 内の MySQL のみで完結します。
前提条件
- Node.js 20 系
- WSL 内の MySQL 8.0（
sudo apt install mysql-server）
Docker Desktop は不要です。WSL 連携が使える環境では npm run db:up:docker で Docker 版も利用できます。
1Password CLI は日常のローカル開発では不要です。本番デプロイの確認や本番 DB への接続（本番 DB のローカル接続）でのみ使用します。インストール手順はデプロイ方法を参照してください。
初回セットアップ
# パッケージのインストール
npm install
# ローカル開発用の環境変数ファイルを作成（1Password 不要）
cp .env.local.example .env.local
# MySQL が未インストールの場合（初回のみ）
sudo apt update && sudo apt install -y mysql-server
# ローカル MySQL 起動 + スキーマ適用（初回のみ、sudo パスワード入力あり）
npm run db:setup
# 開発サーバーの起動
npm run dev
.env.local の Discord 通知欄（DISCORD_ALERT_WEBHOOK_URL）は空のままでも起動できます（未設定なら通知をスキップします）。ただし Google OAuth はログインに必須のため、Google ログイン（ローカル開発） の手順で設定してください。
日常の開発では npm run db:up で MySQL を起動してから npm run dev を実行します（db:setup は初回または DB を作り直したときのみ）。
Claude Code など非対話環境での初回セットアップ
npm run db:up / npm run db:setup は内部で sudo service mysql start 等を実行するため、通常は sudo パスワードの入力を求められます。Claude Code のような非対話環境ではパスワード入力ができず失敗するので、事前に一度だけ以下を対話シェルで実行し、MySQL 起動系コマンドのみパスワードなしで sudo できるようにしておきます。
npm run db:setup:sudoers
これは /etc/sudoers.d/mysql-dev-nopasswd に service mysql start/stop と mysqladmin ping / mysql（DB・ユーザー作成用）に限定した NOPASSWD ルールを追加します（他のコマンドの sudo は従来どおりパスワードが必要です）。設定後は非対話環境からでも npm run db:up / npm run db:setup が動作します。
ローカル DB コマンド
| コマンド | 1Password | 内容 |
|---|
npm run db:up | 不要 | WSL MySQL を起動（127.0.0.1:3306） |
npm run db:up:docker | 不要 | Docker で MySQL 8.0 を起動（127.0.0.1:3308） |
npm run db:down | 不要 | ローカル MySQL を停止 |
npm run db:status | 不要 | MySQL の状態確認 |
npm run db:setup | 不要 | 起動 + prisma db push（初回用） |
npm run db:deploy:local | 不要 | schema.prisma をローカル DB に反映 |
npm run db:reset | 不要 | DB を初期化してスキーマを再適用 |
npm run db:dev | 不要 | マイグレーションファイルの作成（スキーマ変更時） |
npm run dev | 不要 | 開発サーバー起動（.env.local を使用） |
ローカル DB の接続情報（.env.local.example に記載、秘密情報ではない）:
| 項目 | 値 |
|---|
| ホスト | 127.0.0.1 |
| ポート | 3306 |
| DB 名 | asset_manager_dev |
| ユーザー | asset_manager |
| パスワード | devpassword |
スキーマ同期について
ローカル開発では prisma db push（npm run db:setup / npm run db:deploy:local）で素早くスキーマを反映します。本番デプロイは deploy.yml 内で prisma migrate deploy を実行し、prisma/migrations のマイグレーション履歴を適用します。
スキーマを変更した場合は npm run db:dev でマイグレーションファイルを生成し、prisma/migrations にコミットしてください。
# スキーマを変更したあと
npm run db:deploy:local
npm run dev # 再起動
[!IMPORTANT]
db push だけで済ませると、本番にだけテーブルが作られません。 ローカルもCIも
prisma db push で schema.prisma を直接反映するため、マイグレーションを生成し忘れても
どこも失敗しません。一方で本番は prisma migrate deploy しか実行しないため、履歴に無い
テーブルは本番DBに一度も作られず、画面を開いた時点で
The table X does not exist in the current database になります
（レシートAI取込の6テーブルで実際に発生: #236）。
マイグレーションの生成漏れを確認する / 後から埋める
CI（.github/workflows/test.yml の Migration drift check）が毎回この確認を行うため、生成漏れは
Pull Requestの時点で落ちます。手元で確かめたい場合は、シャドウDBを用意して同じコマンドを
実行します（差分があれば終了コード 2）。
sudo mysql -e "CREATE DATABASE IF NOT EXISTS asset_manager_shadow;
GRANT ALL PRIVILEGES ON asset_manager_shadow.* TO 'asset_manager'@'localhost';"
npx prisma migrate diff \
--from-migrations prisma/migrations \
--to-schema-datamodel prisma/schema.prisma \
--shadow-database-url 'mysql://asset_manager:[email protected]:3306/asset_manager_shadow' \
--exit-code
シャドウDBを用意できない環境では、最後にマイグレーションを追加したコミット時点の
schema.prisma を起点にすれば、DBなしで同じ差分を出せます（生成漏れを後から埋めるときの手順）。
git show <そのコミット>:prisma/schema.prisma > /tmp/old-schema.prisma
DIR="prisma/migrations/$(date -u +%Y%m%d%H%M%S)_<名前>"
mkdir -p "$DIR"
npx prisma migrate diff \
--from-schema-datamodel /tmp/old-schema.prisma \
--to-schema-datamodel prisma/schema.prisma \
--script > "$DIR/migration.sql"
Google ログイン（ローカル開発）
ログインは Supabase Auth 経由の Google OAuth のみです。ローカル開発でも設定が必要です。初回ログイン時にダミーデータが自動投入されます。
複数アプリで共有の開発用 Supabase プロジェクトを使います（本番用プロジェクトとは別。詳細は m-guchi/vps#42 参照）。
必要な設定:
- 開発用 Supabase プロジェクトの Authentication > URL Configuration の Redirect URLs に以下を追加:
http://localhost:3000/auth/callback
.env.local の NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY に、開発用 Supabase プロジェクトの値を記入npm run dev で http://localhost:3000/login を開く
よくあるエラー:
| 症状 | 対処 |
|---|
redirect_uri_mismatch | Supabase プロジェクトの Redirect URLs に上記 URL を追加 |
| Google ログインがエラーになる | .env.local の NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY が空でないか確認 |
| ログイン画面も含め全ページが500になる | 同上。空だと middleware.ts がSupabaseクライアントを作れず、ページに入る前に落ちる（ログには Your project's URL and Key are required to create a Supabase client!）。画面の中身とは無関係なので、UIの変更を疑う前にここを見る |
This is the beginning of the README. Read the rest at the original. Read the full README ↗
