GRPC-WEBを触った話

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. gRPCとは
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. gRPC-WEBとは
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide