本番環境 Admin Panel Setup Guide

🚀 Web公開ときの管理画面セットアップ

📋 前提条件

  • GitHubリポジトリが公開されている
  • GitHub Pagesが有効になっている
  • カスタムドメイン（tensornetwork-qec.jp）が設定されている

🔧 Step 1: GitHub OAuth App作成

  1. GitHub.com にログイン
  2. Settings → Developer settings → OAuth Apps に移動
  3. New OAuth App をクリック
  4. 以下の情報を入力：
Application name: Research Website Admin
Homepage URL: https://tensornetwork-qec.jp
Application description: Content management for research website
Authorization callback URL: https://api.netlify.com/auth/done
  1. Register application をクリック
  2. Client ID をメモ（これは公開情報なので安全）
  3. Client Secret も生成されるが、これは秘密情報として管理

🌐 Step 2: Netlify（無料）でOAuth Proxy設定

GitHub Pagesだけでは OAuth認証ができないため、Netlifyを認証プロキシとして使用：

  1. Netlify.com にアカウント作成（無料）
  2. New site from Git をクリック
  3. GitHub を選択してリポジトリを接続

  4. Build settings:

    Build command: bundle exec jekyll build
Publish directory: _site
Base directory: (空白)
  5. Deploy site をクリック

🔑 Step 3: Netlify環境変数設定

  1. Netlify dashboard → Site settings → Environment variables

  2. 以下の変数を追加：

    GITHUB_CLIENT_ID: (Step 1で取得したClient ID)
GITHUB_CLIENT_SECRET: (Step 1で取得したClient Secret)

🔐 Step 4: OAuth App設定を更新

GitHub OAuth App設定に戻って：

  1. Authorization callback URL を更新：

    https://あなたのnetlifyサイト名.netlify.app/admin/auth/

    （例：https://fumikobayashi-research.netlify.app/admin/auth/）

🎯 Step 5: 管理画面アクセス

公開後の管理画面アクセス：

  1. 本番サイト: https://tensornetwork-qec.jp/admin/
  2. Netlifyサイト: https://あなたのサイト名.netlify.app/admin/

🔄 認証フロー

  1. 管理画面にアクセス
  2. Login with GitHub をクリック
  3. GitHubでの認証画面に移動
  4. 認証後、管理画面にリダイレクト
  5. リポジトリへの書き込み権限で編集可能

🛡️ セキュリティ注意事項

  1. リポジトリ権限:
    • プライベートリポジトリの場合：オーナーのみアクセス可能
    • パブリックリポジトリの場合：コラボレーター権限が必要
  2. OAuth App管理:
    • Client Secretは絶対に公開しない
    • 定期的にTokenをローテーション
  3. アクセス制限:
    • 必要な人のみをリポジトリコラボレーターに追加

🧪 代替案: GitHub Pages + 外部認証サービス

より高度なセキュリティが必要な場合：

  1. Auth0（有料）
  2. Firebase Authentication（Googleアカウント連携）
  3. Supabase（オープンソース代替）

🔧 トラブルシューティング

認証エラー

Error: Unable to authenticate

解決策:

  • GitHub OAuth App設定を確認
  • Callback URLが正しいか確認
  • Netlify環境変数が設定されているか確認

保存エラー

Error: API rate limit exceeded

解決策:

  • 少し時間をおいて再試行
  • GitHubのAPIレート制限（5000/時間）を確認

アクセス権限エラー

Error: Repository access denied

解決策:

  • GitHubリポジトリのコラボレーター権限を確認
  • OAuth Appのスコープ設定を確認

✅ 最終チェックリスト

  • GitHub OAuth App作成完了
  • Netlifyサイトデプロイ完了
  • 環境変数設定完了
  • Callback URL設定完了
  • 管理画面アクセステスト完了
  • データ保存テスト完了

これで安全にWeb公開環境で管理画面を使用できます！ 🎉