From fecd927b919a8fd4cf12d21c316c5cf24aafd097 Mon Sep 17 00:00:00 2001 From: syui Date: Wed, 18 Jun 2025 18:16:37 +0900 Subject: [PATCH] fix oauth_new env test --- oauth_new/.env | 4 + oauth_new/.env.production | 10 ++ oauth_new/DEPLOYMENT.md | 178 ++++++++++++++++++++++++++++++++++ oauth_new/ENV_SETUP.md | 110 +++++++++++++++++++++ oauth_new/PROGRESS.md | 120 +++++++++++++++++++++++ oauth_new/src/App.jsx | 24 +++-- oauth_new/src/utils/logger.js | 5 +- 7 files changed, 440 insertions(+), 11 deletions(-) create mode 100644 oauth_new/.env.production create mode 100644 oauth_new/DEPLOYMENT.md create mode 100644 oauth_new/ENV_SETUP.md create mode 100644 oauth_new/PROGRESS.md diff --git a/oauth_new/.env b/oauth_new/.env index cada505..801b270 100644 --- a/oauth_new/.env +++ b/oauth_new/.env @@ -4,3 +4,7 @@ VITE_HANDLE_LIST=["ai.syui.ai", "syui.syui.ai", "ai.ai"] VITE_COLLECTION=ai.syui.log VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback + +# Development/Debug features +VITE_ENABLE_TEST_UI=true +VITE_ENABLE_DEBUG=true diff --git a/oauth_new/.env.production b/oauth_new/.env.production new file mode 100644 index 0000000..b6d20ee --- /dev/null +++ b/oauth_new/.env.production @@ -0,0 +1,10 @@ +VITE_ADMIN=ai.syui.ai +VITE_PDS=syu.is +VITE_HANDLE_LIST=["ai.syui.ai", "syui.syui.ai", "ai.ai"] +VITE_COLLECTION=ai.syui.log +VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json +VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback + +# Production settings - Disable development features +VITE_ENABLE_TEST_UI=false +VITE_ENABLE_DEBUG=false \ No newline at end of file diff --git a/oauth_new/DEPLOYMENT.md b/oauth_new/DEPLOYMENT.md new file mode 100644 index 0000000..a0bc407 --- /dev/null +++ b/oauth_new/DEPLOYMENT.md @@ -0,0 +1,178 @@ +# 本番環境デプロイメント手順 + +## 本番環境用の調整 + +### 1. テスト機能の削除・無効化 + +本番環境では以下の調整が必要です： + +#### A. TestUI コンポーネントの削除 +```jsx +// src/App.jsx から以下を削除/コメントアウト +import TestUI from './components/TestUI.jsx' +const [showTestUI, setShowTestUI] = useState(false) + +// ボトムセクションからTestUIを削除 +{showTestUI && ( + +)} + +``` + +#### B. ログ出力の完全無効化 +現在は `logger.js` で開発環境のみログが有効になっていますが、完全に確実にするため： + +```bash +# 本番ビルド前に全てのconsole.logを確認 +grep -r "console\." src/ --exclude-dir=node_modules +``` + +### 2. 環境変数の設定 + +#### 本番用 .env.production +```bash +VITE_ATPROTO_PDS=syu.is +VITE_ADMIN_HANDLE=ai.syui.ai +VITE_AI_HANDLE=ai.syui.ai +VITE_OAUTH_COLLECTION=ai.syui.log +``` + +### 3. ビルドコマンド + +```bash +# 本番用ビルド +npm run build + +# 生成されるファイル確認 +ls -la dist/ +``` + +### 4. デプロイ用ファイル構成 + +``` +dist/ +├── index.html # 最小化HTML +├── assets/ +│ ├── comment-atproto-[hash].js # メインJSバンドル +│ └── comment-atproto-[hash].css # CSS +``` + +### 5. ailog サイトへの統合 + +#### A. アセットファイルのコピー +```bash +# distファイルをailogサイトの適切な場所にコピー +cp dist/assets/* /path/to/ailog/static/assets/ +cp dist/index.html /path/to/ailog/templates/oauth-assets.html +``` + +#### B. ailog テンプレートでの読み込み +```html + +{{ if .Site.Params.oauth_comments }} + {{ partial "oauth-assets.html" . }} +{{ end }} +``` + +### 6. 本番環境チェックリスト + +#### ✅ セキュリティ +- [ ] OAuth認証のリダイレクトURL確認 +- [ ] 環境変数の機密情報確認 +- [ ] HTTPS通信確認 + +#### ✅ パフォーマンス +- [ ] バンドルサイズ確認（現在1.2MB） +- [ ] ファイル圧縮確認 +- [ ] キャッシュ設定確認 + +#### ✅ 機能 +- [ ] 本番PDS接続確認 +- [ ] OAuth認証フロー確認 +- [ ] コメント投稿・表示確認 +- [ ] アバター表示確認 + +#### ✅ UI/UX +- [ ] モバイル表示確認 +- [ ] アクセシビリティ確認 +- [ ] エラーハンドリング確認 + +### 7. 段階的デプロイ戦略 + +#### Phase 1: テスト環境 +```bash +# テスト用のサブドメインでデプロイ +# test.syui.ai など +``` + +#### Phase 2: 本番環境 +```bash +# 問題なければ本番環境にデプロイ +# ailog本体に統合 +``` + +### 8. トラブルシューティング + +#### よくある問題 +1. **OAuth認証エラー**: リダイレクトURL設定確認 +2. **PDS接続エラー**: ネットワーク・DNS設定確認 +3. **アバター表示エラー**: CORS設定確認 +4. **CSS競合**: oauth-プレフィックス確認 + +#### ログ確認方法 +```bash +# 本番環境でエラーが発生した場合 +# ブラウザのDevToolsでエラー確認 +# logger.jsは本番では無効化されている +``` + +### 9. 本番用設定ファイル + +```bash +# ~/.config/syui/ai/log/config.json +{ + "oauth": { + "environment": "production", + "debug": false, + "test_mode": false + } +} +``` + +### 10. 推奨デプロイ手順 + +```bash +# 1. テスト機能削除 +git checkout -b production-ready +# App.jsx からTestUI関連を削除 + +# 2. 本番ビルド +npm run build + +# 3. ファイル確認 +ls -la dist/ + +# 4. ailogサイトに統合 +cp dist/assets/* ../my-blog/static/assets/ +cp dist/index.html ../my-blog/templates/oauth-assets.html + +# 5. ailogサイトでテスト +cd ../my-blog +hugo server + +# 6. 問題なければcommit +git add . +git commit -m "Production build: Remove test UI, optimize for deployment" +``` + +## 注意事項 + +- TestUIは開発・デモ用のため本番では削除必須 +- loggerは自動で本番では無効化される +- OAuth設定は本番PDS用に調整必要 +- バンドルサイズが大きいため今後最適化検討 \ No newline at end of file diff --git a/oauth_new/ENV_SETUP.md b/oauth_new/ENV_SETUP.md new file mode 100644 index 0000000..91dfbbe --- /dev/null +++ b/oauth_new/ENV_SETUP.md @@ -0,0 +1,110 @@ +# 環境変数による機能切り替え + +## 概要 + +開発用機能（TestUI、デバッグログ）をenv変数で簡単に有効/無効化できるようになりました。 + +## 設定ファイル + +### 開発環境用: `.env` +```bash +# Development/Debug features +VITE_ENABLE_TEST_UI=true +VITE_ENABLE_DEBUG=true +``` + +### 本番環境用: `.env.production` +```bash +# Production settings - Disable development features +VITE_ENABLE_TEST_UI=false +VITE_ENABLE_DEBUG=false +``` + +## 制御される機能 + +### 1. TestUI コンポーネント +- **制御**: `VITE_ENABLE_TEST_UI` +- **true**: TestボタンとTestUI表示 +- **false**: TestUI関連が完全に非表示 + +### 2. デバッグログ +- **制御**: `VITE_ENABLE_DEBUG` +- **true**: console.log等が有効 +- **false**: すべてのlogが無効化 + +## 使い方 + +### 開発時 +```bash +# .envで有効化されているので通常通り +npm run dev +npm run build +``` + +### 本番デプロイ時 +```bash +# 自動的に .env.production が読み込まれる +npm run build + +# または明示的に指定 +NODE_ENV=production npm run build +``` + +### 手動切り替え +```bash +# 一時的にTestUIだけ無効化 +VITE_ENABLE_TEST_UI=false npm run dev + +# 一時的にデバッグだけ無効化 +VITE_ENABLE_DEBUG=false npm run dev +``` + +## 実装詳細 + +### App.jsx +```jsx +// Environment-based feature flags +const ENABLE_TEST_UI = import.meta.env.VITE_ENABLE_TEST_UI === 'true' +const ENABLE_DEBUG = import.meta.env.VITE_ENABLE_DEBUG === 'true' + +// TestUI表示制御 +{ENABLE_TEST_UI && showTestUI && ( +
+ +
+)} + +// Testボタン表示制御 +{ENABLE_TEST_UI && ( +
+ +
+)} +``` + +### logger.js +```jsx +class Logger { + constructor() { + this.isDev = import.meta.env.DEV || false + this.debugEnabled = import.meta.env.VITE_ENABLE_DEBUG === 'true' + this.isEnabled = this.isDev && this.debugEnabled + } +} +``` + +## メリット + +✅ **コード削除不要**: 機能を残したまま本番で無効化 +✅ **簡単切り替え**: env変数だけで制御 +✅ **自動化対応**: CI/CDで環境別自動ビルド可能 +✅ **デバッグ容易**: 必要時に即座に有効化可能 + +## 本番デプロイチェックリスト + +- [ ] `.env.production`でTestUI無効化確認 +- [ ] `.env.production`でデバッグ無効化確認 +- [ ] 本番ビルドでTestボタン非表示確認 +- [ ] 本番でconsole.log出力なし確認 \ No newline at end of file diff --git a/oauth_new/PROGRESS.md b/oauth_new/PROGRESS.md new file mode 100644 index 0000000..7720411 --- /dev/null +++ b/oauth_new/PROGRESS.md @@ -0,0 +1,120 @@ +# OAuth Comment System 開発進捗 - 2025-06-18 + +## 今日完了した項目 + +### ✅ UI改善とスタイリング +1. **ヘッダータイトル削除**: "ai.log"タイトルを削除 +2. **ログインボタンアイコン化**: テキストからBlueskyアイコン `` に変更 +3. **Ask AIボタン削除**: 完全に削除 +4. **Testボタン移動**: ページ下部に移動、テキストを小文字に変更 +5. **検索バーレイアウト適用**: 認証セクションに検索バーUIパターンを適用 +6. **ボーダー削除**: 複数の要素からborder-top, border-bottom削除 +7. **ヘッダースペーシング修正**: 左側の余白問題を解決 +8. **CSS競合解決**: クラス名に`oauth-`プレフィックス追加でailogサイトとの競合回避 +9. **パディング統一**: `padding: 20px 0` に統一（デスクトップ・モバイル共通） + +### ✅ 機能実装 +1. **テスト用UI作成**: OAuth認証不要のputRecord機能実装 +2. **JSONビューワー追加**: コメント表示にshow/hideボタン追加 +3. **削除機能追加**: OAuth認証ユーザー用のdeleteボタン実装 +4. **動的アバター取得**: 壊れたアバターURL対応のフォールバック機能 +5. **ブラウザ動作確認**: 全機能の動作テスト完了 + +### ✅ 技術的解決 +1. **DID処理改善**: テスト用の偽DITエラー修正 +2. **Handle処理修正**: 自動`.bsky.social`追加削除 +3. **セッション管理**: createSession機能の修正 +4. **アバターキャッシュ**: 動的取得とキャッシュ機能実装 + +## 現在の技術構成 + +### フロントエンド +- **React + Vite**: モダンなSPA構成 +- **ATProto OAuth**: Bluesky認証システム +- **アバター管理**: 動的取得・フォールバック・キャッシュ +- **レスポンシブデザイン**: モバイル・デスクトップ対応 + +### バックエンド連携 +- **ATProto API**: PDS通信 +- **Collection管理**: `ai.syui.log.chat.comment`等のレコード操作 +- **DID解決**: Handle → DID → PDS → Profile取得 + +### CSS設計 +- **Prefix命名**: `oauth-`で競合回避 +- **統一パディング**: `20px 0`でレイアウト統一 +- **ailogスタイル継承**: 親サイトとの一貫性保持 + +## ファイル構成 + +``` +oauth_new/ +├── src/ +│ ├── App.jsx # メインアプリケーション +│ ├── App.css # 統一スタイル（oauth-プレフィックス） +│ ├── components/ +│ │ ├── AuthButton.jsx # Blueskyアイコン認証ボタン +│ │ ├── CommentForm.jsx # コメント投稿フォーム +│ │ ├── CommentList.jsx # コメント一覧表示 +│ │ └── TestUI.jsx # テスト用UI +│ └── utils/ +│ └── avatarFetcher.js # アバター動的取得 +├── dist/ # ビルド成果物 +├── build-minimal.js # 最小化ビルドスクリプト +└── PROGRESS.md # 本ファイル +``` + +## 残存課題・継続開発項目 + +### 🔄 現在進行中 +- 特になし（基本機能完成） + +### 📋 今後の拡張予定 +1. **AI連携強化** + - ai.gptとの統合 + - AIコメント自動生成 + - 心理分析機能統合 + +2. **パフォーマンス最適化** + - バンドルサイズ削減（現在1.2MB） + - 動的インポート実装 + - キャッシュ戦略改善 + +3. **機能拡張** + - リアルタイム更新 + - 通知システム + - モデレーション機能 + - 多言語対応 + +4. **ai.log統合** + - 静的ブログジェネレーター連携 + - 記事別コメント管理 + - SEO最適化 + +### 🎯 次回セッション予定 +1. ai.gpt連携の詳細設計 +2. パフォーマンス最適化 +3. ai.log本体との統合テスト + +## 技術メモ + +### 重要な解決方法 +- **CSS競合**: `oauth-`プレフィックスで名前空間分離 +- **アバター問題**: 3段階フォールバック（record → fresh fetch → fallback） +- **認証フロー**: session管理とDID-based認証 +- **レスポンシブ**: 統一パディングでシンプル化 + +### 設定ファイル連携 +- `./my-blog/config.toml`: ブログ設定 +- `./oauth/.env.production`: OAuth設定 +- `~/.config/syui/ai/log/config.json`: システム設定 + +## 成果物 + +✅ **完全に動作するOAuthコメントシステム** +- ATProto認証 +- コメント投稿・表示・削除 +- アバター表示 +- JSON詳細表示 +- テスト機能 +- レスポンシブデザイン +- ailogサイトとの統合準備完了 \ No newline at end of file diff --git a/oauth_new/src/App.jsx b/oauth_new/src/App.jsx index a0ea6e2..8b64c75 100644 --- a/oauth_new/src/App.jsx +++ b/oauth_new/src/App.jsx @@ -17,6 +17,10 @@ export default function App() { const pageContext = usePageContext() const [showAskAI, setShowAskAI] = useState(false) const [showTestUI, setShowTestUI] = useState(false) + + // Environment-based feature flags + const ENABLE_TEST_UI = import.meta.env.VITE_ENABLE_TEST_UI === 'true' + const ENABLE_DEBUG = import.meta.env.VITE_ENABLE_DEBUG === 'true' // Event listeners for blog communication useEffect(() => { @@ -153,20 +157,22 @@ export default function App() { }} /> - {showTestUI && ( + {ENABLE_TEST_UI && showTestUI && (
)} -
- -
+ {ENABLE_TEST_UI && ( +
+ +
+ )} diff --git a/oauth_new/src/utils/logger.js b/oauth_new/src/utils/logger.js index 013d77d..5fb284c 100644 --- a/oauth_new/src/utils/logger.js +++ b/oauth_new/src/utils/logger.js @@ -2,7 +2,8 @@ class Logger { constructor() { this.isDev = import.meta.env.DEV || false - this.isEnabled = this.isDev // Only enable in development + this.debugEnabled = import.meta.env.VITE_ENABLE_DEBUG === 'true' + this.isEnabled = this.isDev && this.debugEnabled // Enable only in dev AND when debug flag is true } log(...args) { @@ -76,6 +77,6 @@ class Logger { export const logger = new Logger() // 開発環境でのみグローバルアクセス可能にする -if (import.meta.env.DEV) { +if (import.meta.env.DEV && import.meta.env.VITE_ENABLE_DEBUG === 'true') { window._logger = logger } \ No newline at end of file