From d4ce26972ede60fac3874e731ec2d7f287b1c484 Mon Sep 17 00:00:00 2001 From: happybell80 Date: Wed, 30 Jul 2025 13:21:30 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=ED=94=84=EB=A1=A0=ED=8A=B8=EC=97=94?= =?UTF-8?q?=EB=93=9C-=EB=A1=9C=EB=B9=99=20API=20=EC=97=B0=EA=B2=B0=20?= =?UTF-8?q?=ED=8A=B8=EB=9F=AC=EB=B8=94=EC=8A=88=ED=8C=85=20=EB=AC=B8?= =?UTF-8?q?=EC=84=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - frontend-customer와 rb10508_test 연결 과정 - OpenAI → Gemini 전환으로 API 키 문제 해결 - 실시간 채팅 구현 완료 --- ...happybell80_프론트엔드로빙연결.md | 173 ++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 troubleshooting/250730_happybell80_프론트엔드로빙연결.md diff --git a/troubleshooting/250730_happybell80_프론트엔드로빙연결.md b/troubleshooting/250730_happybell80_프론트엔드로빙연결.md new file mode 100644 index 0000000..0dc0a4b --- /dev/null +++ b/troubleshooting/250730_happybell80_프론트엔드로빙연결.md @@ -0,0 +1,173 @@ +# 프론트엔드와 로빙 API 연결 구현 + +**날짜**: 2025-07-30 +**작업자**: happybell80 & Claude +**관련 프로젝트**: frontend-customer, rb10508_test, nginx-deploy + +## 오후 1시 00분 + +### 프론트엔드-로빙 연결 요구사항 + +**목표**: +- 51123 서버의 프론트엔드(5173)와 51124 서버의 rb10508_test(10508) 연결 +- 실제 채팅 기능 구현 + +**현재 상황**: +- 프론트엔드는 하드코딩된 메시지만 표시 +- 로빙과의 실제 통신 없음 +- DB 기반 사용자-로빙 매핑 시스템 미구축 + +## 오후 1시 05분 + +### 아키텍처 분석 및 연결 전략 + +**nginx 프록시 확인**: +```nginx +# /rb10508/ 경로가 이미 설정됨 +location ^~ /rb10508/ { + proxy_pass http://192.168.219.52:10508/; +} +``` + +**rb10508_test API 엔드포인트 발견**: +```python +# app/api/dev_endpoints.py +@router.post("/message") +async def test_message(message: dict): + # user_message, user_id 받아서 처리 +``` + +**연결 전략**: +1. 환경변수로 임시 하드코딩 (DB 구축 전) +2. API 서비스 생성 +3. ChatInterface 컴포넌트 수정 + +## 오후 1시 10분 + +### 프론트엔드 구현 + +**1. 환경변수 설정** (`.env.local`): +```env +VITE_AUTH_SERVER_URL=https://auth.ro-being.com +VITE_API_URL=http://localhost:8000 +VITE_ROBING_API_URL=https://ro-being.com/rb10508 # 임시 하드코딩 +``` + +**2. 로빙 API 서비스 생성** (`src/services/robing-api.ts`): +- `sendMessage()`: 메시지 전송 +- `checkHealth()`: 연결 상태 확인 +- 에러 처리 클래스 구현 +- TypeScript 타입 정의 + +**3. ChatInterface 컴포넌트 수정**: +- 실제 API 호출 통합 +- 로딩 상태 표시 +- 에러 처리 및 토스트 알림 +- Health Check로 연결 상태 표시 + +## 오후 1시 15분 + +### 연결 테스트 및 문제 발견 + +**테스트 결과**: +- ✅ 프론트엔드 → nginx → rb10508 연결 성공 +- ✅ CORS 설정 정상 작동 +- ❌ OpenAI API 키 문제로 응답 실패 + +**문제 분석**: +``` +Error processing message: Error code: 401 - +{'error': {'message': 'Incorrect API key provided: your-open*-key'}} +``` + +**원인**: +- rb10508_test의 AI 서비스가 OpenAI 사용 +- `.env`의 OPENAI_API_KEY가 더미값 +- 컨테이너에 환경변수 반영 안됨 + +## 오후 1시 18분 + +### AI 서비스를 Gemini로 전환 + +**해결 방안**: +- 이미 설정된 GEMINI_API_KEY 활용 +- `/api/dev/message` 엔드포인트 수정 + +**수정 내용**: +```python +# app/api/dev_endpoints.py +# 변경 전 +response = await ai_service.process_message(user_message, user_id) + +# 변경 후 +response = await gemini_service.process_message(user_message, user_id) +``` + +**배포**: +```bash +git add -A && git commit -m "fix: AI 서비스를 OpenAI에서 Gemini로 변경" +git push origin main +# Gitea Actions가 자동 배포 +``` + +## 오후 1시 20분 + +### 프론트엔드 변경사항 푸시 + +**커밋 내용**: +- robing-api.ts 서비스 생성 +- ChatInterface 컴포넌트 API 통합 +- Health Check 및 연결 상태 표시 +- 로딩 상태 및 에러 처리 + +**git 작업**: +```bash +git pull --rebase # 원격 변경사항 동기화 +git push origin main +``` + +## 구현 결과 + +### 완성된 기능 +1. **실시간 채팅**: 프론트엔드에서 메시지 입력 → Gemini AI 응답 +2. **연결 상태 표시**: Health Check로 로빙 상태 확인 +3. **에러 처리**: 네트워크 오류 시 사용자 친화적 메시지 +4. **로딩 상태**: 응답 대기 중 스피너 표시 + +### 향후 개선사항 +1. **DB 기반 사용자-로빙 매핑** + - auth-server에 users, workspace_members 테이블 추가 + - 동적 로빙 할당 시스템 + +2. **실시간 통신** + - WebSocket 또는 SSE 구현 + - 양방향 실시간 메시지 + +3. **스킬 시스템 통합** + - 스킬 사용 시 UI 피드백 + - 스킬 결과 표시 + +## 교훈 + +1. **환경변수 관리의 중요성** + - 개발/운영 환경 분리 + - 민감한 정보는 실제 값으로 설정 + - 컨테이너 재시작 시 환경변수 반영 확인 + +2. **단계적 구현의 효과** + - 임시 하드코딩으로 빠른 프로토타이핑 + - DB 구축은 별도 작업으로 분리 + - 핵심 기능 우선 구현 + +3. **에러 처리 우선** + - API 연결 전 Health Check + - 사용자 친화적 에러 메시지 + - 로딩/오프라인 상태 명확히 표시 + +4. **서비스 선택의 유연성** + - OpenAI → Gemini 전환이 한 줄 수정으로 가능 + - 서비스 추상화의 장점 + - 백업 AI 서비스 준비의 중요성 + +--- +**작성 완료**: 2025-07-30 13:22 \ No newline at end of file