Node.jsでgRPC-Webのチュートリアルを試してみた

こちらを参考にgRPC-Webを使ってHello! Worldを表示するチュートリアルをやってみました。

参考: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

 

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

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

・server.js

 

Envoyプロキシの設定

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

・envoy.yaml

 

Envoy用Dockerfileの作成

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

・envoy.Dockerfile

 

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

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

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

・client.js

 

package.jsonの作成

package.jsonを作成します。

・package.json

 

index.htmlの作成

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

・index.html

 

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

 

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

protocのインストール

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

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

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

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

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

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

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

以下の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が生成されます。

 

実際に動かしてみる

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

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

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

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

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

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

 

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

 

便利な拡張機能

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

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