Web을 위한 gRPC Stub과 Runtime 생성하기 - Feat. Buf & kubernetes

Context

마이크로서비스 증가에 따라 웹 프론트엔드에서 HTTP 클라이언트 코드가 반복적으로 중복되었고, 모든 API 호출을 external domain을 통해 IPS 방화벽을 거쳐가면서 성능 저하와 인프라 부하가 발생했습니다. Server-side render를 활용해도 external domain 호출로 인해 kubernetes 클러스터 내부 네트워크 최적화의 이점을 활용하지 못했습니다.

Technical Solution

• proto 파일 기반 코드 자동 생성: @bufbuild/protoplugin을 사용해 TypeScript HTTP 클라이언트 코드를 자동 생성하는 커스텀 플러그인 구현
• 내부/외부 엔드포인트 분리: 자동 생성 코드에서 InternalClient(내부 DNS) 및 ExternalClient(외부 DNS)의 2가지 클래스를 동시 생성
• buf 빌드 파이프라인 통합: 기존 buf.gen.yaml에 protoc-gen-banksalad-http-client 플러그인 추가해 다른 런타임 생성과 동일 프로세스로 관리
• ClientFactory 패턴 도입: InternalClientFactory 및 ExternalClientFactory를 통해 호출 환경에 따라 적절한 클라이언트 자동 선택
• React-Query 옵션 자동 생성: connect-query에서 영감을 받아 react-query의 QueryOption 인터페이스 및 useQuery hooks도 자동 생성 진행 중

Impact

• 응답 속도: 외부망 호출(200ms) 대비 내부망 호출(20ms)로 90% 감소
• 개발 생산성: 프론트엔드 개발자가 반복적인 API 호출 코드 작성 불필요
• 인프라 부하: SSR에서 방화벽(IPS) 통과 제거로 인프라 부하 감소

Key Takeaway

gRPC-Gateway 환경에서 @bufbuild/protoplugin으로 proto 파일 기반 HTTP 클라이언트를 자동 생성하고, 클러스터 내부/외부 환경을 구분한 엔드포인트를 동시 제공하면 개발 생산성 향상과 네트워크 성능 최적화를 동시에 달성할 수 있습니다.