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