이 글에선 윈도즈 환경에서 React (리액트)의 gRPC-Web으로 컴필레이션 하는 방법을 소개해드리겠습니다. gRPC-Web 은 gRPC 서버에 WebAPI 형식으로 엔드포인트와 커뮤니케이션을 할 수 있게 만들어 주는 방법입니다. 간단하게 생각하면 HTTP/1.1과 HTTP/2의 컨버터라고 보시면 됩니다.
이 방법을 쓰는 이유는 아직 브라우저에선 HTTP/2 형식을 서포트를 못해서 이고요. 컴필레이션 파일을 이용하여 gRPC-Web 서버에 HTTP/1.1 방식의 연결과 통화를 합니다.
이글 하나만으로 다 된 건 아닙니다 ^^ 자바스크립트 기반의 웹 클라이언트에서의 셋업이 이 글의 내용입니다.
gRPC 서버의 엔드포인트에 완전히 연결하기 위해선 .NET 기반의 gRPC 서버에 gRPC-Web 기능을 넣던지, .NET 이 아니라면 제가 아는 정보는 Envoy라는 프락시 서버가 gRPC 서버와의 커뮤니케이션을 돕는 걸로 알고 있습니다.
여러 사이트들이 많이 나와 있는데 윈도즈 환경에서 방법 정보들이 다 흩어져있어서 한 군데로 다 모아 보았습니다.
1. Development Environment (개발 환경)
Windows 11 (10도 무관)
Visual Studio 2022 (이부분은 무관합니다)
React 프로젝트 (Javascript 버전)
src/protos 폴더에 샘플 .proto 파일 (Visual Studio사용하셨으면 greet.proto라는 파일이 자동 생성되어 있을거예요 - 이 글은 greet.proto 파일을 쓰겠습니다)
2. Prerequisites (준비사항)
a. OS 준비 항목
!!! 주의 - 모든 항목을 설치하실 때마다 윈도즈 시스템 환경 변수에 넣어 주셔야 합니다!!!
Chocolatey
Bazelisk
아래 커멘드로 인스톨
Protobuf Compiler
protoc (Windows)
제일 아래에 있습니다 - 더보기 눌러서 protoc-21.9-win64.zip 나 다른 버전 다운후 인스톨
gRPC Web Compiler & Generator
protoc-gen-grpc-web (Windows)
Protobuf JS Compiler (proto-gen-js)
자바스크립트 버전의 Protobuf 컴필레이션 파일 생성을 위해 필요
아래 커멘드를 입력하여 생성
b. React 리액트 준비 항목
다음의 라이브러리를 React 프로젝트에 설치해 주세요.
google-protobuf
grpc
grpc-web
@grpc/grpc-js
3. Instructions
a. Command Prompt 나 Powershell을 React 프로젝트의 루트 폴더에서 열어주세요
b. 다음의 커멘드 (중간에 직접 바꾸어야 하는 부분 있음)를 입력 후 엔터키 입력
만약에 여기서 오류가 뜨면 대개가 윈도즈 시스템 환경 변수 문제이니 재 확인하고 고쳐진 후엔 항상 지금의 창을 닫고 다시 1번으로 돌아가서 시작합니다
c. 오류가 없으면 src/protos 폴더에 다음의 두 가지 새로운 파일이 형성됩니다.
greet_grpc_web_pb.js
greet_pb.js
수고하셨고 축하드립니다!
이 두 가지 파일이 생성되면 완료된 것입니다. 다음엔 이 두 가지 파일을 이용하여 어떻게 React에서 gRPC 서버와 커뮤니케이션을 하는지 알려드리겠습니다.
감사합니다
