はじめに

こんにちは。こちらはトレタ Advent Calendar 2019 22日の記事です。(大幅遅刻で申し訳ありません)
トレタでは積極的にgRPCを採用しています。そこでgrpc-webを利用するための準備をまとめました。

gRPCとブラウザの関係

現在2019/12時点ではウェブブラウザではgRPCで通信することはできません。
そのため、gRPCとhttpを変換するための機構が必要となります。
候補として2つあり、
・ gRPCサービスにRestful-APIのリバースプロキシを追加するgrpc-gateway
・ http上でbinaryもしくはbase64encodeしたデータを送信して、envoyなどのproxyでgRPCに変換するgrpc-web

grpc-webとjavascript

grpc-webはgRPC for Web Clientsと謳われているようにgRPC自体をweb clientで扱うためにあります。
gRPCで利用されるデータのインターフェース構造はprotocol buffersで設定します。
protocol buffersはIDLのため各種言語用に変換をしなくてはいけません。

protocとprotoc-gen-grpc-web

protocol buffersを変換するためのprotocとgrpc-web用に生成するためのプラグインprotoc-gen-grpc-webを利用します。
こちら両方とも実行ファイルのためプラットフォーム別にファイルが異なっているので、管理上dockerで生成すると便利だと思います。

FROM node:12-buster

ARG APP_HOME=${APP_HOME:-/app}
RUN mkdir -p $APP_HOME

ARG GRPC_HOME=${GRPC_HOME:-/grpc}
RUN mkdir -p $GRPC_HOME
WORKDIR $GRPC_HOME

USER root

RUN npm i rimraf -g
RUN curl -L -O https://github.com/protocolbuffers/protobuf/releases/download/v3.11.2/protoc-3.11.2-linux-x86_64.zip
RUN curl -L -O https://github.com/grpc/grpc-web/releases/download/1.0.7/protoc-gen-grpc-web-1.0.7-linux-x86_64
RUN unzip protoc-3.11.2-linux-x86_64.zip && cp ./bin/protoc /usr/local/bin/. && chmod +x /usr/local/bin/protoc
RUN cp protoc-gen-grpc-web-1.0.7-linux-x86_64 /usr/local/bin/protoc-gen-grpc-web && chmod +x /usr/local/bin/protoc-gen-grpc-web

WORKDIR $APP_HOME

protocのdockerをdocker-composeから利用します。

version: '3.7'
services:
  protoc:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - type: bind
        source: ./
        target: /app
    command: bash -c 'npm run protoc'

プロジェクトrootをbindしてnpmで実行するようにpackage.jsonにscriptを作成します。

"scripts": {
    "protoc": "npx rimraf ./grpc && mkdir -p ./grpc && cd ./proto && protoc *.proto -I. --js_out=import_style=commonjs:../grpc --grpc-web_out=import_style=typescript,mode=grpcwebtext:../grpc"
}

protocol buffersをprotoディレクトリに用意します、

syntax = "proto3";

message HelloRequest { string world = 1; }
message HelloResponse { string world = 1; }

service HelloService { rpc World(HelloRequest) returns (HelloResponse); }

これでdocker-compose run protocと実行すればgrpcディレクトリにjavascriptとtypescriptのファイルが生成されます。

.
├── Dockerfile
├── docker-compose.yml
├── grpc
│   ├── HelloServiceClientPb.ts
│   ├── hello_pb.d.ts
│   └── hello_pb.js
├── index.ts
├── node_modules
│   └── grpc-web
│       ├── README.md
│       ├── index.d.ts
│       ├── index.js
│       └── package.json
├── package-lock.json
├── package.json
└── proto
    └── hello.proto

利用方法

まずはgrpc-webをインストールします。

npm install -S grpc-web

まずは、service clientを呼び出します。

const client = new HelloServiceClient("https://gprc-server");

次にリクエストを作成します。

リクエストにはprotoで設定したworldにstringで設定します。

  const req = new HelloRequest();
  req.setWorld("world");

service HelloServiceで設定したrpc Worldにリクエストとmeta dataを渡せばcallbackで返ってきます。

client.world(req, {helloAuth: 'secret string'}, (err, res) => {
    if (err) {
      console.error(err.message);
    } else {
      console.log(res.getWorld());
    }
  });

これで、クライアント側でgrpcを利用することができました。

さいごに

protocol buffersからブラウザで通信できるまでをやってみました。
間違っているところやもっといい方法がありましたらご指摘などお待ちしております。

まだenvoyの設定やgRPCサーバの用意などやることはあります。
こちらもご要望がありましたらまた別途かけたらなと思います。
ありがとうございました。