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開発を楽しもう！

No content