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-6159b02f5f5eb842343742/] Node.jsでgRPCサービスを実装 次に、Node.jsでgRPCサービスを実装します。ここでは、クライアントからリクエストを受け取り、call.request.nameを介してメッセージフィールドにアクセスできます。その後、レスポンスを作成し、クライアントに送り返します。 ・server.js [crayon-6159b02f5f5f4941633421/] Envoyプロキシの設定 次に、ブラウザのgRPC-Webリクエストをバックエンドに転送するようにEnvoyプロキシを構成する必要があります。ここでは、ポート:8080でリッスンするようにEnvoyを構成し、ポート:9090でクラスターにgRPC-Webリクエストを転送します。 ・envoy.yaml [crayon-6159b02f5f5f7161144309/] Envoy用Dockerfileの作成 Envoyを起動させるためにDockerfileを作成します。 ・envoy.Dockerfile [crayon-6159b02f5f5fa606934089/] クライアントコードの作成 HelloRequest、HelloReplyおよびGreeterClientクラスをインポートするファイルは、前に定義したprotocジェネレータによって生成されます(後で生成します)。 GreeterClientクラスをインスタンス化し、HelloRequestprotobufオブジェクトにフィールドを設定します。ファイルで定義したのと同じように、client.sayHello()を介してgRPC呼び出しを行うことができます。 ・client.js [crayon-6159b02f5f5fc397514080/] package.jsonの作成 package.jsonを作成します。 ・package.json [crayon-6159b02f5f5ff603421360/] index.htmlの作成 最後にindex.htmlを作成します。 ・index.html [crayon-6159b02f5f601594709527/] 最終的に作成・生成したファイルは以下のようになりました。 Protobufメッセージとクライアントサービススタブの生成 protocのインストール こちらを参考にprotocをインストールします。 https://github.com/protocolbuffers/protobuf/releases 以下でインストールされたか確認します。 [crayon-6159b02f5f603135330957/] protoc-gen-grpc-webのインストール こちらからprotoc-gen-grpc-web-1.1.0-darwin-x86_64をダウンロードし、パスを通します。 https://github.com/grpc/grpc-web/releases [crayon-6159b02f5f606598375815/] [crayon-6159b02f5f608146401468/] protocとprotoc-gen-grpc-webのインストールが完了したら、以下のコマンドでjsファイルを生成します。 [crayon-6159b02f5f60a812630757/] 以下の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-6159b02f5f60c790996627/] [crayon-6159b02f5f60e460797382/] 実際に動かしてみる 以上でサンプルを動かす準備は整いました。gRPCサービス、Envoyプロキシ、クライアントをそれぞれ立ち上げます。 gRPCサービス(ポート:9090リッスン)を立ち上げます。 [crayon-6159b02f5f610937199690/] 次にEnvoyプロキシを実行します。このenvoy.yamlファイルは、ポート:8080でリッスンし、転送するようにEnvoyを構成します。 [crayon-6159b02f5f612854104455/] [crayon-6159b02f5f614775022729/] 最後にwebサーバを立ち上げます。 [crayon-6159b02f5f618562404339/] 全て正常に立ち上げたらlocalhost:8081にアクセスします。 デベロッパーツールからコンソールを立ち上げるとHello! Worldと表示されていることが確認できます。 client.jsのsetNameをTestにして再度ビルドするとちゃんとHello! Testに変わっていることが確認できます。 [crayon-6159b02f5f61b371045665/] 便利な拡張機能 こちらの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のチュートリアルを試してみた