happybell80 d4ce26972e docs: 프론트엔드-로빙 API 연결 트러블슈팅 문서 추가

- frontend-customer와 rb10508_test 연결 과정
- OpenAI → Gemini 전환으로 API 키 문제 해결
- 실시간 채팅 구현 완료

2025-07-30 13:21:30 +09:00

4.4 KiB

Raw Blame History

프론트엔드와 로빙 API 연결 구현

날짜: 2025-07-30
작업자: happybell80 & Claude
관련 프로젝트: frontend-customer, rb10508_test, nginx-deploy

오후 1시 00분

프론트엔드-로빙 연결 요구사항

목표:

51123 서버의 프론트엔드(5173)와 51124 서버의 rb10508_test(10508) 연결
실제 채팅 기능 구현

현재 상황:

프론트엔드는 하드코딩된 메시지만 표시
로빙과의 실제 통신 없음
DB 기반 사용자-로빙 매핑 시스템 미구축

오후 1시 05분

아키텍처 분석 및 연결 전략

nginx 프록시 확인:

# /rb10508/ 경로가 이미 설정됨
location ^~ /rb10508/ {
    proxy_pass http://192.168.219.52:10508/;
}

rb10508_test API 엔드포인트 발견:

# app/api/dev_endpoints.py
@router.post("/message")
async def test_message(message: dict):
    # user_message, user_id 받아서 처리

연결 전략:

환경변수로 임시 하드코딩 (DB 구축 전)
API 서비스 생성
ChatInterface 컴포넌트 수정

오후 1시 10분

프론트엔드 구현

1. 환경변수 설정 (.env.local):

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 엔드포인트 수정

수정 내용:

# 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)

배포:

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 작업:

git pull --rebase  # 원격 변경사항 동기화
git push origin main

구현 결과

완성된 기능

실시간 채팅: 프론트엔드에서 메시지 입력 → Gemini AI 응답
연결 상태 표시: Health Check로 로빙 상태 확인
에러 처리: 네트워크 오류 시 사용자 친화적 메시지
로딩 상태: 응답 대기 중 스피너 표시

향후 개선사항

DB 기반 사용자-로빙 매핑
- auth-server에 users, workspace_members 테이블 추가
- 동적 로빙 할당 시스템
실시간 통신
- WebSocket 또는 SSE 구현
- 양방향 실시간 메시지
스킬 시스템 통합
- 스킬 사용 시 UI 피드백
- 스킬 결과 표시

교훈

환경변수 관리의 중요성
- 개발/운영 환경 분리
- 민감한 정보는 실제 값으로 설정
- 컨테이너 재시작 시 환경변수 반영 확인
단계적 구현의 효과
- 임시 하드코딩으로 빠른 프로토타이핑
- DB 구축은 별도 작업으로 분리
- 핵심 기능 우선 구현
에러 처리 우선
- API 연결 전 Health Check
- 사용자 친화적 에러 메시지
- 로딩/오프라인 상태 명확히 표시
서비스 선택의 유연성
- OpenAI → Gemini 전환이 한 줄 수정으로 가능
- 서비스 추상화의 장점
- 백업 AI 서비스 준비의 중요성

작성 완료: 2025-07-30 13:22

4.4 KiB Raw Blame History