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
930
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
63
最近のUnityとVRChat / About Unity and VRChat recently
dojineko
0
150
WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!
dojineko
0
160
ペパボ ホスティング事業部のWebフロントエンドについて 2022 / About Web Frontend of Pepabo Hosting division 2022
dojineko
1
9.2k
Viteはいいぞ/Vite is Good
dojineko
1
740
はじめてでもできた!VR登壇への道 / Let's VR speech!
dojineko
0
420
もう俺には関係なくないTypeScript/Our TypeScript
dojineko
3
350
TypeScript ではじめる Clean Architecture / Let's start Clean Architecture with TypeScript
dojineko
2
3.3k
Hosting meets .NET / hosting-meets-dotnet
dojineko
0
710
Other Decks in Technology
See All in Technology
原則から考える保守しやすいComposable関数設計
moriatsushi
3
490
從四件事帶你見識見識 事件驅動架構設計 (EDA)
line_developers_tw
PRO
0
930
菸酒生在 LINE Taiwan 的後端雙刀流
line_developers_tw
PRO
0
1k
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
28
9.3k
ObsidianをMCP連携させてみる
ttnyt8701
2
140
新規プロダクト開発、AIでどう変わった? #デザインエンジニアMeetup
bengo4com
0
490
SFTPコンテナからファイルをダウンロードする
dip
0
550
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
0
110
Welcome to the LLM Club
koic
0
120
キャディでのApache Iceberg, Trino採用事例 -Apache Iceberg and Trino Usecase in CADDi--
caddi_eng
0
170
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
240
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
220
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
92
6.1k
Writing Fast Ruby
sferik
628
61k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
KATA
mclloyd
29
14k
Gamification - CAS2011
davidbonilla
81
5.3k
Speed Design
sergeychernyshev
31
1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Scaling GitHub
holman
459
140k
Practical Orchestrator
shlominoach
188
11k
Building an army of robots
kneath
306
45k
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