Generating gRPC Stubs and Runtime for the Web - Feat. Buf & kubernetes

Banksalad's Web Frontend team built an automated client code generation system using Buf and @bufbuild/protoplugin to reduce the maintenance burden of gRPC communication during their microservice architecture transition. Previously, the frontend consumed gRPC messages over HTTP via grpc-gateway, but as services grew, duplicated HTTP client code and IPS load caused by calls to external domains emerged as major problems.

Buf-based Code Auto-generation and Internal/External Separation

The development team built a custom plugin that parses the google.api.http options in .proto files to automatically generate TypeScript client code. In this process, internal (k8s internal network) and external (user device) endpoints were clearly separated and generated as distinct classes (EchoServiceInternalClient, EchoServiceExternalClient). This strategy blocks exposure of internal network addresses at runtime rather than via Webpack preprocessing, strengthening security and preventing unnecessary code bundling.

Performance Optimization and Improved Development Productivity

The auto-generated code is merged into a shared library in an Nx monorepo, and changes to .proto files in the internal repository are reflected in real time through CI workflows via copybara. In SSR (Server-Side Rendering) environments, the InternalClient, which directly uses the k8s service DNS, is applied to skip the firewall traversal process. As a result, response speed for the same RPC call decreased by 90%, from 200ms to 20ms, compared to the previous external network call.

Future Plans and Limitations

Currently, there remains the inconvenience of having to manually write QueryOptions for react-query, but the team is developing a feature, inspired by connect-query, to automatically generate query option objects and Hooks. While this approach may have some limitations compared to gRPC-web, it is regarded as a case that significantly improved type safety and development efficiency in a gRPC-gateway environment without additional infrastructure costs.