Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GRPC-WEBを触った話

04df7340898eac3a0536d3b47c55501c?s=47 kirimaru
September 02, 2019
76

 GRPC-WEBを触った話

04df7340898eac3a0536d3b47c55501c?s=128

kirimaru

September 02, 2019
Tweet

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