エラーが起きるとサーバーが落ちる

Node.jsでAPIを開発しているのですが、エラーが発生するとサーバーがダウンしてしまいます。一度サーバーがダウンしてしまうと、次リクエストから応答しなくなります。

try/catchでエラーハンドリングしていても、予期せぬところでエラーが発生する可能性があるため、さすがに運用していく上ではサーバーが落ちないようにしたいです。

なんとかサーバーが落ちないようにできないものかと調べてみると、PM2が良さそうな感じでした。

PM2とは

PM2はNode.jsアプリケーションのプロセス管理を行うためのオープンソースです。PM2を使うことで、Node.jsアプリケーションの起動やログ管理、モニタリングができます。

プロセスの状態を常に監視しているため、プロセスが停止した場合などに自動で再起動させる機能を持っています。

PM2 - Home

PM2 is an advanced production process ma…

pm2.keymetrics.io

PM2を導入する

PM2を導入してみます。まずpackage.jsonにpm2を追加します。

・package.json

…

  "dependencies": {

    ...

    "pm2": "latest"
  },

…

次にPM2の設定ファイルを作成します。scriptの箇所などは適宜読み替える必要があります。watchをtrueにすることでコードが変更があった場合に自動で再起動してくれます。

・pm2.config.json

}
  "name": "sample-app",
  "script" : "ts-node src/driver/server.ts",
  "watch": true,
  "env" : {
    "NODE_ENV" : "development"
  },
  "env_production" : {
    "NODE_ENV" : "production"
  }
}

Dockerfileを修正する

Dockerfileを修正し、先ほど作成したpm2.config.jsonを読み込ませてpm2を使えるようにします。

–no-daemonオプションを指定することで、PM2を実行し続けることができます。

・Dockerfile

FROM node:16
WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install
RUN npm install -g ts-node

COPY . .

EXPOSE 5000

CMD node_modules/pm2/bin/pm2 --no-daemon start pm2.config.json

PM2で実際に動かしてみる

Dockerを再度ビルドして動かしみます。

無事動きました。

挙動の違いを確認する

nodemonの場合

従来のnodemonの場合は、以下のようにエラーが発生した場合「app crashed」になりコードの変更が検知されるまでは再起動されませんでした。

そのため、以降のリクエストはNo Responseとなってしまいます。

PM2の場合

今回導入したPM2の場合は、以下のようにエラーが発生した場合でもすぐにサーバーが再起動しました。

そのため、以降のリクエストも受け付けることができます。

docker-compose.yml、Dockerfileの作成

・docker-compose.yml

version: '3.4'

services:
  db:
    image: mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: sample_db
    ports:
      - '3306:3306'
    volumes:
      - data_volume:/var/lib/mysql
    command: --default-authentication-plugin=mysql_native_password

  api:
    image: api
    env_file: ./app.env
    build:
      context: .
      dockerfile: ./Dockerfile
    ports:
      - 5000:5000
    volumes:
      - .:/usr/src/app
    depends_on:
      - db

volumes:
  data_volume:

・Dockerfile

FROM node:16

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 5000

CMD sleep 1; npm run dev

docker-compose.ymlではMySQLの「db」とNode.jsの「api」の2つのサービスを定義しています。

「db」サービスの定義

公式からMySQL 8.0のバージョンのイメージを使用します。

environmentでMySQLに接続する際のパスワードと生成するDBを指定します。portsでポートフォワーディングの設定をしており、今回はホスト側のポート3306からコンテナ側のポート3306に繋がります。

volumesで「data_volume」というボリュームをコンテナの/var/lib/mysql/ディレクトリにマウントすることで、コンテナが削除されてもデータが保持されます。

また、MySQL8.0からはログイン認証方式のデフォルトがcaching_sha2_passwordになったことにより、接続時にエラーが発生するため、旧来の認証方法にするためのコマンドを追加しています。

「api」サービスの定義

apiというimageを指定しています。env_fileでapiコンテナからdbコンテナに接続する際の環境変数が定義されているapp.envファイルを読み込むようにしています。

buildでapiを起動するためのビルドを実行します。今回はDockerfileを指定し、そこでNode.jsのアプリケーションをDocker化しています。

参考：https://nodejs.org/ja/docs/guides/nodejs-docker-webapp/

depends_onは起動順を担保しているだけで、稼働順を担保していない

少しハマったのは、docker-compose upでコンテナの作成・起動を成功するが、APIからDBに接続する際にエラーになったことです。

depend_onでDBが起動が終わったタイミングで接続すると思っていたのですが、よくよく調べてみるとdepends_onは起動順を担保しているだけで、稼働順を担保していないことがわかりました。

つまり、DBから起動していたのですが、DBの起動が完了する前にAPIがDBに接続しようとしていたのです。

そのため、確実にDBが起動完了してからAPIが接続するようにするために「CMD sleep 1; npm run dev」で1秒するスリープさせるようにしました。色々調べてみると公式とかですとシェルを使ってみるとかかいてあったのですが、とりあえずこの方法でやっています。

Sequelizeでマイグレーションを実行する

docker-compose upで問題なくコンテナ作成・起動・接続できたらSequelizeを導入していきます。

SequelizeはNode.jsのORMでマイグレーション機能があり、これを使ってマイグレーションしていきます。以下のコマンドでSequelizeとその依存パッケージをインストールと初期化を行います。

$ docker-compose run --rm api npm i mysql2 sequelize sequelize-cli
$ docker-compose run --rm api npx sequelize-cli init

次に以下のコマンドでモデルとマイグレーションファイルを作成します。今回はToDoアプリを想定しており、tasksというテーブルをつくります。

$ docker-compose run --rm app npx sequelize-cli model:generate --name Task --attributes content:string,status:integer

実行するとモデルとマイグレーションファイルが作成されます。マイグレーションファイルを少し修正しておきます。具体的にstatusにデフォルト値を追加したりcreated_atをCURRENT_TIMESTAMP、updated_atをCURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMPにしました。

・xxxxxxxx-create-task.js

'use strict'
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.createTable('tasks', {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER
      },
      content: {
        type: Sequelize.STRING
      },
      status: {
        type: Sequelize.INTEGER,
        defaultValue: 1
      },
      created_at: {
        allowNull: false,
        type: Sequelize.DATE,
        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP')
      },
      updated_at: {
        allowNull: false,
        type: Sequelize.DATE,
        defaultValue: Sequelize.literal('CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP')
      }
    })
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('tasks')
  }
}

先ほど起動したMySQLのコンテナの接続情報をconfigファイルに設定して、マイグレーションを実行していきます。正常に実行されれば完了です。

$ docker-compose run --rm app npx sequelize-cli db:migrate

あとはseedersフォルダで初期データを投入することができます。シードファイルを作成して投入したいデータをセットし、以下のコマンドを実行することでシードできます。

$ docker-compose run --rm app npx sequelize-cli db:seed:all

Node.jsとは

Node.jsはサーバサイドで動くJavaScript実行環境で、軽量で効率よく多くのリクエストを処理するネットワークアプリケーションの構築が可能です。

Node.jsの特徴

JavaScriptでサーバサイドの処理を実装できる

JavaScriptによってサーバサイドの処理を実装できることで、フロントエンドからサーバサイドまでをJavaScriptのみで記述することができます。

これまでサーバサイドに手を出せなかった人が、フロントからサーバサイドまで通貫して行えるようになるというのは、大きな特徴であり利点になります。

ノンブロッキングI/O

ノンブロッキングI/Oによって、シングルスレッドで複数の処理を非同期に行うことができます。例えばDBにアクセスしたら、呼び出し元はその結果を待たずに次の処理に移り、DBの結果が出たというコールバックが返ってきたら、その結果を受け取ります。シングルスレッドなので、アクセスが増えてもメモリの消費量は少なく済みます。

このようにノンブロッキングI/Oによって、少ないメモリ消費で多くの処理を行うことができます。

ちなみに対義語としてブロッキングI/Oがあり、こちらはノンブロッキングI/Oとは違い呼び出し元はその結果を待ってから次の処理に進みます。

ノンブロッキングI/OとブロッキングI/Oのわかりやすい説明は以下が参考になります。

シングルスレッド

シングルスレッドとマルチスレッドについて整理しておきます。

Apachなど一般的なサーバーは「マルチスレッド」に対応しており、複数のアクセスが来た場合にはそれぞれメモリを割り当てて処理を行います。しかしこの方法は「C10K問題(詳しくはhttps://ja.wikipedia.org/wiki/C10K%E5%95%8F%E9%A1%8C)」と言われるように、1万規模の大量アクセスが来た場合にメモリがパンクして効率が悪くなります。

「シングルスレッド」の場合は、1つのメモリでアクセスを1つずつ処理するのでメモリ効率は良いが、1つずつしか処理できないので大量のアクセスを制御しにくくなります。

その点Node.jsは、JavaScriptの特徴であるシングルスレッド基盤の言語であり、非同期処理ができるため、少ないメモリ消費で大量のアクセスを高速に処理が可能になります。

イベントループ

シングルスレッドはスレッドが1つなのに多くの作業が同時に処理できるのは、同時実行をサポートしているイベントループという仕組みがあるからです。

イベントループは、リクエストやコールバックなどをイベントとして扱い、そのイベントに関する処理が終わった後に次のイベントを処理するように動作します。

イベントループの対義語はスレッドになります。スレッドはリクエストに対し、スレッドを立ち上げて対応します。リクエストが大量にくると、処理待ちが発生します。

例えば、Apacheはスレッドモデル、Nginxはイベントループモデルで動作します。スレッドモデルの場合はスレッドが増えるほどメモリの使用率が上昇します。イベントループモデルではシングルスレッドなので、メモリの使用率は少なく済みます。

イベントループモデルにもデメリットがあり、イベントが終わった後に次のイベント、またその次のイベントというように進むため、どこかで処理がブロックされると全体のイベントが止まってしまいます。

そこでNode.jsでは、このイベントループに加えてノンブロッキングI/Oがあることで、少ないメモリ消費で複数の処理を非同期に行うことができます。

「V8」エンジンによる高速な実行環境

Node.jsはJavaScriptを高速に実行させるため、Googleが開発した実行エンジン「V8」を採用しています。「V8」はChromeブラウザに搭載されており、これをサーバーサイドのNode.jsでも使えるようにしています。

従来の実行エンジンと違い、JavaScriptを即座にコンピュータが理解できる機械語に変換して処理を行うため非常に高速です。

このような実行エンジンを利用することで、Node.jsのさらなる高速な処理の実現を可能にしています。

Node.jsでHello Worldをやってみる

まずは基本のHello Worldを試してみます。

var http = require('http');

var server = http.createServer(function(req, res){
  res.writeHead(200, {'ContentType': 'text/plain'});
  res.write('Hello World');
  res.end();
});

server.listen(1234);
console.log('サーバーを起動しました');

一つずつ処理をみていきます。

まずrequire関数でhttpオブジェクトを生成しています。

次に、httpオブジェクトのcreateServerメソッドでサーバーオブジェクトを生成しています。これがnode.jsでつくるサーバーとなります。

コールバック関数の引数にhttpリクエストオブジェクト(第一引数)、httpレスポンスオブジェクト(第二引数)を受け取っています。

サーバーへリクエストが送られた際の動作を定義しています。

• writeHeadメソッドでhttpヘッダを書き出す(デフォルトは200, {‘ContentType’: ‘text/plain’})
• writeメソッドでhtmlコンテンツを書き出す
• endメソッドでhtmlコンテンツの出力を完了する

生成したサーバーオブジェクトをlistenメソッドで待ち受け状態にします。引数ではポート番号を指定しています。

ExpressでHello Worldをやってみる

ExpressはNode.jsで利用できるWebアプリケーションフレームワークで、広く使われているフレームワークの1つですです。

npmを初期化します。以下のコマンドを実行したらカレントディレクトリにpackage.jsonが生成されていることを確認しましょう。

$ npm init

Expressをインストールするには、npmを使用します。以下のコマンドでインストールできます。

saveオプションを使うとインストール対象のバージョン情報がpackage.json記録されます。

$ npm install express --save

ExpressでHello Worldを試してみます。

var express = require('express');
var app = express();

app.get('/', function(req, res){
  res.send('Hello World');
});

var server = app.listen(1234, function(){
  console.log('サーバーを起動しました');
});

一つずつ処理をみていきます。

まずrequire関数でExpressのオブジェクトを生成しています。

Expressオブジェクトのexpressメソッドで「アプリケーション」としての役割を担うオブジェクトを生成します。

次にアプリケーションオブジェクトのgetメソッドでGETリクエストの登録します。

この例ではルートにアクセスされた際の処理のみを登録していますが、リクエストの登録は必要なだけ何回でも行えます。sendメソッドは、様々なタイプの応答を送信するためのメソッドです。

最後にアプリケーションオブジェクトのlistenメソッドでポート番号とコールバック関数を指定して待受状態にしています。

Expressプロジェクトの雛形を作成

Expressアプリケーションの雛形は「expressgenerator」と言うライブラリを使用して自動生成します。

「-g」はグローバルインストールを行うためのオプションで、ライブラリをNode.jsのグローバルな領域へインストールします。expressgeneratorはプログラム中で利用するものではないため、グローバルな領域にインストールします。

$ npm install express-generator -g

雛形の作成は以下のexpressコマンドで生成します。

$ express --view=ejs

ここで使用している「–view=ejs」と言うオプションは、「テンプレートエンジンはEJSを使う」という意味です。このオプションを指定しないと「jade」と言うテンプレートエンジンを使う設定になってしまいます。

このコマンドを実行すると実行したディレクトリ内にいくつかのフォルダやファイルが生成されます。

雛形を生成したら、そのままディレクトリを移動せず（D:\node\expgeneのまま）次のコマンドを実行します。npmはpackage.jsonの「dependencies」に指定されているライブラリを一括でインストールする機能を持っています。

$ npm install

以下のコマンドでサーバーが起動します。デフォルトで用意されているindex.jsにアクセスします。

$ npm start

Express雛形のリソースの説明

binディレクトリ

binはサーバを起動するためのwwwファイルを格納しているディレクトリです。

通常、サーバを起動すること以外はあまり意識する必要はありません。このwwwファイルにはapp.jsを呼び出してサーバを実行するためのスクリプトが記述されています。

publicディレクトリ

画像やCSS、JSライブラリなどの静的ファイルを配置するためのディレクトリです。

images、stylesheets、javascriptsの3つのサブディレクトリも用意されています。

routesディレクトリ

画面ごとの処理を記述したJSファイルを配置するためのディレクトリです。デフォルトでindex.jsとusers.jsが配置されています。このディレクトリ配下に各画面用のJSファイルを用意して処理を実装します。

viewsディレクトリ

画面のテンプレートファイルを配置するためのディレクトリです。

テンプレートエンジンにEJSを指定した場合、デフォルトでindex.ejsとerror.ejsが配置されます。

app.js

プログラムのメインとなるファイルで、wwwから呼び出される前提の内容になっています。このファイルには最初から主に次の処理が実装されています。

• 各種オブジェクトの生成
• オブジェクトの利用宣言
• リクエスト毎の遷移設定
• エラー時の処理

これらのファイルには各種「宣言」に関する処理を実装します。処理はroutes配下に用意する画面ごとのJSファイルに実装するからです。

開発を進めるにあたり、画面を増やしたり新たに利用するライブラリを増やしたりする場合、このファイルにはそれらの「宣言」を加えていくことになります。

参考

Node.jsとは？特徴や活用する利点を初心者向けにわかりやすく解説 | 侍エンジニアブログ

Node.jsとは何なのか、その特徴をできることや使い道も交えて紹介します。No…

www.sejuku.net

Node.jsについて調べてみた #Node.js - Qiita

この雑な文章は、2015年5月中旬頃に調べていた内容をほじくり返してきたものです…

qiita.com

JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説 | コリス

JavaScript イベントループの仕組みについてGIFアニメーションで分かり…

coliss.com

Node.js — どこでもJavaScriptを使おう

Node.js® is a free, open-source, cross-p…

nodejs.org

参考：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

syntax = "proto3";

package helloworld;

service Greeter {
  rpc SayHello (HelloRequest) returns (HelloReply);
}

message HelloRequest {
  string name = 1;
}

message HelloReply {
  string message = 1;
}

Node.jsでgRPCサービスを実装

次に、Node.jsでgRPCサービスを実装します。ここでは、クライアントからリクエストを受け取り、call.request.nameを介してメッセージフィールドにアクセスできます。その後、レスポンスを作成し、クライアントに送り返します。

・server.js

const PROTO_PATH = __dirname + '/helloworld.proto';

const grpc = require('grpc');
const protoLoader = require('@grpc/proto-loader');
const packageDefinition = protoLoader.loadSync(
  PROTO_PATH,
  {
    keepCase: true,
    longs: String,
    enums: String,
    defaults: true,
    oneofs: true
  }
);
const protoDescriptor = grpc.loadPackageDefinition(packageDefinition);
const helloworld = protoDescriptor.helloworld;

function doSayHello(call, callback) {
  callback(null, {
    message: 'Hello! ' + call.request.name
  });
}

function getServer() {
  const server = new grpc.Server();
  server.addService(helloworld.Greeter.service, {
    sayHello: doSayHello,
  });
  return server;
}

if (require.main === module) {
  const server = getServer();
  server.bind('0.0.0.0:9090', grpc.ServerCredentials.createInsecure());
  server.start();
}

exports.getServer = getServer;

Envoyプロキシの設定

次に、ブラウザのgRPC-Webリクエストをバックエンドに転送するようにEnvoyプロキシを構成する必要があります。ここでは、ポート:8080でリッスンするようにEnvoyを構成し、ポート:9090でクラスターにgRPC-Webリクエストを転送します。

・envoy.yaml

admin:
  access_log_path: /tmp/admin_access.log
  address:
    socket_address: { address: 0.0.0.0, port_value: 9901 }

static_resources:
  listeners:
  - name: listener_0
    address:
      socket_address: { address: 0.0.0.0, port_value: 8080 }
    filter_chains:
    - filters:
      - name: envoy.http_connection_manager
        config:
          codec_type: auto
          stat_prefix: ingress_http
          route_config:
            name: local_route
            virtual_hosts:
            - name: local_service
              domains: ["*"]
              routes:
              - match: { prefix: "/" }
                route:
                  cluster: greeter_service
                  max_grpc_timeout: 0s
              cors:
                allow_origin_string_match:
                - prefix: "*"
                allow_methods: GET, PUT, DELETE, POST, OPTIONS
                allow_headers: keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web,grpc-timeout
                max_age: "1728000"
                expose_headers: custom-header-1,grpc-status,grpc-message
          http_filters:
          - name: envoy.grpc_web
          - name: envoy.cors
          - name: envoy.router
  clusters:
  - name: greeter_service
    connect_timeout: 0.25s
    type: logical_dns
    http2_protocol_options: {}
    lb_policy: round_robin
    hosts: [{ socket_address: { address: localhost, port_value: 9090 }}]

Envoy用Dockerfileの作成

Envoyを起動させるためにDockerfileを作成します。

・envoy.Dockerfile

FROM envoyproxy/envoy:v1.14.1
COPY ./envoy.yaml /etc/envoy/envoy.yaml
CMD /usr/local/bin/envoy -c /etc/envoy/envoy.yaml

クライアントコードの作成

HelloRequest、HelloReplyおよびGreeterClientクラスをインポートするファイルは、前に定義したprotocジェネレータによって生成されます(後で生成します)。

GreeterClientクラスをインスタンス化し、HelloRequestprotobufオブジェクトにフィールドを設定します。ファイルで定義したのと同じように、client.sayHello()を介してgRPC呼び出しを行うことができます。

・client.js

const {HelloRequest, HelloReply} = require('./helloworld_pb.js');
const {GreeterClient} = require('./helloworld_grpc_web_pb.js');

var client = new GreeterClient('http://localhost:8080');

var request = new HelloRequest();
request.setName('World');

client.sayHello(request, {}, (err, response) => {
  console.log(response.getMessage());
});

package.jsonの作成

package.jsonを作成します。

・package.json

{
  "name": "grpc-web-simple-example",
  "version": "0.1.0",
  "description": "gRPC-Web simple example",
  "devDependencies": {
    "@grpc/proto-loader": "~0.5.4",
    "async": "~1.5.2",
    "google-protobuf": "~3.12.0",
    "grpc": "~1.24.2",
    "grpc-web": "~1.1.0",
    "lodash": "~4.17.0",
    "webpack": "~4.43.0",
    "webpack-cli": "~3.3.11"
  }
}

index.htmlの作成

最後にindex.htmlを作成します。

・index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>gRPC-Web Example</title>
    <script src="./dist/main.js"></script>
  </head>
  <body>
    <p>Open up the developer console and see the logs for the output.</p>
  </body>
</html>

最終的に作成・生成したファイルは以下のようになりました。

Protobufメッセージとクライアントサービススタブの生成

protocのインストール

こちらを参考にprotocをインストールします。

https://github.com/protocolbuffers/protobuf/releases

以下でインストールされたか確認します。

$ which protoc
/usr/local/bin/protoc

protoc-gen-grpc-webのインストール

こちらからprotoc-gen-grpc-web-1.1.0-darwin-x86_64をダウンロードし、パスを通します。

https://github.com/grpc/grpc-web/releases

$ sudo mv ~/Downloads/protoc-gen-grpc-web-1.1.0-darwin-x86_64 \
/usr/local/bin/protoc-gen-grpc-web

$ chmod +x /usr/local/bin/protoc-gen-grpc-web

protocとprotoc-gen-grpc-webのインストールが完了したら、以下のコマンドでjsファイルを生成します。

$ protoc -I=. helloworld.proto \
--js_out=import_style=commonjs:. \
--grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

以下の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が生成されます。

$ npm install

$ npx webpack client.js --mode development

実際に動かしてみる

以上でサンプルを動かす準備は整いました。gRPCサービス、Envoyプロキシ、クライアントをそれぞれ立ち上げます。

gRPCサービス(ポート:9090リッスン)を立ち上げます。

$ node server.js

次にEnvoyプロキシを実行します。このenvoy.yamlファイルは、ポート:8080でリッスンし、転送するようにEnvoyを構成します。

$ docker build -t helloworld / envoy -f ./envoy.Dockerfile .

$ docker run -d -p 8080：8080 -p 9901：9901 helloworld / envoy

最後にwebサーバを立ち上げます。

$ python3 -m http.server 8081

全て正常に立ち上げたらlocalhost:8081にアクセスします。

デベロッパーツールからコンソールを立ち上げるとHello! Worldと表示されていることが確認できます。

client.jsのsetNameをTestにして再度ビルドするとちゃんとHello! Testに変わっていることが確認できます。

request.setName('Test');

便利な拡張機能

こちらのChrome拡張機能を使うことでgRPCサーバーから返されたリクエスト、レスポンス、エラーオブジェクトのデシリアライズされたJSONが表示されるようになります。

https://chrome.google.com/webstore/detail/grpc-web-developer-tools/ddamlpimmiapbcopeoifjfmoabdbfbjj/related?hl=en