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

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

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

#roppongijs #2 で話しました

Kenta Suzuki

April 24, 2018
Tweet

More Decks by Kenta Suzuki

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Protocol Buffers

    View full-size slide

  6. gRPCのサーバ(Go Server)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. gRPC-WEBの実装

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. ● 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. まとめ
    ● 現状の 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 full-size slide

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

    View full-size slide