参考：https://github.com/grpc/grpc-web/tree/master/net/grpc/gateway/examples/helloworld

全体構成

今回のgRPC-Webを使ったHello! Worldを表示するための全体構成はこののようになります。

gRPC-Webでは、gRPCの呼び出しに変換する必要があり、Envoyプロキシを通して実現しています。

参考：https://qiita.com/betchi/items/0e9040f21b1f8ecbf321

参考：https://blog.envoyproxy.io/envoy-and-grpc-web-a-fresh-new-alternative-to-rest-6504ce7eb880

参考：https://qiita.com/namusyaka/items/71cf27fd3242adbf348c

Protocol BuffersでgRPCサービスを定義する

ここではRPCメソッド、リクエスト、レスポンスを持つサービスを定義します。

・helloworld.proto

syntax = "proto3";

package helloworld;

service Greeter {
  rpc SayHello (HelloRequest) returns (HelloReply);
}

message HelloRequest {
  string name = 1;
}

message HelloReply {
  string message = 1;
}

Node.jsでgRPCサービスを実装

次に、Node.jsでgRPCサービスを実装します。ここでは、クライアントからリクエストを受け取り、call.request.nameを介してメッセージフィールドにアクセスできます。その後、レスポンスを作成し、クライアントに送り返します。

・server.js

const PROTO_PATH = __dirname + '/helloworld.proto';

const grpc = require('grpc');
const protoLoader = require('@grpc/proto-loader');
const packageDefinition = protoLoader.loadSync(
  PROTO_PATH,
  {
    keepCase: true,
    longs: String,
    enums: String,
    defaults: true,
    oneofs: true
  }
);
const protoDescriptor = grpc.loadPackageDefinition(packageDefinition);
const helloworld = protoDescriptor.helloworld;

function doSayHello(call, callback) {
  callback(null, {
    message: 'Hello! ' + call.request.name
  });
}

function getServer() {
  const server = new grpc.Server();
  server.addService(helloworld.Greeter.service, {
    sayHello: doSayHello,
  });
  return server;
}

if (require.main === module) {
  const server = getServer();
  server.bind('0.0.0.0:9090', grpc.ServerCredentials.createInsecure());
  server.start();
}

exports.getServer = getServer;

Envoyプロキシの設定

次に、ブラウザのgRPC-Webリクエストをバックエンドに転送するようにEnvoyプロキシを構成する必要があります。ここでは、ポート:8080でリッスンするようにEnvoyを構成し、ポート:9090でクラスターにgRPC-Webリクエストを転送します。

・envoy.yaml

admin:
  access_log_path: /tmp/admin_access.log
  address:
    socket_address: { address: 0.0.0.0, port_value: 9901 }

static_resources:
  listeners:
  - name: listener_0
    address:
      socket_address: { address: 0.0.0.0, port_value: 8080 }
    filter_chains:
    - filters:
      - name: envoy.http_connection_manager
        config:
          codec_type: auto
          stat_prefix: ingress_http
          route_config:
            name: local_route
            virtual_hosts:
            - name: local_service
              domains: ["*"]
              routes:
              - match: { prefix: "/" }
                route:
                  cluster: greeter_service
                  max_grpc_timeout: 0s
              cors:
                allow_origin_string_match:
                - prefix: "*"
                allow_methods: GET, PUT, DELETE, POST, OPTIONS
                allow_headers: keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web,grpc-timeout
                max_age: "1728000"
                expose_headers: custom-header-1,grpc-status,grpc-message
          http_filters:
          - name: envoy.grpc_web
          - name: envoy.cors
          - name: envoy.router
  clusters:
  - name: greeter_service
    connect_timeout: 0.25s
    type: logical_dns
    http2_protocol_options: {}
    lb_policy: round_robin
    hosts: [{ socket_address: { address: localhost, port_value: 9090 }}]

Envoy用Dockerfileの作成

Envoyを起動させるためにDockerfileを作成します。

・envoy.Dockerfile

FROM envoyproxy/envoy:v1.14.1
COPY ./envoy.yaml /etc/envoy/envoy.yaml
CMD /usr/local/bin/envoy -c /etc/envoy/envoy.yaml

クライアントコードの作成

HelloRequest、HelloReplyおよびGreeterClientクラスをインポートするファイルは、前に定義したprotocジェネレータによって生成されます(後で生成します)。

GreeterClientクラスをインスタンス化し、HelloRequestprotobufオブジェクトにフィールドを設定します。ファイルで定義したのと同じように、client.sayHello()を介してgRPC呼び出しを行うことができます。

・client.js

const {HelloRequest, HelloReply} = require('./helloworld_pb.js');
const {GreeterClient} = require('./helloworld_grpc_web_pb.js');

var client = new GreeterClient('http://localhost:8080');

var request = new HelloRequest();
request.setName('World');

client.sayHello(request, {}, (err, response) => {
  console.log(response.getMessage());
});

package.jsonの作成

package.jsonを作成します。

・package.json

{
  "name": "grpc-web-simple-example",
  "version": "0.1.0",
  "description": "gRPC-Web simple example",
  "devDependencies": {
    "@grpc/proto-loader": "~0.5.4",
    "async": "~1.5.2",
    "google-protobuf": "~3.12.0",
    "grpc": "~1.24.2",
    "grpc-web": "~1.1.0",
    "lodash": "~4.17.0",
    "webpack": "~4.43.0",
    "webpack-cli": "~3.3.11"
  }
}

index.htmlの作成

最後にindex.htmlを作成します。

・index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>gRPC-Web Example</title>
    <script src="./dist/main.js"></script>
  </head>
  <body>
    <p>Open up the developer console and see the logs for the output.</p>
  </body>
</html>

最終的に作成・生成したファイルは以下のようになりました。

Protobufメッセージとクライアントサービススタブの生成

protocのインストール

こちらを参考にprotocをインストールします。

https://github.com/protocolbuffers/protobuf/releases

以下でインストールされたか確認します。

$ which protoc
/usr/local/bin/protoc

protoc-gen-grpc-webのインストール

こちらからprotoc-gen-grpc-web-1.1.0-darwin-x86_64をダウンロードし、パスを通します。

https://github.com/grpc/grpc-web/releases

$ sudo mv ~/Downloads/protoc-gen-grpc-web-1.1.0-darwin-x86_64 \
/usr/local/bin/protoc-gen-grpc-web

$ chmod +x /usr/local/bin/protoc-gen-grpc-web

protocとprotoc-gen-grpc-webのインストールが完了したら、以下のコマンドでjsファイルを生成します。

$ protoc -I=. helloworld.proto \
--js_out=import_style=commonjs:. \
--grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

以下の2つのファイルが生成されたことを確認します。

• helloworld_pb.js: HelloRequestとHelloReplyクラスが含まれたファイル
• helloworld_grpc_web_pb.js: GreeterClientクラスが含まれたファイル

protoc-gen-grpc-web: program not found or is not executableのエラーが出た場合は、こちらを参考にしてください。

https://hsuzuki.hatenablog.com/entry/2018/10/30/184544

クライアントのjsコードをコンパイル

クラインとのjsコードをブラウザが認識できるようにコンパイルします。webpackでclient.jsがビルドされdist/main.jsが生成されます。

$ npm install

$ npx webpack client.js --mode development

実際に動かしてみる

以上でサンプルを動かす準備は整いました。gRPCサービス、Envoyプロキシ、クライアントをそれぞれ立ち上げます。

gRPCサービス(ポート:9090リッスン)を立ち上げます。

$ node server.js

次にEnvoyプロキシを実行します。このenvoy.yamlファイルは、ポート:8080でリッスンし、転送するようにEnvoyを構成します。

$ docker build -t helloworld / envoy -f ./envoy.Dockerfile .

$ docker run -d -p 8080：8080 -p 9901：9901 helloworld / envoy

最後にwebサーバを立ち上げます。

$ python3 -m http.server 8081

全て正常に立ち上げたらlocalhost:8081にアクセスします。

デベロッパーツールからコンソールを立ち上げるとHello! Worldと表示されていることが確認できます。

client.jsのsetNameをTestにして再度ビルドするとちゃんとHello! Testに変わっていることが確認できます。

request.setName('Test');

便利な拡張機能

こちらのChrome拡張機能を使うことでgRPCサーバーから返されたリクエスト、レスポンス、エラーオブジェクトのデシリアライズされたJSONが表示されるようになります。

https://chrome.google.com/webstore/detail/grpc-web-developer-tools/ddamlpimmiapbcopeoifjfmoabdbfbjj/related?hl=en