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

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

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

gRPC

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

Protocol Buffers

gRPCのサーバ(Go Server)

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

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

gRPC-Web

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

gRPC-WEBの実装

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

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

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

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

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

No content

No content

No content

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

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

● 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のロードマップ

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

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

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

まとめ ● 現状の 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. とのことなので、みなさん使っ てフィードバックしましょう！

ありがとうございました