About

Kotlin + SpringBoot로 gRPC 백엔드 서비스를 구축하면서 웹 프런트 엔드에서 gRPC-Web로 액세스하는 구성을 시도했을 때의 메모입니다.

거꾸로 다음과 같은 구성이 됩니다.



구조상, Browser와 ReverseProxy간의 통신은 HTTP/1.X가 되므로, gRPC의 메리트 중 커넥션 효율성에 관한 메리트는 누릴 수 없습니다만, Protocol Buffers에 의한 API 스키마 관리의 효율화 메리트는 누릴 수 있습니다.

나중에 관계자에게 설명하기 위한 참고 자료로서 시험한 내용의 메모나 비망록을 여러 번 나누어 기재합니다.

샘플

GitHub에 넣었습니다.

샘플 정보

구성

서비스

Kotlin

Spring Boot 2.0.0 + grpc-spring-boot-starter

ReverseProxy

Envoy

웹

TypeScript

Nuxt.js 2.9.2

동작

docker-compose up로 시작하면 localhost:3000에서 웹에 액세스할 수 있습니다.



Name 필드에 적절한 문자열을 입력하고 Send를 누르면 백엔드로부터 아래와 같은 구조의 응답을 수신합니다.

{
  "message": "Hello ${name}",
  "nameLength": ${name.length}
}

백엔드에서는 앞 서비스GreeterService와 내부 서비스TextAnalyzerService가 협력하여 위와 같은 응답을 반환합니다.

미래

이 샘플을 만드는데 있어서 배운 것과 빠진 것을 요소마다 여러 번 나누어 봅니다.

2. Service편

3. ReverseProxy편

4. 웹 프론트 엔드편