프론트엔드
Web을 위한 gRPC Stub과 Runtime 생성하기 - Feat. Buf & kubernetes
두줄요약
Buf 플러그인으로 gRPC-Gateway용 타입 안전 HTTP 클라이언트를 자동 생성했습니다. SSR에는 Kubernetes 내부 DNS를 적용해 응답 시간과 IPS 부하를 줄였습니다.
문제 상황
- gRPC-Gateway 기반 HTTP 호출 코드의 프론트엔드 레포지토리 전반 중복
- 외부 도메인 경유 호출과 브라우저 중심 요청으로 인한 IPS 부하 및 불필요한 네트워크 홉
해결 방법
@bufbuild/protoplugin과 Buf CLI 기반 TypeScript HTTP 클라이언트 코드 생성기 구현- proto의 HTTP annotation으로부터 Unary RPC용 요청·응답 타입 안전 클라이언트 생성
- 내부망과 외부망 전용 클라이언트 분리로 내부 RPC의 브라우저 노출 차단
구조와 흐름
- proto 레포지토리 변경 시 CI에서 클라이언트 코드 생성 후 Copybara로 Nx monorepo 공용 라이브러리에 병합
- Next.js SSR에서는 Kubernetes Service DNS 기반 내부 클라이언트, CSR에서는 외부 클라이언트 사용
- React Query의 QueryOption 및
useQuery훅 자동 생성 방식 추가 검토
성능/운영 포인트
- 내부 DNS 호출로 동일 RPC 응답 시간 약 200ms에서 약 20ms 수준으로 감소
- SSR의 방화벽 경유 제거에 따른 인프라 부하 완화와 API 작성 작업 절감
