Tasukaru Admin Panel

管理画面専用プロジェクト - 完全に分離されたセキュアな管理インターフェース

🔒 セキュリティ機能

• Basic認証: アクセス時の第一認証層
• 管理者専用認証: Supabaseベースの管理者認証
• IPホワイトリスト対応: Vercel環境での制限可能
• セキュリティヘッダー: XSS, CSRF対策
• ソースマップ無効化: 本番環境での情報隠蔽

🚀 セットアップ

1. 依存関係のインストール

npm install --legacy-peer-deps

2. 環境変数の設定

cp .env.example .env
# .envファイルを編集して必要な値を設定

3. 開発サーバーの起動

npm run dev

4. 本番ビルド

npm run build

📁 プロジェクト構造

tasukaru_admin/
├── src/
│   ├── components/        # 管理画面コンポーネント
│   ├── utils/            # ユーティリティ関数
│   └── types/            # TypeScript型定義
├── middleware.ts         # Vercel Edge Middleware (Basic認証)
├── vercel.json          # Vercel デプロイ設定
└── package.json         # 管理画面専用依存関係

🔧 Vercel デプロイ

1. Vercelプロジェクトを新規作成
2. 環境変数を設定:
   • BASIC_AUTH_USER
   • BASIC_AUTH_PASS
   • VITE_SUPABASE_URL
   • VITE_SUPABASE_ANON_KEY
3. デプロイ実行

🌐 アクセス

• 開発環境: http://localhost:3001
• 本番環境: https://admin.yourdomain.com

注意: Basic認証により一般ユーザーのアクセスを制限します