Tweet
Tweet

Slide 1

Slide 1 text

gRPC-WEB を触った話 (をしたかった) Ginza.js #4 2019/09/02 きり丸(@nainaistar)

Slide 2

Slide 2 text

自己紹介 名前：きり丸@nainaistar 経歴 JQuery 3年, vue.js 3カ月 (現在はサーバサイドのみの案件で js触れてないです…。) 悩み 社内システムがSOAP連携ばっかり。 RESTもあるけど…。

Slide 3

Slide 3 text

もくじ 1. gRPCとは 2. gRPC-WEBとは 3. 実践してみた話

Slide 4

Slide 4 text

環境 OS: Windows 10 クライアント： Vue-Cli3 nginx サーバ： Java 11

Slide 5

Slide 5 text

話す内容 ・gRPCとは ・gRPC-WEBとは ・実装手順

Slide 6

Slide 6 text

話さない内容 ・実装できた手順

Slide 7

Slide 7 text

gRPCとは

Slide 8

Slide 8 text

gRPCとは Google社内でスケーラブルで疎結合なシステムを支える 15年ほど運用されていた「Stubby」というRPCインフラストラクチャがあった。 StubbyはGoogle社内のインフラ技術で支えていたため、 一般公開はできなかった。 SPDY, HTTP/2, QUIC等登場でGoogleのインフラに依存しない標準規格で Stubbyと同等の機能が提供できるようになった。 Stubbyを標準規格で作り直し、 2015年2月に「gRPC」としてOSSで公開された。

Slide 9

Slide 9 text

メリット 1. HTTP/2によるパフォーマンス a. テキストではなくバイナリで通信するので小容量で通信できる。 b. 1つのコネクションで複数の Req/Resをやり取りできる。 c. 2. Protocol Buffers によるデータ転送 a. protoファイルというIDLを書くと、 任意の言語のクライアント /サーバのコードを自動生成できる。 IFを先に定義することになるので、クライアントとサーバを同時並行で作業できる 3. 柔軟なストリーミング方式 a. シンプルなRPC b. サーバーストリーミング c. クライアントストリーミング d. 双方向ストリーミング

Slide 10

Slide 10 text

デメリット 1. HTTP/2が非対応な危険性 a. HTTP/2でバックエンドサーバへの転送をしないサービスがある。 2. ブラウザの対応状況が不十分 a. 後述 3. Protoファイルからのコード実装状況にばらつきがある 4. バイナリで通信するので読めない 5. RESTも遅いわけではない

Slide 11

Slide 11 text

gRPC-WEBとは

Slide 12

Slide 12 text

gRPC-WEBとは gRPCをWebブラウザのJavaScriptから呼び出し可能にしたもの。 「単一のプロトコルおよび単一の.protoインターフェイスのセットで統合されることで、何 時間もの時間を節約し、また多くの面倒くささも解消できるだろう」 と、CNCFが発表しました。

Slide 13

Slide 13 text

ブラウザの対応状況が不十分な点 1. backendサーバとの間にproxy サーバが必要 2. 双方向通信に非対応

Slide 14

Slide 14 text

リポジトリ 現在、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

Slide 15

Slide 15 text

(できなかったけど) 実装しようとした話

Slide 16

Slide 16 text

前提 ・サーバーサイドの実装は完了 ・.protoファイルも既に作成している

Slide 17

Slide 17 text

1. Vue-CLI3 でプロジェクトを作る $ vue ui 新規プロジェクトを作る。 vue-cli2 の時は別途babelの設定が必要だったようですが、 vue-cli3 で実装したときは特にbabelの設定は行いませんでした。

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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も出力することができる。

Slide 20

Slide 20 text

4. 自動生成されたコードを使えるようにする $ yarn add google-protobuf @types/google-protobuf grpc-web 自動生成されたコード内でライブラリを使用しているので、 対象のライブラリをimportする

Slide 21

Slide 21 text

5. 自動生成 したコードを 使用する

Slide 22

Slide 22 text

6. 通信ができる(はず)

Slide 23

Slide 23 text

X. なんでできていないのか

Slide 24

Slide 24 text

HTTP/2 通信が必要だということに気づいたのが、 　2019/09/01 00:00 だったので、諦めて資料作成しました。 実装できる気配が無いことに気づいたきり丸

Slide 25

Slide 25 text

前提 ・サーバーサイドの実装は完了 ・.protoファイルも既に作成している

Slide 26

Slide 26 text

(本当に必要だった) 前提 ・サーバーサイドの実装は完了 ・.protoファイルも既に作成している ・バックエンドに対してSSL通信で転送できるproxyサーバが必要

Slide 27

Slide 27 text

まとめ ● gRPC自体は実績のあるRPCインフラストラクチャ ● gRPC-WEBは既に存在するが、バックエンドサーバに対して SSL通信で転送してくれない可能性があるので要注意 ● proxyサーバの準備が必須

Slide 28

Slide 28 text

別件ですが… フロントエンドに関しては、 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