React (리액트) 와 gRPC-Web : PART 1 : 윈도즈 환경에서의 Protobuf 컴필레이션 방법

이 글에선 윈도즈 환경에서 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
  • https://chocolatey.org/install
• Bazelisk 
  • https://github.com/bazelbuild/bazelisk
  • 아래 커멘드로 인스톨

choco install bazelisk

• Protobuf Compiler
  • protoc (Windows)
  • 제일 아래에 있습니다 - 더보기 눌러서 protoc-21.9-win64.zip 나 다른 버전 다운후 인스톨
  • https://github.com/protocolbuffers/protobuf/releases 
• gRPC Web Compiler & Generator 
  
  • protoc-gen-grpc-web (Windows) 
  • https://github.com/grpc/grpc-web/releases
• Protobuf JS Compiler (proto-gen-js) 
  • 자바스크립트 버전의 Protobuf 컴필레이션 파일 생성을 위해 필요
  • 아래 커멘드를 입력하여 생성

git clone https://github.com/protocolbuffers/protobuf-javascript
cd protobuf-javascript/
bazel build //generator:protoc-gen-js

---

b. React 리액트 준비 항목

다음의 라이브러리를 React 프로젝트에 인스톨해주세요.

• google-protobuf
• grpc
• grpc-web
• @grpc/grpc-js

728x90

---

3. Instructions

---

a. Command Prompt 나 Powershell을 React 프로젝트의 루트 폴더에서 열어주세요

---

b. 다음의 커멘드 (중간에 직접 바꾸어야 하는 부분 있음)를 입력 후 엔터키 입력

protoc --plugin=\protoc-gen-js.exe 파일이 있는 폴더\protoc-gen-js.exe --proto_path=. src/protos/greet.proto --js_out=import_style=commonjs:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

만약에 여기서 오류가 뜨면 대개가 윈도즈 시스템 환경 변수 문제이니 재 확인하고 고쳐진 후엔 항상 지금의 창을 닫고 다시 1번으로 돌아가서 시작합니다

---

c. 오류가 없으면 src/protos 폴더에 다음의 두 가지 새로운 파일이 형성됩니다.

• greet_grpc_web_pb.js
• greet_pb.js

---

수고하셨고 축하드립니다!

이 두 가지 파일이 생성되면 완료된 것입니다. 다음엔 이 두 가지 파일을 이용하여 어떻게 React에서 gRPC 서버와 커뮤니케이션을 하는지 알려드리겠습니다.

감사합니다

---

도움이되셨다면 아래의 ❤️공감버튼이나 구독버튼을 눌러 주세요~  감사합니다