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

Transcript

1. 1.

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

2. 2.

   自己紹介 • Kenta Suzuki / @suusan2go • M3,inc / Software

   Engineer • 経験値で言うとこんな感じ ◦ Ruby > JavaScript > Kotlin(ServerSide) > Golang • 半分くらいサーバーサイドエンジニア
3. 3.

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

4. 4.

   gRPC

5. 5.

   gRPCとは • HTTP/2を使ったRPCフレームワーク • 2015年にGoogleが公開(ちなみにgRPCのgはGoogleではない) • ProtocolBuffersでインターフェースを定義。そこからクライアント / サーバ の実装を生成出来る

   • メルカリさんや、サイバーエージェントさんで事例
6. 6.

   Protocol Buffers

7. 7.

   gRPCのサーバ(Go Server)

8. 8.

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

9. 9.

   gRPCの利点 • メソッド名、リクエスト、レスポンスの型だけ決めれば良い ◦ URL、パラメータの渡し方、メソッドどうする？で悩まなくていい • 異なる言語、サーバ間でもType Safeにやり取りできる ◦ Go

   / JS / Java / Ruby / C ++ / Python / Node … https://grpc.io/docs/ • ブラウザでは動かないけどな！
10. 10.

    gRPC-Web

11. 11.

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

12. 12.

    gRPC-WEBの実装

13. 13.

    gRPC-WEBの実装 • improbable社?がgRPCをWEBで使うために 実装した。この実装が本家にも FB。 • TypeScript Generator ◦ (protoファイルからTypeScriptファイル

    を作成) • gRPC-Web Client ◦ (Web用のgRPCクライアント実装) • grpcwebproxy ◦ (バックエンドのgRPCの前段に配置) • grpcweb ◦ (Go向けのgRPCサーバwrapper)
14. 14.

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

15. 15.

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

    ◦ 最終的にClosure CompilerでJSにコンパイルする
16. 16.

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

17. 17.

    gRPC-Webを使ったアプリケーション • 公式のrepositoryにDockerのサンプルが用意されている • めちゃくちゃ色々ビルドが走るので、ローカル環境で動かすのはなかなか 大変そう ◦ nginxのビルド ◦ protocol

    buffersからgRPCコードの生成 C++ / JavaScript ◦ Closure Compilerでのコンパイル ◦ TODO Listくらい作ってやろうと思ってましたがdocker buildが途中で 固まってサンプル動かす所で終わってしまった
18. 18.

    None
19. 19.

    None
20. 20.

    None
21. 21.

    今後のgRPC-Webのロードマップ • gRPCで得られるメリットをそのままブラウザにも持ち込める ◦ JSが動かせればよいので、例えばReact Nativeとかでも使えるはず • 現状は素のJSしか生成してくれないのでTypeSafeではないが、 TypeScript supportはWork

    In Progress ◦ https://github.com/grpc/grpc-web/blob/master/ROADMAP.md
22. 22.

    • binary protobuf encodingなので、Chrome Developer Toolsで確認する のはちょっとしんどい ◦ Non-binary message

    encodingがWork In Progress ◦ 上記の解決というよりはパフォーマンスに課題感を感じているらしい ◦ gmailなんかではJSON LIKEなフォーマットが使われているらしい (JSON likeとは・・・) 今後のgRPC-Webのロードマップ
23. 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のロードマップ
24. 24.

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

    Proxy HTTP/* HTTP/* HTTP/*
25. 25.

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

    Proxy HTTP/* HTTP/* HTTP/*
26. 26.

    gRPC-Web はオススメ？ • TypeScript Support / Non-binary message encoding が実装されたら、か

    なりTypeSafeなフロントエンドの開発が実現できそうなので、 結構自分は 期待している • nginxのgRPCサポートなど、周辺のツールやミドルウェアも揃ってきてる印 象ある。Local Proxyが実装されると、REST APIと同じインフラでもgRPCの 恩恵が得られそう！
27. 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. とのことなので、みなさん使っ てフィードバックしましょう！
28. 28.

    ありがとうございました