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

Node.js

Docker + Node.jsのアプリにPM2を導入する

Node.js + MySQLのアプリケーションをDocker上で動かせるようにする

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

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