피드로 돌아가기
Dev.toBackend
원문 읽기
Next.js BFF를 통한 AmiVoice API 보안 강화 및 Multipart 데이터 최적화
Calling AmiVoice's Synchronous HTTP API Through a Next.js BFF — Auth, multipart Order, and the WebM Trap
AI 요약
Context
브라우저에서 AmiVoice API 직접 호출 시 API Key 노출로 인한 보안 취약점 발생. 클라이언트 측 JavaScript의 가시성으로 인해 서버 사이드 릴레이 구조의 필요성 대두.
Technical Solution
- API Key 보안을 위한 Next.js API Route 기반의 BFF(Backend for Frontend) 계층 도입
- AmiVoice 특유의 multipart/form-data 규격(u $\rightarrow$ d $\rightarrow$ a 순서) 준수를 위한 FormData 재구성 로직 설계
- Authorization 헤더가 아닌 multipart 필드 'u'를 통한 인증 방식 적용으로 401 에러 해결
- Browser MediaRecorder의 WebM/Opus 포맷이 AmiVoice 서버에서 자동 인식됨을 확인하여 별도의 포맷 변환 과정 제거
- 수신된 raw JSON 데이터를 Pure-function Mapper로 가공하여 프론트엔드 요구사항에 맞는 데이터 구조로 변환
실천 포인트
- 외부 API 연동 전 curl을 통한 Raw Response 검증으로 구현 시행착오 최소화 - FormData 전송 시 필드 순서에 따라 서버 동작이 달라지는 API의 제약 사항 확인 - 보안이 필요한 API Key는 반드시 서버 사이드 환경 변수로 관리하고 BFF를 통해 릴레이 - 브라우저 기본 녹음 포맷(WebM)의 호환성을 먼저 검증하여 불필요한 트랜스코딩 오버헤드 방지