RPC | みんたく

こちらを参考に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 [crayon-636819821fe05656913297/] Node.jsでgRPCサービスを実装 次に、Node.jsでgRPCサービスを実装します。ここでは、クライアントからリクエストを受け取り、call.request.nameを介してメッセージフィールドにアクセスできます。その後、レスポンスを作成し、クライアントに送り返します。 ・server.js [crayon-636819821fe0e529026519/] Envoyプロキシの設定 次に、ブラウザのgRPC-Webリクエストをバックエンドに転送するようにEnvoyプロキシを構成する必要があります。ここでは、ポート:8080でリッスンするようにEnvoyを構成し、ポート:9090でクラスターにgRPC-Webリクエストを転送します。 ・envoy.yaml [crayon-636819821fe12829016224/] Envoy用Dockerfileの作成 Envoyを起動させるためにDockerfileを作成します。 ・envoy.Dockerfile [crayon-636819821fe16187538928/] クライアントコードの作成 HelloRequest、HelloReplyおよびGreeterClientクラスをインポートするファイルは、前に定義したprotocジェネレータによって生成されます(後で生成します)。 GreeterClientクラスをインスタンス化し、HelloRequestprotobufオブジェクトにフィールドを設定します。ファイルで定義したのと同じように、client.sayHello()を介してgRPC呼び出しを行うことができます。 ・client.js [crayon-636819821fe18741653786/] package.jsonの作成 package.jsonを作成します。 ・package.json [crayon-636819821fe1a251939311/] index.htmlの作成 最後にindex.htmlを作成します。 ・index.html [crayon-636819821fe1d109301360/] 最終的に作成・生成したファイルは以下のようになりました。 Protobufメッセージとクライアントサービススタブの生成 protocのインストール こちらを参考にprotocをインストールします。 https://github.com/protocolbuffers/protobuf/releases 以下でインストールされたか確認します。 [crayon-636819821fe1f233980635/] protoc-gen-grpc-webのインストール こちらからprotoc-gen-grpc-web-1.1.0-darwin-x86_64をダウンロードし、パスを通します。 https://github.com/grpc/grpc-web/releases [crayon-636819821fe24397469483/] [crayon-636819821fe26873042789/] protocとprotoc-gen-grpc-webのインストールが完了したら、以下のコマンドでjsファイルを生成します。 [crayon-636819821fe28699571932/] 以下の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が生成されます。 [crayon-636819821fe2a755615569/] [crayon-636819821fe2d349578453/] 実際に動かしてみる 以上でサンプルを動かす準備は整いました。gRPCサービス、Envoyプロキシ、クライアントをそれぞれ立ち上げます。 gRPCサービス(ポート:9090リッスン)を立ち上げます。 [crayon-636819821fe2f374941068/] 次にEnvoyプロキシを実行します。このenvoy.yamlファイルは、ポート:8080でリッスンし、転送するようにEnvoyを構成します。 [crayon-636819821fe31358210845/] [crayon-636819821fe33099673137/] 最後にwebサーバを立ち上げます。 [crayon-636819821fe35149633296/] 全て正常に立ち上げたらlocalhost:8081にアクセスします。 デベロッパーツールからコンソールを立ち上げるとHello! Worldと表示されていることが確認できます。 client.jsのsetNameをTestにして再度ビルドするとちゃんとHello! Testに変わっていることが確認できます。 [crayon-636819821fe38010736894/] 便利な拡張機能 こちらのChrome拡張機能を使うことでgRPCサーバーから返されたリクエスト、レスポンス、エラーオブジェクトのデシリアライズされたJSONが表示されるようになります。 https://chrome.google.com/webstore/detail/grpc-web-developer-tools/ddamlpimmiapbcopeoifjfmoabdbfbjj/related?hl=en

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