Express で環境構築しようと考えてたが、
調査しているうちに NestJS なら標準で TypeScript が使えるとのことだったので NestJS でサーバーサイドを実装してみる。
nestjs.com
セットアップは簡単で公式ドキュメントの通りに
$ npm i -g @nestjs/cli
$ nest new [任意プロジェクト名]
だけでプロジェクトが作成できる。
docs.nestjs.com
あとは
$ cd [作成したプロジェクト名]
$ npm install
$ npm run start
サーバーの起動後、http://localhost:3000/ に
ブラウザからアクセスすると画面で確認できる。
gRPC 対応
https://kakkoyakakko2.hatenablog.com/entry/nestjs-grpc-server
既に素晴らしい記事があって上から順に写経するだけでNestJS を利用した gRPC のサーバーを作れる。
作成したgRPCサーバーの動作確認するツールの紹介もされている。
エコーサーバーを作ってみる
gRPC-Web のサンプルプロジェクトにあるエコーサーバーを
上記で作成した gRPCサーバーに実装してみる。
protoc から TypeScript のスタブを生成する方法が紹介されているのでこれを取り入れる。
qiita.com
protoc 作成
echo.protoc
syntax = "proto3";
package grpc.gateway.testing;
message EchoRequest {
string message = 1;
}
message EchoResponse {
string message = 1;
int32 message_count = 2;
}
service EchoService {
rpc Echo(EchoRequest) returns (EchoResponse);
}
スタブ生成。
$ protoc --plugin=./node_modules/.bin/protoc-gen-ts_proto \
--ts_proto_out=src \
--ts_proto_opt=nestJs=true \
--ts_proto_opt=outputClientImple=false \
--ts_proto_opt=addGrpcMetadata=true \
echo.proto
NestJS の CLI でコントローラー作成。
$ nest g controller echo
コントローラーの実装。
src/echo/echo.controller.ts
import { Controller } from '@nestjs/common';
import { Observable } from 'rxjs';
import { EchoRequest, EchoResponse, EchoServiceController, EchoServiceControllerMethods } from '../echo';
import { Metadata } from "@grpc/grpc-js";
@EchoServiceControllerMethods()
@Controller('echo')
export class EchoController implements EchoServiceController {
echo(request: EchoRequest, metadata?: Metadata): EchoResponse | Promise<EchoResponse> | Observable<EchoResponse> {
return {
message: "Nestjs<" + request.message
} as EchoResponse;
}
}
main.ts を修正。
...
const app = await NestFactory.createMicroservice<GrpcOptions>(AppModule, {
transport: Transport.GRPC,
options: {
url: 'localhost:9090',
package: 'grpc.gateway.testing',
protoPath: join(__dirname, '../echo.proto'),
},
});
await app.listen();
...
Envoyの設定変更&起動
gRPC-Web のサンプルプロジェクトで起動した Envoy サーバーの設定を今回作ったサーバーに転送されるようにする。
VSCode にリモート開発拡張を導入していれば
envoyのコンテナに入って直接修正できる。
Docker からホストの localhost を指定できないので addressを host.docker.internal に変更する。
envoy.yaml
- endpoint:
address:
socket_address:
address: host.docker.internal
port_value: 9090
修正できたら Docker Desktop で envoyコンテナを再起動する。
動作確認
BloomRPC を導入していれば protocファイルを読み込んで 127.0.0.1:9090 を指定すると動作確認できる。
前回の記事で作成した Svelteで gRPC-Web のクライアントを使っても動作確認できる。（エコーサーバーなので同じ動作だけど）
webdevnote.hatenablog.jp
