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-WEBを触った話
Search
kirimaru
September 02, 2019
0
340
GRPC-WEBを触った話
kirimaru
September 02, 2019
Tweet
Share
More Decks by kirimaru
See All by kirimaru
早くAPI作るならFastAPI がオススメ
hirotokirimaru
1
46
DDD(ドメイン駆動設計)を知らない人に知ったつもりさせる/Introduce_DDD_to_unfamiliar_individuals
hirotokirimaru
0
310
例示! Spring Bootで作られた REST APIのテストコード/ Testing-Example-for-a-REST-API-created-with-Spring-Boot
hirotokirimaru
2
1.9k
一緒に使うことが多い値は別クラスにしよう(Data Clumps)/data_clumps_is_useful
hirotokirimaru
0
730
Backlogが好きな話。/i_like_backlog
hirotokirimaru
0
140
私が好きなポートアンドアダプターを紹介する/I-like-hexagonal-architecture.pdf
hirotokirimaru
1
1k
名付けのためにクラス図を元に会話しよう/Let's-use-class-diagram-to-communicate-with-client
hirotokirimaru
0
640
Code Smellsの Primitive Obsession に気を付けて設計する/Designing-with-Code-Smells-Primitive-Obsession
hirotokirimaru
1
3.4k
FCCを推す/My favorite software architecture is FCC
hirotokirimaru
0
230
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
It's Worth the Effort
3n
185
28k
Building an army of robots
kneath
306
45k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
KATA
mclloyd
30
14k
Navigating Team Friction
lara
187
15k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Transcript
gRPC-WEB を触った話 (をしたかった) Ginza.js #4 2019/09/02 きり丸(@nainaistar)
自己紹介 名前:きり丸@nainaistar 経歴 JQuery 3年, vue.js 3カ月 (現在はサーバサイドのみの案件で js触れてないです…。) 悩み
社内システムがSOAP連携ばっかり。 RESTもあるけど…。
もくじ 1. gRPCとは 2. gRPC-WEBとは 3. 実践してみた話
環境 OS: Windows 10 クライアント: Vue-Cli3 nginx サーバ: Java 11
話す内容 ・gRPCとは ・gRPC-WEBとは ・実装手順
話さない内容 ・実装できた手順
gRPCとは
gRPCとは Google社内でスケーラブルで疎結合なシステムを支える 15年ほど運用されていた「Stubby」というRPCインフラストラクチャがあった。 StubbyはGoogle社内のインフラ技術で支えていたため、 一般公開はできなかった。 SPDY, HTTP/2, QUIC等登場でGoogleのインフラに依存しない標準規格で Stubbyと同等の機能が提供できるようになった。 Stubbyを標準規格で作り直し、
2015年2月に「gRPC」としてOSSで公開された。
メリット 1. HTTP/2によるパフォーマンス a. テキストではなくバイナリで通信するので小容量で通信できる。 b. 1つのコネクションで複数の Req/Resをやり取りできる。 c. 2.
Protocol Buffers によるデータ転送 a. protoファイルというIDLを書くと、 任意の言語のクライアント /サーバのコードを自動生成できる。 IFを先に定義することになるので、クライアントとサーバを同時並行で作業できる 3. 柔軟なストリーミング方式 a. シンプルなRPC b. サーバーストリーミング c. クライアントストリーミング d. 双方向ストリーミング
デメリット 1. HTTP/2が非対応な危険性 a. HTTP/2でバックエンドサーバへの転送をしないサービスがある。 2. ブラウザの対応状況が不十分 a. 後述 3.
Protoファイルからのコード実装状況にばらつきがある 4. バイナリで通信するので読めない 5. RESTも遅いわけではない
gRPC-WEBとは
gRPC-WEBとは gRPCをWebブラウザのJavaScriptから呼び出し可能にしたもの。 「単一のプロトコルおよび単一の.protoインターフェイスのセットで統合されることで、何 時間もの時間を節約し、また多くの面倒くささも解消できるだろう」 と、CNCFが発表しました。
ブラウザの対応状況が不十分な点 1. backendサーバとの間にproxy サーバが必要 2. 双方向通信に非対応
リポジトリ 現在、2つのリポジトリにて、gRPC-WEBが 公開されています。 https://github.com/grpc/grpc-web ↑今回使用している方 https://github.com/improbable-eng/grpc-web 違いについては、以下のissueに書かれています。 https://github.com/improbable-eng/grpc-web/issues/199
(できなかったけど) 実装しようとした話
前提 ・サーバーサイドの実装は完了 ・.protoファイルも既に作成している
1. Vue-CLI3 でプロジェクトを作る $ vue ui 新規プロジェクトを作る。 vue-cli2 の時は別途babelの設定が必要だったようですが、 vue-cli3
で実装したときは特にbabelの設定は行いませんでした。
2. protocol buffersのコンパイル準備をする protocol buffersにパスを通す。 Windowsの場合は、Javascript用プラグインを、 protoc-gen-grpc-web.exe とリネームする必要があります。 [本体] https://github.com/protocolbuffers/protobuf/releases
[Javascript用プラグイン] https://github.com/grpc/grpc-web/releases
3. .protoファイルからコードを生成する $ protoc helloworld.proto --js_out=import_style=commonjs:. --grpc-web_out=import_style=commonjs+dts,mode=grpcwebtext:. .protoファイルのあるディレクトリで以上のコマンドを入力する。 サンプルで、helloworld.protoを使用している。 なお、commonjs+dtsとすることで、
Javascriptだけでなく、Typescriptも出力することができる。
4. 自動生成されたコードを使えるようにする $ yarn add google-protobuf @types/google-protobuf grpc-web 自動生成されたコード内でライブラリを使用しているので、 対象のライブラリをimportする
5. 自動生成 したコードを 使用する
6. 通信ができる(はず)
X. なんでできていないのか
HTTP/2 通信が必要だということに気づいたのが、 2019/09/01 00:00 だったので、諦めて資料作成しました。 実装できる気配が無いことに気づいたきり丸
前提 ・サーバーサイドの実装は完了 ・.protoファイルも既に作成している
(本当に必要だった) 前提 ・サーバーサイドの実装は完了 ・.protoファイルも既に作成している ・バックエンドに対してSSL通信で転送できるproxyサーバが必要
まとめ • gRPC自体は実績のあるRPCインフラストラクチャ • gRPC-WEBは既に存在するが、バックエンドサーバに対して SSL通信で転送してくれない可能性があるので要注意 • proxyサーバの準備が必須
別件ですが… フロントエンドに関しては、 grpc-webではなく、 grpc-gatewayというアプローチもありそうなので、 実践している方は教えていただけると助かります。 [知ったきっかけ] /Web API に秩序を与える Protocol
Buffers / Protocol Buffers for Web API #builderscon https://speakerdeck.com/south37/protocol-buffers-for-web-api-number-builderscon ?slide=33