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
960
gRPC-WEBを使ったWEBアプリ開発/Development web-app with gRPC-WEB
dojineko
February 08, 2022
Tweet
Share
More Decks by dojineko
See All by dojineko
2025-03-12 WebXRのいま(2025Q1) / About WebXR (2025Q1)
dojineko
0
510
iOSのWebViewとClipboardAPI / WebView and ClipboardAPI on iOS
dojineko
0
76
最近のUnityとVRChat / About Unity and VRChat recently
dojineko
0
160
WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!
dojineko
0
170
ペパボ ホスティング事業部のWebフロントエンドについて 2022 / About Web Frontend of Pepabo Hosting division 2022
dojineko
1
9.4k
Viteはいいぞ/Vite is Good
dojineko
1
750
はじめてでもできた!VR登壇への道 / Let's VR speech!
dojineko
0
440
もう俺には関係なくないTypeScript/Our TypeScript
dojineko
3
360
TypeScript ではじめる Clean Architecture / Let's start Clean Architecture with TypeScript
dojineko
2
3.3k
Other Decks in Technology
See All in Technology
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.1k
slog.Handlerのよくある実装ミス
sakiengineer
4
420
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
420
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
310
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
980
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
270
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
160
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
270
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Statistics for Hackers
jakevdp
799
220k
Building an army of robots
kneath
306
46k
BBQ
matthewcrist
89
9.8k
Faster Mobile Websites
deanohume
309
31k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Why Our Code Smells
bkeepers
PRO
339
57k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
RailsConf 2023
tenderlove
30
1.2k
The Language of Interfaces
destraynor
161
25k
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