fix oauth_new env test
This commit is contained in:
@ -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
|
||||
|
||||
10
oauth_new/.env.production
Normal file
10
oauth_new/.env.production
Normal file
@ -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
|
||||
178
oauth_new/DEPLOYMENT.md
Normal file
178
oauth_new/DEPLOYMENT.md
Normal file
@ -0,0 +1,178 @@
|
||||
# 本番環境デプロイメント手順
|
||||
|
||||
## 本番環境用の調整
|
||||
|
||||
### 1. テスト機能の削除・無効化
|
||||
|
||||
本番環境では以下の調整が必要です：
|
||||
|
||||
#### A. TestUI コンポーネントの削除
|
||||
```jsx
|
||||
// src/App.jsx から以下を削除/コメントアウト
|
||||
import TestUI from './components/TestUI.jsx'
|
||||
const [showTestUI, setShowTestUI] = useState(false)
|
||||
|
||||
// ボトムセクションからTestUIを削除
|
||||
{showTestUI && (
|
||||
<TestUI />
|
||||
)}
|
||||
<button
|
||||
onClick={() => setShowTestUI(!showTestUI)}
|
||||
className={`btn ${showTestUI ? 'btn-danger' : 'btn-outline'} btn-sm`}
|
||||
>
|
||||
{showTestUI ? 'close test' : 'test'}
|
||||
</button>
|
||||
```
|
||||
|
||||
#### 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
|
||||
<!-- ailog のテンプレートに追加 -->
|
||||
{{ 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用に調整必要
|
||||
- バンドルサイズが大きいため今後最適化検討
|
||||
110
oauth_new/ENV_SETUP.md
Normal file
110
oauth_new/ENV_SETUP.md
Normal file
@ -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 && (
|
||||
<div className="test-section">
|
||||
<TestUI />
|
||||
</div>
|
||||
)}
|
||||
|
||||
// Testボタン表示制御
|
||||
{ENABLE_TEST_UI && (
|
||||
<div className="bottom-actions">
|
||||
<button onClick={() => setShowTestUI(!showTestUI)}>
|
||||
{showTestUI ? 'close test' : 'test'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
```
|
||||
|
||||
### 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出力なし確認
|
||||
120
oauth_new/PROGRESS.md
Normal file
120
oauth_new/PROGRESS.md
Normal file
@ -0,0 +1,120 @@
|
||||
# OAuth Comment System 開発進捗 - 2025-06-18
|
||||
|
||||
## 今日完了した項目
|
||||
|
||||
### ✅ UI改善とスタイリング
|
||||
1. **ヘッダータイトル削除**: "ai.log"タイトルを削除
|
||||
2. **ログインボタンアイコン化**: テキストからBlueskyアイコン `<i class="fab fa-bluesky"></i>` に変更
|
||||
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サイトとの統合準備完了
|
||||
@ -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 && (
|
||||
<div className="test-section">
|
||||
<TestUI />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bottom-actions">
|
||||
<button
|
||||
onClick={() => setShowTestUI(!showTestUI)}
|
||||
className={`btn ${showTestUI ? 'btn-danger' : 'btn-outline'} btn-sm`}
|
||||
>
|
||||
{showTestUI ? 'close test' : 'test'}
|
||||
</button>
|
||||
</div>
|
||||
{ENABLE_TEST_UI && (
|
||||
<div className="bottom-actions">
|
||||
<button
|
||||
onClick={() => setShowTestUI(!showTestUI)}
|
||||
className={`btn ${showTestUI ? 'btn-danger' : 'btn-outline'} btn-sm`}
|
||||
>
|
||||
{showTestUI ? 'close test' : 'test'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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
|
||||
}
|
||||
Reference in New Issue
Block a user