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を使ったWEBアプリ開発/Development web-app with g...
Search
dojineko
February 08, 2022
Technology
1
860
gRPC-WEBを使ったWEBアプリ開発/Development web-app with gRPC-WEB
dojineko
February 08, 2022
Tweet
Share
More Decks by dojineko
See All by dojineko
iOSのWebViewとClipboardAPI / WebView and ClipboardAPI on iOS
dojineko
0
35
最近のUnityとVRChat / About Unity and VRChat recently
dojineko
0
120
WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!
dojineko
0
150
ペパボ ホスティング事業部のWebフロントエンドについて 2022 / About Web Frontend of Pepabo Hosting division 2022
dojineko
0
8.8k
Viteはいいぞ/Vite is Good
dojineko
1
700
はじめてでもできた!VR登壇への道 / Let's VR speech!
dojineko
0
380
もう俺には関係なくないTypeScript/Our TypeScript
dojineko
3
320
TypeScript ではじめる Clean Architecture / Let's start Clean Architecture with TypeScript
dojineko
2
3.2k
Hosting meets .NET / hosting-meets-dotnet
dojineko
0
660
Other Decks in Technology
See All in Technology
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
320
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
380
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
780
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3.1k
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.9k
クラウド食堂とは?
hiyanger
0
120
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
280
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
500
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
110
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
750
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Navigating Team Friction
lara
183
15k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
BBQ
matthewcrist
87
9.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Fireside Chat
paigeccino
35
3.2k
Transcript
gRPC-WEBを使った WEBアプリ開発 2022-02-08 FukuokaJS @dojineko
どじねこ @dojineko GMOペパボ / よろず屋
今日お話する内容
もくじ ➔ gRPC/gRPC-WEBってなぁに? ➔ gRPCはどんなときに役に立つ? ➔ 「実際にやってみた」 ➔ まとめ
ref: https://grpc.io/blog/hello-pancakes/ 公式マスコットの 「パンケーキ」だよ!
gRPC/gRPC-WEBってなぁに?
まず「gRPC」ってなぁに? • 元は Google が開発したRPC (リモートプロシージャコール) のフ レームワーク。 • 実装には「Protocol
Buffer」と呼ばれる定義ファイルを使用し、 サーバーの実装コードと、APIクライアントコードを GoやTypeScriptなどの各言語向けに自動生成できる。 • ロードバランシングや、双方向通信に対応する。 • RPCの一種なのでRESTfulにあるようなURLに対して、 リソースをマッピングを行うコストが比較的少ない。(※諸説あり)
ドメイン実装 サーバー実装 クライアント実装 アプリケーション 定義ファイル ProtocolBuffer ここのコードは指定した 言語向けに自動生成される 自動生成されたコードに対 応する処理を実装する
クライアントコードも 指定した言語向けに 自動生成できる ~ gRPC周りのざっくりとした実装の関係 ~
• OpenAPI Specification (Swagger) ◦ RESTful API をスキーマベースで開発できる • GraphQL
◦ GraphQL の API をスキーマベースで開発できる • 共通する要素 ◦ 自動的なドキュメント生成のサポート ◦ プレイグラウンドのサポート ◦ APIの型情報の提供 【余談】コードを自動生成する類似例
じゃあ「gRPC-WEB」ってなによ? • gRPCは"現状"ブラウザから直接使用できない • gRPC-WEB は gRPC の使用の一部であり、 gRPC をWebアプリから使用できるようにするための枠組み
• 具体的には NGINX や Envoy など対応するプロキシサーバーを前段 に設置することで互換レイヤーを用意できる • 互換レイヤーのリクエストの形式は規定されており gRPC-WEB向けに自動生成されたAPIクライアントを使用することで 簡単にgRPCを使った実装へのリクエストができる
Webブラウザ (APIクライアント) プロキシ gRPCサーバー ~gRPC-WEBのリクエスト周りのざっくりとした関係~ 自動生成されるクライアントの コードに含まれる処理で ペイロードはBase64に変換される リクエストメソッドは基本的にPOST 対応するエンドポイントに
リクエストがあったら gRPCへの変換した上で サーバーへリクエストする gRPCサーバーにとって見れば gRPCで通信しに来られているのと 一緒なので gRPC-WEB向けに なにか特別なことをする必要はない ※ Cookieを操作したりなどgRPC-WEB特有の 特別な処理をすることもできます HTTP gRPC
gRPCはどんなときに役に立つ?
gRPCはどんなときに役に立つ? • OpenAPIやGraphQLとも共通する部分 ◦ APIの実装をスキーマベースで開発を行いたい時 ◦ APIに型情報がほしい時 ◦ CLIやAPIクライアントを自動生成したい時 •
gRPCならではの部分 ◦ API通信を高速に行いたい時 ◦ 双方向性通信を行いたい時
gRPCが「高速」とは・・・? • gRPC は HTTP/2 をベースとしている ◦ 参考: 「gRPC over
HTTP2」 • 通信機構をもとにした効率的な送受信が行える ◦ 参考: 「Google: Cloud Run の WebSocket、HTTP/2、gRPC 双 方向ストリームのご紹介」 • gRPC-WEB は互換レイヤーなので HTTP/1.1 で使用できる ◦ ブラウザから gRPCが使えるが、 持ち前の速度はある程度犠牲にしている部分もある
「実際にやってみた」 • 今回はLTなんで全部解説するのは時間的に厳しいですよね? ◦ 時間開いてる?いやいや・・・そんな・・・
・・・というわけで
出来上がったものがこちらになります
ドメイン実装 サーバー実装 クライアント実装 アプリケーション 定義ファイル ProtocolBuffer ~ サンプル実装の概要 ~ ブラウザ向けのクライアント
実装は JavaScript を選択 TypeScript の型情報もある サーバー実装はGoを選択 コンパイルが超高速でラク
Chrome拡張機能を入れれば シリアライズされた情報も確認できる Lighthouseのパフォーマンスの スコアは意外と良好
クライアントはAPIのリクエストと レスポンスの型情報を知っているので 通信が正常に完了しさえすれば 何が戻ってくるかは一目瞭然! 自動生成されたコードに対応する 実処理を実装するだけでOK! モック実装への差し替えも簡単!
まとめ
まとめ • API開発の手段として「gRPC」という手段も割と現実的 • スキーマをベースとしているのでAPIサーバーの実装と クライアントからのAPIの利用に型情報が使用できる • gRPCを直接使用する場合、HTTP/2 を組み合わせれば 高速な双方向性通信を活用したアプリケーションが作れる
• gRPC-WEBを使用すれば、WEBブラウザからも gRPCの開発手法を取り入れながら展開できる
型のある便利なAPI開発を楽しもう!
None