Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドエンジニアも知っておきたいgRPC
Search
Kenta Suzuki
April 24, 2018
Programming
18
11k
フロントエンドエンジニアも知っておきたいgRPC
#roppongijs #2 で話しました
Kenta Suzuki
April 24, 2018
Tweet
Share
More Decks by Kenta Suzuki
See All by Kenta Suzuki
レガシーアプリケーションのリニューアルにNuxt.jsで戦う #vuefes_reject
suusan2go
9
21k
rescue されない例外?! / A Exception not rescue #megurorb
suusan2go
0
2.8k
Rails サービスクラス再考 / have a rethink on Rails service class
suusan2go
8
10k
Flutterでアプリ作ってる話
suusan2go
2
2.8k
Nuxt.js + TypeScript = Great!
suusan2go
8
42k
ポストRailsとしてのKotlin + Spring Boot #m3kt
suusan2go
4
2k
gRPC on Spring Boot
suusan2go
0
2.8k
ずっとRubyをやっていたエンジニアがGoに入門して挫折して再挑戦した話
suusan2go
2
5.2k
非SPAなRailsアプリでレールに乗りつつReactを使う話
suusan2go
6
7.6k
Other Decks in Programming
See All in Programming
みんなでプロポーザルを書いてみた
yuriko1211
0
280
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
Amazon Qを使ってIaCを触ろう!
maruto
0
410
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
120
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
930
最新TCAキャッチアップ
0si43
0
190
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
The Language of Interfaces
destraynor
154
24k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
RailsConf 2023
tenderlove
29
900
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
YesSQL, Process and Tooling at Scale
rocio
169
14k
How to train your dragon (web standard)
notwaldorf
88
5.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Done Done
chrislema
181
16k
Transcript
フロントエンドエンジニアも知って おきたい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が途中で 固まってサンプル動かす所で終わってしまった
None
None
None
今後の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. とのことなので、みなさん使っ てフィードバックしましょう!
ありがとうございました