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
880
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
42
最近のUnityとVRChat / About Unity and VRChat recently
dojineko
0
130
WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!
dojineko
0
150
ペパボ ホスティング事業部のWebフロントエンドについて 2022 / About Web Frontend of Pepabo Hosting division 2022
dojineko
0
9k
Viteはいいぞ/Vite is Good
dojineko
1
710
はじめてでもできた!VR登壇への道 / Let's VR speech!
dojineko
0
400
もう俺には関係なくないTypeScript/Our TypeScript
dojineko
3
330
TypeScript ではじめる Clean Architecture / Let's start Clean Architecture with TypeScript
dojineko
2
3.2k
Hosting meets .NET / hosting-meets-dotnet
dojineko
0
680
Other Decks in Technology
See All in Technology
Amazon EKS Auto ModeでKubernetesの運用をシンプルにする
sshota0809
0
110
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
240
OPENLOGI Company Profile
hr01
0
61k
Security response for open source ecosystems
frasertweedale
0
100
頻繁リリース × 高品質 = 無理ゲー? いや、できます!/20250306 Shoki Hyo
shift_evolve
0
150
大規模アジャイル開発のリアル!コミュニケーション×進捗管理×高品質
findy_eventslides
0
490
Multitenant 23ai の全貌 - 機能・設計・実装・運用からマイクロサービスまで
oracle4engineer
PRO
2
120
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
110
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
2
1.5k
LINE API Deep Dive Q1 2025: Unlocking New Possibilities
linedevth
1
160
Redefine_Possible
upsider_tech
0
250
DevOps文化を育むQA 〜カルチャーバブルを生み出す戦略〜 / 20250317 Atsushi Funahashi
shift_evolve
1
110
Featured
See All Featured
Building an army of robots
kneath
304
45k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
16
1.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Why Our Code Smells
bkeepers
PRO
336
57k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Unsuck your backbone
ammeep
670
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
Practical Orchestrator
shlominoach
187
10k
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