フロントエンドエンジニアも知っておきたいgRPC

#roppongijs #2 で話しました

Transcript

1. フロントエンドエンジニアも知って
   おきたいgRPC
   #Roppongi.js
   2018/04/24
   @suusan2go
   

   View Slide

2. 自己紹介
   ● Kenta Suzuki / @suusan2go
   ● M3,inc / Software Engineer
   ● 経験値で言うとこんな感じ
   ○ Ruby > JavaScript > Kotlin(ServerSide) > Golang
   ● 半分くらいサーバーサイドエンジニア
   

   View Slide

3. みなさんAPIどうやって実装・管理してますか
   ● 前回の#roppongi.jsで聞いたときはSwaggerでやってる人多数
   ● Swagger Editorで記述してくの結構辛いみたいな話を何人も聞いた
   ● 理想のRESTみたいなの作るのも維持していくのも結構たいへん
   

   View Slide

4. gRPC
   

   View Slide

5. gRPCとは
   ● HTTP/2を使ったRPCフレームワーク
   ● 2015年にGoogleが公開(ちなみにgRPCのgはGoogleではない)
   ● ProtocolBuffersでインターフェースを定義。そこからクライアント / サーバ
   の実装を生成出来る
   ● メルカリさんや、サイバーエージェントさんで事例
   

   View Slide

6. Protocol Buffers
   

   View Slide

7. gRPCのサーバ(Go Server)
   

   View Slide

8. gRPCのクライアント(Node Client)
   

   View Slide

9. gRPCの利点
   ● メソッド名、リクエスト、レスポンスの型だけ決めれば良い
   ○ URL、パラメータの渡し方、メソッドどうする？で悩まなくていい
   ● 異なる言語、サーバ間でもType Safeにやり取りできる
   ○ Go / JS / Java / Ruby / C ++ / Python / Node …
   https://grpc.io/docs/
   ● ブラウザでは動かないけどな！
   

   View Slide

10. gRPC-Web
    

    View Slide

11. ● gRPCのクライアントをブラウザで動かせる！
    ● HTTP/*で動く
    ● ブラウザの制限によりgRPCの一部の機能はまだ使えない
    bidirectional streamingとか
    https://github.com/grpc/grpc/blob/master/doc/PROTOCOL-WEB.md
    gRPC-Web
    

    View Slide

12. gRPC-WEBの実装
    

    View Slide

13. gRPC-WEBの実装
    ● improbable社?がgRPCをWEBで使うために
    実装した。この実装が本家にも FB。
    ● TypeScript Generator
    ○ (protoファイルからTypeScriptファイル
    を作成)
    ● gRPC-Web Client
    ○ (Web用のgRPCクライアント実装)
    ● grpcwebproxy
    ○ (バックエンドのgRPCの前段に配置)
    ● grpcweb
    ○ (Go向けのgRPCサーバwrapper)
    

    View Slide

14. gRPC-WEBの実装
    ● 長らくearly acessということでprivateだった
    が、2018年の3月頃に再びpublicに？
    ● gRPC公式のWEB実装
    ● 現在はβリリース！
    今日話すのはこっちの話！
    

    View Slide

15. (現状の)公式gRPC-Webの構成
    ● nginxによるproxy
    ○ これによりブラウザからのリクエストをgRPCのリクエストに変換して
    gRPCサーバに送る
    ○ 先日envoyというプロキシもgRPC-Webをサポートした
    ● Browserで動作できるJSクライアントを生成するためのモジュール
    ○ 最終的にClosure CompilerでJSにコンパイルする
    

    View Slide

16. (現状の)公式gRPC-Webの構成
    gRPC Server
    HTTP/* HTTP/2
    gRPC-Web gRPC
    ※独自モジュールを追加
    grpc_gateway_module.c
    

    View Slide

17. gRPC-Webを使ったアプリケーション
    ● 公式のrepositoryにDockerのサンプルが用意されている
    ● めちゃくちゃ色々ビルドが走るので、ローカル環境で動かすのはなかなか
    大変そう
    ○ nginxのビルド
    ○ protocol buffersからgRPCコードの生成 C++ / JavaScript
    ○ Closure Compilerでのコンパイル
    ○ TODO Listくらい作ってやろうと思ってましたがdocker buildが途中で
    固まってサンプル動かす所で終わってしまった
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. 今後のgRPC-Webのロードマップ
    ● gRPCで得られるメリットをそのままブラウザにも持ち込める
    ○ JSが動かせればよいので、例えばReact Nativeとかでも使えるはず
    ● 現状は素のJSしか生成してくれないのでTypeSafeではないが、
    TypeScript supportはWork In Progress
    ○ https://github.com/grpc/grpc-web/blob/master/ROADMAP.md
    

    View Slide

22. ● binary protobuf encodingなので、Chrome Developer Toolsで確認する
    のはちょっとしんどい
    ○ Non-binary message encodingがWork In Progress
    ○ 上記の解決というよりはパフォーマンスに課題感を感じているらしい
    ○ gmailなんかではJSON LIKEなフォーマットが使われているらしい
    (JSON likeとは・・・)
    今後のgRPC-Webのロードマップ
    

    View Slide

23. ● Proxy層(nginx / envoy)を挟むのがちょっと…
    ○ Local Proxyを検討中らしい。要はgRPCのサーバに直接組み込める
    gRPC-Web用のProxy。nginxなどを立てる必要がなくなる。
    ● React / Vue / Angular でどう使えばいいの？
    ○ This is to provide first-class support for gRPC API and gRPC-Web
    in popular Web frameworks such as Angular. とのこと
    ○ メジャーどころは何かしらサポートがありそう
    今後のgRPC-Webのロードマップ
    

    View Slide

24. ロードマップが全て達成されると…
    .proto
    ファイル
    gRPC Server
    Local
    Proxy
    gRPC Server
    Local
    Proxy
    HTTP/*
    HTTP/*
    HTTP/*
    

    View Slide

25. RESTと同じインフラでgRPCが使える！
    .proto
    ファイル
    gRPC Server
    Local
    Proxy
    gRPC Server
    Local
    Proxy
    HTTP/*
    HTTP/*
    HTTP/*
    

    View Slide

26. gRPC-Web はオススメ？
    ● TypeScript Support / Non-binary message encoding が実装されたら、か
    なりTypeSafeなフロントエンドの開発が実現できそうなので、 結構自分は
    期待している
    ● nginxのgRPCサポートなど、周辺のツールやミドルウェアも揃ってきてる印
    象ある。Local Proxyが実装されると、REST APIと同じインフラでもgRPCの
    恩恵が得られそう！
    

    View Slide

27. まとめ
    ● 現状の grpc/grpc-web はβとは言っているものの、なかなかこれでプロダ
    クト開発していくのはしんどそう
    ● improbable-eng/grpc-web に既に実アプリで使えるツール群が揃ってい
    るので、プロダクションで使うならまだこちらがオススメという所感です
    ● 公式？のgrpc-webは The current release is a Beta release, mainly for early
    adopters to provide feedback on the JS API. とのことなので、みなさん使っ
    てフィードバックしましょう！
    

    View Slide

28. ありがとうございました
    

    View Slide