Upgrade to Pro — share decks privately, control downloads, hide ads and more …

gRPC-WEBを使ったWEBアプリ開発/Development web-app with g...

dojineko
February 08, 2022

gRPC-WEBを使ったWEBアプリ開発/Development web-app with gRPC-WEB

dojineko

February 08, 2022
Tweet

More Decks by dojineko

Other Decks in Technology

Transcript

  1. まず「gRPC」ってなぁに? • 元は Google が開発したRPC (リモートプロシージャコール) のフ レームワーク。 • 実装には「Protocol

    Buffer」と呼ばれる定義ファイルを使用し、 サーバーの実装コードと、APIクライアントコードを GoやTypeScriptなどの各言語向けに自動生成できる。 • ロードバランシングや、双方向通信に対応する。 • RPCの一種なのでRESTfulにあるようなURLに対して、 リソースをマッピングを行うコストが比較的少ない。(※諸説あり)
  2. • OpenAPI Specification (Swagger) ◦ RESTful API をスキーマベースで開発できる • GraphQL

    ◦ GraphQL の API をスキーマベースで開発できる • 共通する要素 ◦ 自動的なドキュメント生成のサポート ◦ プレイグラウンドのサポート ◦ APIの型情報の提供 【余談】コードを自動生成する類似例
  3. じゃあ「gRPC-WEB」ってなによ? • gRPCは"現状"ブラウザから直接使用できない • gRPC-WEB は gRPC の使用の一部であり、 gRPC をWebアプリから使用できるようにするための枠組み

    • 具体的には NGINX や Envoy など対応するプロキシサーバーを前段 に設置することで互換レイヤーを用意できる • 互換レイヤーのリクエストの形式は規定されており gRPC-WEB向けに自動生成されたAPIクライアントを使用することで 簡単にgRPCを使った実装へのリクエストができる
  4. Webブラウザ (APIクライアント) プロキシ gRPCサーバー ~gRPC-WEBのリクエスト周りのざっくりとした関係~ 自動生成されるクライアントの コードに含まれる処理で ペイロードはBase64に変換される リクエストメソッドは基本的にPOST 対応するエンドポイントに

    リクエストがあったら gRPCへの変換した上で サーバーへリクエストする gRPCサーバーにとって見れば gRPCで通信しに来られているのと 一緒なので gRPC-WEB向けに なにか特別なことをする必要はない ※ Cookieを操作したりなどgRPC-WEB特有の 特別な処理をすることもできます HTTP gRPC
  5. gRPCが「高速」とは・・・? • gRPC は HTTP/2 をベースとしている ◦ 参考: 「gRPC over

    HTTP2」 • 通信機構をもとにした効率的な送受信が行える ◦ 参考: 「Google: Cloud Run の WebSocket、HTTP/2、gRPC 双 方向ストリームのご紹介」 • gRPC-WEB は互換レイヤーなので HTTP/1.1 で使用できる ◦ ブラウザから gRPCが使えるが、 持ち前の速度はある程度犠牲にしている部分もある
  6. ドメイン実装 サーバー実装 クライアント実装 アプリケーション 定義ファイル ProtocolBuffer ~ サンプル実装の概要 ~ ブラウザ向けのクライアント

    実装は JavaScript を選択 TypeScript の型情報もある サーバー実装はGoを選択 コンパイルが超高速でラク