Node.js

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

Node.js

Node.jsの特徴や使い方について整理する

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