GRPC-WEBを触った話

Transcript

1. gRPC-WEB を触った話 (をしたかった) Ginza.js #4 2019/09/02 きり丸(@nainaistar)
2. 自己紹介 名前：きり丸@nainaistar 経歴 JQuery 3年, vue.js 3カ月 (現在はサーバサイドのみの案件で js触れてないです…。) 悩み 社内システムがSOAP連携ばっかり。 RESTもあるけど…。
3. もくじ 1. gRPCとは 2. gRPC-WEBとは 3. 実践してみた話
4. 環境 OS: Windows 10 クライアント： Vue-Cli3 nginx サーバ： Java 11
5. 話す内容 ・gRPCとは ・gRPC-WEBとは ・実装手順
6. 話さない内容 ・実装できた手順
7. gRPCとは
8. gRPCとは Google社内でスケーラブルで疎結合なシステムを支える 15年ほど運用されていた「Stubby」というRPCインフラストラクチャがあった。 StubbyはGoogle社内のインフラ技術で支えていたため、 一般公開はできなかった。 SPDY, HTTP/2, QUIC等登場でGoogleのインフラに依存しない標準規格で Stubbyと同等の機能が提供できるようになった。 Stubbyを標準規格で作り直し、 2015年2月に「gRPC」としてOSSで公開された。
9. メリット 1. HTTP/2によるパフォーマンス a. テキストではなくバイナリで通信するので小容量で通信できる。 b. 1つのコネクションで複数の Req/Resをやり取りできる。 c. 2. Protocol Buffers によるデータ転送 a. protoファイルというIDLを書くと、 任意の言語のクライアント /サーバのコードを自動生成できる。 IFを先に定義することになるので、クライアントとサーバを同時並行で作業できる 3. 柔軟なストリーミング方式 a. シンプルなRPC b. サーバーストリーミング c. クライアントストリーミング d. 双方向ストリーミング
10. デメリット 1. HTTP/2が非対応な危険性 a. HTTP/2でバックエンドサーバへの転送をしないサービスがある。 2. ブラウザの対応状況が不十分 a. 後述 3. Protoファイルからのコード実装状況にばらつきがある 4. バイナリで通信するので読めない 5. RESTも遅いわけではない
11. gRPC-WEBとは
12. gRPC-WEBとは gRPCをWebブラウザのJavaScriptから呼び出し可能にしたもの。 「単一のプロトコルおよび単一の.protoインターフェイスのセットで統合されることで、何 時間もの時間を節約し、また多くの面倒くささも解消できるだろう」 と、CNCFが発表しました。
13. ブラウザの対応状況が不十分な点 1. backendサーバとの間にproxy サーバが必要 2. 双方向通信に非対応
14. リポジトリ 現在、2つのリポジトリにて、gRPC-WEBが 公開されています。 https://github.com/grpc/grpc-web ↑今回使用している方 https://github.com/improbable-eng/grpc-web 違いについては、以下のissueに書かれています。 https://github.com/improbable-eng/grpc-web/issues/199
15. (できなかったけど) 実装しようとした話
16. 前提 ・サーバーサイドの実装は完了 ・.protoファイルも既に作成している
17. 1. Vue-CLI3 でプロジェクトを作る $ vue ui 新規プロジェクトを作る。 vue-cli2 の時は別途babelの設定が必要だったようですが、 vue-cli3 で実装したときは特にbabelの設定は行いませんでした。
18. 2. protocol buffersのコンパイル準備をする protocol buffersにパスを通す。 Windowsの場合は、Javascript用プラグインを、 protoc-gen-grpc-web.exe とリネームする必要があります。 [本体] https://github.com/protocolbuffers/protobuf/releases [Javascript用プラグイン] https://github.com/grpc/grpc-web/releases
19. 3. .protoファイルからコードを生成する $ protoc helloworld.proto --js_out=import_style=commonjs:. --grpc-web_out=import_style=commonjs+dts,mode=grpcwebtext:. .protoファイルのあるディレクトリで以上のコマンドを入力する。 サンプルで、helloworld.protoを使用している。 なお、commonjs+dtsとすることで、 Javascriptだけでなく、Typescriptも出力することができる。
20. 4. 自動生成されたコードを使えるようにする $ yarn add google-protobuf @types/google-protobuf grpc-web 自動生成されたコード内でライブラリを使用しているので、 対象のライブラリをimportする
21. 5. 自動生成 したコードを 使用する
22. 6. 通信ができる(はず)
23. X. なんでできていないのか
24. HTTP/2 通信が必要だということに気づいたのが、 　2019/09/01 00:00 だったので、諦めて資料作成しました。 実装できる気配が無いことに気づいたきり丸
25. 前提 ・サーバーサイドの実装は完了 ・.protoファイルも既に作成している
26. (本当に必要だった) 前提 ・サーバーサイドの実装は完了 ・.protoファイルも既に作成している ・バックエンドに対してSSL通信で転送できるproxyサーバが必要
27. まとめ • gRPC自体は実績のあるRPCインフラストラクチャ • gRPC-WEBは既に存在するが、バックエンドサーバに対して SSL通信で転送してくれない可能性があるので要注意 • proxyサーバの準備が必須
28. 別件ですが… フロントエンドに関しては、 grpc-webではなく、 grpc-gatewayというアプローチもありそうなので、 実践している方は教えていただけると助かります。 [知ったきっかけ] /Web API に秩序を与える Protocol Buffers / Protocol Buffers for Web API #builderscon https://speakerdeck.com/south37/protocol-buffers-for-web-api-number-builderscon ?slide=33